Theming

Light and dark

The library follows the operating system by default. To control it yourself, set data-theme on any ancestor, usually <html>.

<html data-theme="dark">   {/* always dark */}
<html data-theme="light">  {/* always light */}
<html>                     {/* follow the OS */}

It also works on a subtree, so one part of a page can be dark while the rest is light:

<section data-theme="dark">…</section>

Change the tokens

Override any token in your own CSS. Because the library lives in a cascade layer, plain unlayered CSS always wins, with no specificity tricks.

:root {
  --gu-accent: #7a2e8f;      /* brand colour */
  --gu-accent-ink: #ffffff;  /* text on top of it */
  --gu-radius-sm: 0;         /* square corners everywhere */
}

Set a colour for each mode by overriding it under both selectors, since dark values live under data-theme="dark" and the OS preference:

:root,
[data-theme="light"] { --gu-accent: #7a2e8f; }

[data-theme="dark"]   { --gu-accent: #d9a3ec; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --gu-accent: #d9a3ec; }
}

Soften the shadows

The print shadow is hard and offset. Its colour comes from one token, and its offsets from four, so you can keep the idea and change the intensity.

:root {
  --gu-shadow-color: var(--gu-ink-muted);
  --gu-shadow-md: 2px 2px 0 var(--gu-shadow-color);
}

Style one component

Pass className; it is merged with the component's own. Components also expose their state as data attributes, which is the supported way to hook into variants and states from your own CSS:

.my-form .gu-button[data-variant="primary"] {
  text-transform: uppercase;
}
.gu-button[data-loading] {
  cursor: progress;
}

Class names starting with gu- are stable and safe to target. Internal CSS variables that start with --gu-button- and similar are not, use the global tokens instead.