Farbmodi 1.2.0

Light / dark via data-velin-theme and prefers-color-scheme, plus 13 optional brand themes under dist/themes/. English version.

Reifegrad: In VelinStyle 1.2.0 als stabil dokumentiert. Studio and the complete Utility Engine remain planned — shipping utilities are hand-authored under @layer utilities, not a full variant generator.

Wann verwenden

Persist light/dark with <velin-theme-toggle> or your own data-velin-theme toggle.
Load one of the 13 theme CSS files for a branded palette without forking the core bundle.
Keep semantic roles (--velin-color-primary, surfaces, on-* text) so components stay accessible.

Wann nicht

Do not invent theme slug attributes without a matching CSS file.
Do not hard-code light-only hex for text on themed surfaces — use color tokens.

So funktioniert es

data-velin-theme="light" — force light
data-velin-theme="dark" — force dark token set
Omit / follow OS — @media (prefers-color-scheme: dark) applies when not forced light

Core color tokens live in src/tokens/color.css as --velin-color-*. Theme files override the same names under [data-velin-theme="…"] or their root selectors.

Dreizehn integrierte Themes

Ship as minified CSS next to the core bundle. Point <velin-theme-toggle themes-base="…"> at the folder.

Slug	File
`brutalist`	`dist/themes/brutalist.min.css`
`corporate`	`dist/themes/corporate.min.css`
`earth`	`dist/themes/earth.min.css`
`forest`	`dist/themes/forest.min.css`
`midnight`	`dist/themes/midnight.min.css`
`neon`	`dist/themes/neon.min.css`
`nordic`	`dist/themes/nordic.min.css`
`ocean`	`dist/themes/ocean.min.css`
`pastel`	`dist/themes/pastel.min.css`
`retro`	`dist/themes/retro.min.css`
`sharp`	`dist/themes/sharp.min.css`
`soft`	`dist/themes/soft.min.css`
`sunset`	`dist/themes/sunset.min.css`

`<velin-theme-toggle>`

Toggles data-velin-theme on a target (default <html>), persists under localStorage key velin-theme, and can list theme CSS from themes-base.

<html data-velin-themes-base="/dist/themes">
  <velin-theme-toggle themes-base="/dist/themes/"></velin-theme-toggle>
  <velin-theme-toggle themes-base="/dist/themes/" compact></velin-theme-toggle>
</html>

Attribute	Default	Notes
`themes-base`	`dist/themes`	Base URL for `{slug}.min.css`
`target`	`html`	Selector receiving `data-velin-theme`
`compact`	—	Light/dark only; hides theme picker

Event: velin-theme-change with detail.theme. API: velin-theme-toggle.md.

Manueller Toggle

const html = document.documentElement;
const next = html.getAttribute('data-velin-theme') === 'dark' ? 'light' : 'dark';
html.setAttribute('data-velin-theme', next);
localStorage.setItem('velin-theme', next);

Dark-Mode-Tokens (Auszug)

Real names from color.css — do not invent --velin-body-bg aliases in new code:

[data-velin-theme="dark"] {
  --velin-color-surface: oklch(15% 0.01 250);
  --velin-color-text: oklch(92% 0.005 250);
  --velin-color-text-muted: oklch(88% 0.005 250);
  --velin-color-border: oklch(30% 0.01 250);
  --velin-color-primary: oklch(48% 0.12 250);
  --velin-color-on-primary: oklch(98% 0 0);
}

Eigene Themes

Override the same --velin-color-* (and radius/shadow/font) tokens under your own slug, then set data-velin-theme:

[data-velin-theme="brand"] {
  --velin-color-primary: oklch(42% 0.16 250);
  --velin-color-surface: oklch(98% 0.005 250);
  --velin-color-text: oklch(12% 0.01 250);
}