Um recurso de dispositivo e aplicativo que passei a apreciar é a capacidade de alternar entre os modos claro e escuro. Se o senhor já fez codificação ou leitura até tarde da noite, sabe como um tema escuro pode ser incrível para evitar o cansaço visual e as dores de cabeça resultantes. O macOS implementou recentemente um modo escuro nativo, mas esse modo não converte os sites em uma interface escura, de modo que o usuário continua a ter um site claro, independentemente do tema nativo. Não seria incrível se os sites também ficassem escuros ou claros com base na preferência do sistema do usuário?
O grupo de trabalho do CSS concorda, e é por isso que eles criou um prefers-color-scheme consulta de mídiauma consulta de mídia que sinaliza qual é a preferência de tema do usuário e permite que o senhor codifique seu site para corresponder a essa preferência!
O prefers-color-scheme tem dois valores efetivos que podem ser especificados: light e dark:
/* Light mode */
@media (prefers-color-scheme: light) {
html {
background: white;
color: black;
}
}
/* Dark mode */
@media (prefers-color-scheme: dark) {
html {
background: black;
color: white;
}
}
Juntamente com o design padrão do site, o senhor poderia oferecer três designs diferentes: padrão (no-preference), modificações claras e modificações escuras.
Para facilitar o gerenciamento das cores em cada modo, o senhor pode simplesmente modificar as variáveis CSS dentro da consulta de mídia:
/* Defaults */
:root {
--color-scheme-background: pink;
--color-scheme-text-color: red;
}
/* Light mode */
@media (prefers-color-scheme: light) {
:root {
--color-scheme-background: white;
--color-scheme-text-color: black;
}
}
/* Dark mode */
@media (prefers-color-scheme: dark) {
:root {
--color-scheme-background: black;
--color-scheme-text-color: white;
}
}
/* Usage */
html {
background: var(--color-scheme-background);
color: var(--color-scheme-text-color);
}
Se quiser usar o JavaScript para saber qual modo o usuário prefere, pode fazer isso facilmente com obtendo um valor de variável CSS:
html {
content: ""; /* (ab)using the content property */
}
/* Light mode */
@media (prefers-color-scheme: light) {
html {
content: "light"; /* (ab)using the content property */
}
}
/* Dark mode */
@media (prefers-color-scheme: dark) {
html {
content: "dark"; /* (ab)using the content property */
}
}
const mode = getComputedStyle(document.documentElement).getPropertyValue('content');
// mode: "dark"
Estou satisfeito com a existência de uma consulta de mídia oficial para preferência de cor/tema. Como alguém que sofre de pequenas dores de cabeça a enxaquecas que entorpecem o crânio, minha preferência é sempre por um tema escuro e aprecio os aplicativos que fazem um esforço extra para me proporcionar uma experiência de usuário indolor. Já usamos media queries para acomodar impressão e diferentes tamanhos de viewport, então vamos dar um passo a mais para fornecer cores com base na preferência do usuário!
Observação: no momento da publicação, somente o Safari Preview 68 implementou essa consulta de mídia. Acompanhe Bugzilla bug 1494034 para saber o status de suporte do Firefox.
