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


138

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.


1
Até onde eu sei, não existe uma consulta de mídia CSS para o Safari detectar o modo claro ou escuro, mas o Safari suporta definitivamente widgets escuros nas páginas HTML. Pode ser útil arquivar um radar para ele.
mschmidt

Não me hiurt, mas depois Stackoverflow introduziu o modo escuro Eu pesquisei como eles implementaram o modo "sistema" e deparei com esta questão. Espero muito tráfego nisto :-)
usr-local-ΕΨΗΕΛΩΝ

Respostas:


177

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.

alternar 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


2
Apenas testei. Se você alterar o tema nas configurações do seu Mac OS, precisará reiniciar o navegador. Pena que não é sincronizado em tempo real.
Herman Starikov

3
@HermanStarikov Publiquei uma atualização sobre esse problema que você está descrevendo. Com o novo Safari Technology Preview Release 71, você pode alternar em tempo real.
Davy de Vries

Agradável! Eu fiz uma pequena demonstração do que theming ficaria com inicialização: twitter.com/Hermanhasawish/status/1071517994302562305
Herman Starikov

2
Existe uma maneira de detectar isso em JavaScript?
Akash Kava

7
@AkashKava Pesquisei no Google, sim, é possível se você usar algo como isto: window.matchMedia("(prefers-color-scheme: dark)").matchesSe eu tiver algum tempo livre, adicionarei uma solução javascript completa à minha resposta.
Davy de Vries

68

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";
});

Oi! Isso funciona muito bem. Estou curioso - como exatamente essa sintaxe funciona?
Stormblessed

1
O @Stormblessed primeiro verificará se o navegador suporta matchMediae depois tentará corresponder à prefers-color-scheme: darkstring. Se corresponder, estamos no modo escuro.
Mark Szabo

Com o novo operador Elvis, isso pode ser escrito comoif (window.matchMedia?('(prefers-color-scheme: dark)').matches) { }
Mark Szabo

ah, isso faz sentido! A sintaxe com .matches parecia estar fazendo a comparação entre a primeira coisa e a segunda ou algo assim. Obrigado!
Stormblessed

Deve ser a resposta verificada.
podperson 24/03

22

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 .



2

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;
  }
}
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.