Tema e acentos

Troque aqui

Estes botões mudam a documentação inteira, como o seu site mudaria. A escolha fica salva neste navegador.

<article class="u-card">
  <div class="u-panel">
    <div class="u-head">
      <div>
        <div class="u-label">Entregas da semana</div>
        <div class="u-big">128 <small>pedidos</small></div>
      </div>
      <span class="u-badge u-badge--delta">+12%</span>
    </div>
    <div data-u="slider" data-u-props='{
      "min": 0,
      "max": 4,
      "value": 3,
      "label": "Prioridade",
      "left": "Baixa",
      "right": "Alta"
    }'></div>
  </div>
  <div class="u-card__foot">
    <button type="button" class="u-btn u-btn--accent">Salvar</button>
    <button type="button" class="u-btn u-btn--ghost">Cancelar</button>
  </div>
</article>

Dois atributos no html

data-theme="dark" liga o escuro. data-accent escolhe o acento: yellow, blue, green, gold ou slate. Sem eles, vale o claro com amarelo.

<html lang="pt-BR" data-theme="dark" data-accent="blue">
  

O acento entra em botão de acento, destaque e na primeira cor de série dos gráficos. Pra nenhuma série repetir cor, a série que tinha a cor do acento passa a ser amarela. A ação primária é tinta e não muda com o acento.

Os atributos funcionam em qualquer elemento, não só no html: um card com data-theme="dark" vira escuro sozinho. É assim que o preview desta documentação troca de tema sem mexer na página.

Sem piscar no carregamento

Aplique o tema salvo antes do primeiro quadro, num script síncrono no head e antes do CSS. Este é o que o site usa. Em arquivo próprio, ele passa por uma CSP com script-src 'self'.

(function (h) {
  var t = null, a = null;
  try { t = localStorage.getItem("u-theme"); a = localStorage.getItem("u-accent"); } catch (e) {}
  if (t === "dark" || (t !== "light" && matchMedia("(prefers-color-scheme: dark)").matches)) h.setAttribute("data-theme", "dark");
  if (a && /^(yellow|blue|green|gold|slate)$/.test(a)) h.setAttribute("data-accent", a);
})(document.documentElement);
  

<script src="/boot.js"></script>
<link rel="stylesheet" href="/unslop.css">
  

O seu tema

Sobrescreva os tokens no seu CSS, depois do unslop.css. Os componentes leem tudo por var(--*) e acompanham. A lista completa está em Tokens.

:root {
  --accent: #E8590C;
  --accent-text: #A33F00;   "k-com">/* o acento como texto precisa passar 4,5:1 */
  --r-card: 20px;
  --r-panel: 8px;           "k-com">/* casca = miolo + 12 de recuo */
}