Fundamentos

Tema

Claro e escuro de primeira classe. O tema vale para a página inteira ou para um trecho dela.

Quando usar

data-theme="dark" no herói e na faixa de chamada das landings

Quando não usar

tema por elemento para "destacar" conteúdo

Tema por elemento

claro

Trecho no tema da página.

Trecho escuro

Os mesmos tokens, outros valores: link em céu.

escuro

Trecho no tema da página.

Trecho escuro

Os mesmos tokens, outros valores: link em céu.

html

<div class="hx-card">
  <p>Trecho no tema da página.</p>
  <div data-theme="dark" class="site-pad">
    <p class="hx-title-card site-title-sample">Trecho escuro</p>
    <p>Os mesmos tokens, outros valores: <a href="#">link</a> em céu.</p>
  </div>
</div>

Regras

sem data-theme no <html>, vale prefers-color-scheme;
"Aparência" grava o atributo no <html>;
quem recebe data-theme declara color e background a partir dos tokens — a biblioteca já faz isso para qualquer elemento com o atributo.

Origem: cap. 03 §3.7–§3.8 · ADR-0022 · desde a versão 0.1.0