Theming

Theming is plain CSS custom properties. There is no preset object, no SASS build and no runtime theme engine — set the properties and every component follows on the next paint.

The token layer

:root {
  --hk-accent: #dc2626;
  --hk-accent-soft: rgb(220 38 38 / 0.16);
  --hk-surface: #0b0b0c;
  --hk-border: rgb(255 255 255 / 0.10);
  --hk-text: #f5f5f5;
  --hk-radius: 12px;
  --hk-density: 1;
  --hk-motion: 200ms;
}

Scoped overrides

Because they are inherited properties, any subtree can carry its own theme. This is how you get a differently-themed panel without a second theme file:

<section style="--hk-accent: #8b5cf6; --hk-radius: 4px">
  <!-- everything in here is violet and sharp-cornered -->
</section>

Per-component tokens

Each component documents its own tokens on its page — they all default to a global token, so you only reach for them when one component needs to differ.

hk-switch {
  --hk-switch-track: #1f2937;
  --hk-switch-ease: linear;
}

Light mode

There is no dark class to toggle. Redefine the tokens under whatever selector or media query you already use:

@media (prefers-color-scheme: light) {
  :root {
    --hk-surface: #ffffff;
    --hk-text: #111827;
    --hk-border: rgb(0 0 0 / 0.10);
  }
}