Cor da barra superior do Safari 15 no modo escuro

O Safari 15 permite alterar a cor da barra superior, tanto no iOS/iPadOS quanto no macOS. Imagino que seja a mesma configuração do Chrome para Android, porque embora esse recurso seja novo no Safari, o código do Manual já contemplava a meta tag correspondente.

Problema: ela estava configurada na cor branca, o que deixava o site, no modo escuro, um tanto… esquisito. Felizmente, é possível usar media queries em meta tags (outra novidade para mim) e, desse modo, configurar cores específicas para os modos claro e escuro. O código ficou assim:

<meta name="theme-color" media="(prefers-color-scheme: light)" content="#FFFFFF">
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#000000">

Curiosamente, o Safari 15 do macOS ignorava a meta tag no modo escuro e exibia uma barra superior em cinza bem escuro. Com a nova meta tag, porém, agora ela fica completamente preta, mesclada com o leiaute do site.

Agradecimentos ao Matheus Fantinel, que me alertou do problema e passou o código/solução.

início