Theme and accents

Change it here

These buttons change the whole documentation, the way your site would change. The choice is saved in this browser.

<article class="u-card">
  <div class="u-panel">
    <div class="u-head">
      <div>
        <div class="u-label">Deliveries this week</div>
        <div class="u-big">128 <small>orders</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": "Priority",
      "left": "Low",
      "right": "High"
    }'></div>
  </div>
  <div class="u-card__foot">
    <button type="button" class="u-btn u-btn--accent">Save</button>
    <button type="button" class="u-btn u-btn--ghost">Cancel</button>
  </div>
</article>

Two attributes on the html tag

data-theme="dark" turns on dark mode. data-accent picks the accent: yellow, blue, green, gold or slate. Without them, you get light with yellow.

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

The accent shows up in accent buttons, highlights and the first series color of the charts. So no series repeats a color, the series that had the accent color turns yellow. The primary action is ink and doesn't change with the accent.

The attributes work on any element, not just html: a card with data-theme="dark" turns dark on its own. That's how the preview in these docs switches theme without touching the page.

No flash on load

Apply the saved theme before the first frame, in a synchronous script in the head, before the CSS. This is the one the site uses. In its own file, it passes a CSP with 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">

Your theme

Override the tokens in your CSS, after unslop.css. Components read everything through var(--*) and follow along. The full list is in Tokens.

:root {
  --accent: #E8590C;
  --accent-text: #A33F00;   "k-com">/* accent as text must pass 4.5:1 */
  --r-card: 20px;
  --r-panel: 8px;           "k-com">/* shell = inner + 12 of padding */
}