Como funcionam os tokens de modo escuro
Tokens de modo escuro são um segundo conjunto de valores ligado aos mesmos nomes semânticos do tema claro, de modo que trocar de modo reaponta nomes como --color-surface para outras cores sem que nenhum componente precise saber qual modo está ativo.
Por que inverter não funciona
A abordagem intuitiva - virar a luminosidade, trocar preto e branco - produz um tema escuro que parece errado de um jeito difícil de nomear no começo.
Alguns motivos concretos:
Preto puro é agressivo. A maioria dos temas escuros bem feitos usa um cinza bem escuro, muitas vezes com um leve matiz, em vez de #000000. Texto branco em contraste máximo sobre preto puro causa halação, e o texto parece sangrar.
Cores saturadas parecem mais claras sobre escuro. Um azul confortável sobre branco pode vibrar contra um fundo escuro. Variantes para modo escuro normalmente são dessaturadas e clareadas, não apenas clareadas.
A elevação se inverte. Em temas claros, superfícies elevadas projetam sombra. Em temas escuros a sombra é quase invisível, então superfícies elevadas se indicam ficando mais claras. Tokens de sombra que funcionam num modo não carregam informação no outro.
As razões de contraste não sobrevivem à inversão. Uma combinação que passa AA no claro pode falhar no escuro. Cada combinação precisa ser reverificada, não apenas recalculada.
A estrutura que faz funcionar
Modo escuro é um problema de nomenclatura antes de ser um problema de cor. Só sai limpo se a camada semântica já existir.
:root {
--color-surface: var(--grey-50);
--color-text-primary: var(--grey-900);
}
[data-theme="dark"] {
--color-surface: var(--grey-900);
--color-text-primary: var(--grey-50);
}Componentes referenciam --color-surface. Eles nunca ficam sabendo que existe um modo. Acrescentar um terceiro tema depois é outro bloco com a mesma forma, não uma mudança em cada componente.
Se os componentes referenciam primitivos diretamente, não há nada para reapontar, e o modo escuro vira um condicional em cada arquivo.
Gere os dois juntos
Um tema escuro colocado seis meses depois é uma revisão de cada componente. Produzido junto ao tema claro, a partir das mesmas escalas, sai de graça.
Esse é o argumento mais forte para decidir os modos logo no início mesmo que você só vá lançar um: o custo estrutural está na nomenclatura, e a nomenclatura é barata antes de existirem componentes e cara depois.
Onde o Flash DSM entra
Todo sistema gerado produz claro e escuro juntos, ligados aos mesmos nomes semânticos, com contraste conferido nas combinações em vez de derivar um modo do outro depois.