Como implementar o modo escuro respeitando as preferências do usuário e os padrões da web

O light-dark é uma função CSS nativa, não uma biblioteca, nem um framework, introduzida para simplificar a troca de valores entre modos claro e escuro sem recorrer a JavaScript ou múltiplas classes. Ela funciona em cores, gradientes e imagens (desde Chrome/Edge 150, Firefox 150 e Safari Technology Preview), mas ainda tem limitações reais: não substitui media queries para lógica condicional complexa, não afeta box-shadow ou bordas automaticamente, e não resolve o problema de sincronia entre color-scheme e @media (prefers-color-scheme) em todos os contextos, especialmente em SVGs fora do documento principal e em iframes em navegadores anteriores ao Safari 27.

A implementação robusta exige camadas: o meta tag <meta name="color-scheme" content="light dark"> como base para carregamento inicial rápido, seguido de prefers-color-scheme para respeitar o SO, e por fim um controle manual com persistência via localStorage, tudo isso alinhado com variáveis CSS customizadas e style queries para evitar duplicação de regras. Isso é exatamente o que o artigo CEVIU de abril detalhou nos 'Seis Níveis': o nível 5 usa light-dark() com fallbacks manuais, e o nível 6 integra ele com queries de estilo para mudanças além de cor, como bordas no lugar de sombras.

Em abril, o CEVIU listou o light-dark() como recurso emergente, com suporte parcial e dependência de canary builds. Agora, em julho de 2026, ele está estável em todos os três principais motores, Chrome/Edge 150, Firefox 150 e Safari Technology Preview, e já permite uso prático com imagens e gradientes. Também houve avanço real na interoperabilidade: o Safari 27 passou a fazer com que o color-scheme do documento pai sobrescreva prefers-color-scheme dentro de iframes, algo que antes era inconsistente. Mas o bug crítico permanece: light-dark() ainda não ativa @media (prefers-color-scheme) em SVGs externos, conforme relatado no bug report citado no artigo-fonte.

Porque o light-dark reduz a necessidade de JS para alternância de tema, melhorando performance, acessibilidade e DX. Ele evita flicker de estilo, elimina dependência de bibliotecas de estado e reduz o risco de inconsistência entre o que o sistema diz e o que a página aplica. Mas só funciona bem quando combinado com boas práticas de contraste (WCAG 2.2 exige 4.5:1 para texto normal) e com fallbacks explícitos para propriedades que ele não controla, como bordas, sombras e tipografia. Ignorar isso gera interfaces que parecem 'escurecidas', mas não são acessíveis nem visualmente coerentes.