light-dark() para Dark Mode sem Duplicar CSS

Implementar dark mode em CSS costumava significar duplicar regras dentro de uma @media (prefers-color-scheme: dark) para cada cor do site. A função light-dark() resolve isso permitindo escolher a cor certa direto dentro do valor da propriedade.

O jeito antigo

body {
    background: #FFFFFF;
    color: #111111;
}

@media (prefers-color-scheme: dark) {
    body {
        background: #111111;
        color: #FFFFFF;
    }
}

Funciona, mas cada cor do projeto precisa de uma regra duplicada dentro da media query.

Como funciona o light-dark()

Primeiro, é preciso avisar o navegador que o elemento suporta os dois temas usando a propriedade color-scheme:

:root {
    color-scheme: light dark;
}

Depois, basta usar light-dark(corClara, corEscura) em qualquer propriedade que aceite cor:

body {
    background: light-dark(#FFFFFF, #111111);
    color: light-dark(#111111, #FFFFFF);
}

O navegador escolhe automaticamente o primeiro ou o segundo valor, de acordo com a preferência do sistema do usuário (ou com o que for definido em color-scheme).

Forçando um tema específico

Também é possível sobrescrever a preferência do sistema, definindo o color-scheme apenas para uma parte da página ou de um componente:

.forcar-claro {
    color-scheme: light;
}

Vantagens

• Elimina a duplicação de regras dentro de @media (prefers-color-scheme: dark).
• Mantém as duas cores próximas uma da outra, facilitando a manutenção.
• Funciona em qualquer propriedade que aceite cor: background, border, box-shadow, etc.
• Pode ser combinado com variáveis CSS para trocar temas inteiros com poucas linhas.

Combinando com variáveis CSS

:root {
    color-scheme: light dark;
    --cor-fundo: light-dark(#FFFFFF, #111111);
    --cor-texto: light-dark(#111111, #FFFFFF);
}

body {
    background: var(--cor-fundo);
    color: var(--cor-texto);
}

Compatibilidade

O suporte já é bom nos navegadores modernos, mas vale sempre conferir antes de usar em produção, principalmente se o projeto precisar suportar navegadores mais antigos.

caniuse

Conclusão

O light-dark() simplifica bastante a implementação de dark mode, deixando o CSS mais enxuto e mais fácil de manter, sem abrir mão da flexibilidade de sobrescrever o tema quando necessário.