Como detectar se o sistema operacional está no modo escuro nos navegadores?

Semelhante a " Como detectar se o OS X está no modo escuro? " Apenas para navegadores.

Alguém descobriu se existe uma maneira de detectar se o sistema do usuário está no novo modo escuro do OS X no Safari / Chrome / Firefox?

Gostaríamos de mudar o design do nosso site para ser compatível com o modo escuro, com base no modo operacional atual.

O novo padrão é registrado no W3C no nível 5 de consultas de mídia .

NOTA: atualmente disponível apenas no Safari Technology Preview Release 68

Caso a preferência do usuário seja light:

/* Light mode */
@media (prefers-color-scheme: light) {
    body {
        background-color: white;
        color: black;
    }
}

Caso a preferência do usuário seja dark:

/* Dark mode */
@media (prefers-color-scheme: dark) {
    body {
        background-color: black;
        color: white;
    }
}

Também existe a opção no-preferencecaso um usuário não tenha preferência. Mas eu recomendo que você use CSS normal nesse caso e faça cascata em seu CSS corretamente.

EDIT (7 dez 2018):

No Safari Technology Preview Release 71, eles anunciaram uma opção de alternância no Safari para facilitar os testes. Também fiz uma página de teste para ver o comportamento do navegador.

Se você tiver o Safari Technology Preview Release 71 instalado, poderá ativar através de:

Desenvolver> Recursos experimentais> Suporte a CSS no modo escuro

Então, se você abrir a página de teste e abrir o inspetor de elementos, terá um novo ícone para alternar para o modo Escuro / Claro.

-

EDIT (11 de fevereiro de 2019): Apple é lançada no novo modo escuro Safari 12.1

-

EDIT (5 set 2019): Atualmente, 25% do mundo pode usar CSS no modo escuro. Fonte: caniuse.com

Próximos navegadores:

• iOS 13 (acho que será lançado na próxima semana após o Keynote da Apple)
• EdgeHTML 76 (não tenho certeza de quando será enviado)

-

EDIT (5 nov 2019): Atualmente, 74% do mundo pode usar CSS no modo escuro. Fonte: caniuse.com

-

EDIT (3 de fevereiro de 2020): O Microsoft Edge 79 suporta o modo escuro. (lançado em 15 jan 2020)

-

Minha sugestão seria: que você considere implementar o modo escuro, porque a maioria dos usuários pode usá-lo agora (especialmente para dispositivos móveis, também conhecidos como economia de bateria).

Nota: Todos os principais navegadores agora suportam o modo escuro, exceto: IE, Edge

Se você deseja detectá-lo a partir do JS, pode usar este código:

if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    // dark mode
}

Para observar as alterações:

window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
    const newColorScheme = e.matches ? "dark" : "light";
});

No momento, este assunto (setembro de 2018) está sendo discutido em "Rascunhos do Editor de CSS Working Group" . Foi lançada a especificação (veja acima), disponível como uma consulta de mídia. Algo já chegou ao Safari, veja também aqui . Portanto, em teoria, você pode fazer isso no Safari / Webkit:

@media (prefers-dark-interface) { color: white; background: black }

Mas parece que isso é privado . No MDN, um recurso de mídia CSS inverted-colorsé mencionado . Plug: Eu escrevi sobre o modo escuro aqui .

Eu pesquisei através da API Mozilla, eles não parecem ter variáveis ​​correspondentes à cor das janelas do navegador. Embora eu tenha encontrado uma página que pode ajudá-lo: Como usar estilos de sistema operacional em CSS . Apesar do cabeçalho do artigo, as cores são diferentes para Chrome e Firefox.

De acordo com a Mozilla, este é o método preferido em setembro de 2019

@media (prefers-color-scheme: dark) {
  body {
    background: #000;
  }
}
@media (prefers-color-scheme: light) {
  body {
    background: #fff;
  }
}