/ theming

Theming

Kumiki Atelier ships a semantic CSS-variable theme system. Pick one of the four bundled presets — or override the variables to brand it yourself.

Try a preset

Four bundled themes. Toggle one below and watch this page (and every Atelier component) flip live.

Install

package install

pnpm add @kumiki/atelier

Then import the stylesheet.

static — pick one theme

// app.css
@import '@kumiki/atelier/themes/shu.css';

For runtime switching (let your users pick), use the bundled `all.css` instead:

runtime switching

// app.css — bundle every theme; flip at runtime
@import '@kumiki/atelier/themes/all.css';

Switching themes

Drive the `data-kumiki-theme` attribute on `<html>`. Independent of the `data-theme` light/dark toggle.

HTML attribute

<!-- Static: pick at render time -->
<html data-kumiki-theme="matcha">

JavaScript

// Runtime: toggle the attribute
document.documentElement.dataset.kumikiTheme = 'matcha';

Overriding variables

If none of the presets fit, override the variables directly. Root scope changes everything; nested scope changes one subtree.

custom theme.css

/* Override a single token at any scope. */
:root {
  --kumiki-color-accent: oklch(0.6 0.18 220);
}

.my-card {
  --kumiki-color-accent: oklch(0.62 0.13 145);
}

Key tokens

See `@kumiki/atelier/themes/shu.css` for the complete list.

Accent

--kumiki-color-accent: Primary accent
--kumiki-color-accent-hover: Hover
--kumiki-color-accent-active: Pressed / active
--kumiki-color-accent-soft: Soft tinted background
--kumiki-color-accent-fg: Foreground on accent

Surfaces & ink

--kumiki-color-bg: Page background
--kumiki-color-surface: Card / surface
--kumiki-color-surface-raised: Raised surface
--kumiki-color-fg: Primary text
--kumiki-color-fg-muted: Muted text
--kumiki-color-fg-quiet: Quiet text
--kumiki-color-line: Lines & borders
--kumiki-color-line-strong: Strong borders

Status

--kumiki-color-success: Success
--kumiki-color-warning: Warning
--kumiki-color-danger: Danger
--kumiki-color-info: Info

Shape & motion

--kumiki-radius-sm/md/lg: Corner radii
--kumiki-shadow-sm/md/lg: Elevation
--kumiki-dur-fast/mid/slow: Motion durations
--kumiki-ease-out: Default easing

Interaction with dark mode

`data-theme="dark"` controls light / dark; `data-kumiki-theme` controls the accent palette. The two axes are orthogonal — every combination resolves cleanly.