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-preference
caso 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