Modo escuro

O modo de cor é um atributo, independente da marca: data-theme="dark" ou data-theme="light".

<html data-theme="dark">…</html>
<aside data-theme="dark">…</aside>

Escopo e aninhamento

data-theme vale para a subárvore do elemento, inclusive dentro de uma marca aninhada; data-theme="light" volta ao claro. A demonstração soma o modo escuro a uma seção campaign-orange (terceira coluna):

const LadoALado = () => (
  <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr)', gap: 16 }}>
    <Panel label="Página" theme="light" />
    <Panel label="Seção laranja" brand="campaign-orange" />
    <Panel label="Seção laranja escura" brand="campaign-orange" theme="dark" />
  </div>
);

Como funciona: `--theme-dark`

O modo não é um bloco de overrides. --theme-dark vale 0% no claro e 100% no escuro, é herdado e vale o data-theme mais próximo. Os tokens que mudam com o modo são escritos assim:

color-mix(in srgb, <valor escuro> var(--theme-dark), <valor claro>)

Com 0% o resultado é exatamente o valor claro. Por isso um data-brand aninhado numa página escura continua escuro: ele recalcula os semânticos com o --theme-dark herdado.

Não segue o sistema operacional

O modo escuro não acompanha prefers-color-scheme sozinho. Se o hotsite quiser seguir o sistema, defina o atributo a partir de matchMedia:

const escuro = window.matchMedia('(prefers-color-scheme: dark)')
const aplicar = () => {
  document.documentElement.dataset.theme = escuro.matches ? 'dark' : 'light'
}
aplicar()
escuro.addEventListener('change', aplicar)

Contraste nos dois modos

Os componentes têm modo claro e escuro, e o contraste de cada par é medido nos dois modos.