Theming

How it works

ColorSnap UI themes are powered by CSS custom properties. Each built-in theme sets a consistent set of tokens on the document root. Components read these tokens at runtime, so switching themes updates every component instantly.

CSS Tokens

Token	Default	Description
`--cs-bg`	`#ffffff`	Page background
`--cs-bg-subtle`	`#f9f9f9`	Subtle background
`--cs-fg`	`#0a0a0a`	Primary text
`--cs-fg-muted`	`#6b7280`	Muted text
`--cs-border`	`#e5e7eb`	Border color
`--cs-primary`	`#2563eb`	Primary accent
`--cs-primary-fg`	`#ffffff`	Text on primary
`--cs-danger`	`#dc2626`	Danger/error
`--cs-success`	`#16a34a`	Success
`--cs-warning`	`#d97706`	Warning
`--cs-radius`	`5px`	Border radius

Themes

Light
Dark
Midnight
Ocean
Forest
Rose
Mono

Theme Switcher

setTheme()

window.ColorSnap.setTheme('ocean');

initTheme()

window.ColorSnap.initTheme();

Call initTheme() on page load to restore the user's saved theme from localStorage.

Custom Themes

Override tokens on :root after loading ColorSnap to create a custom theme:

:root {
  --cs-primary: #7c3aed;
  --cs-bg: #fafafa;
  --cs-fg: #111111;
}

Custom overrides work with both npm and CDN usage.