Theming
Solora is entirely token-driven. Override CSS variables to match your brand — no build step required.
Color Tokens
Every component references these root variables. Change them and all components update instantly.
| Variable | Default (Light) | Purpose |
|---|---|---|
--color-primary |
#0071e3 |
Brand accent, buttons, focus rings |
--color-text-dark |
#1d1d1f |
Primary text color (light mode) |
--color-text-light |
#ffffff |
Text on dark / colored surfaces |
--color-secondary |
#f5f5f7 |
Secondary buttons, subtle backgrounds |
--color-success |
#34c759 |
Positive states |
--color-warning |
#ff9f0a |
Caution states |
--color-danger |
#ff3b30 |
Destructive actions, errors |
Dark Mode
Solora's dark mode is activated by adding the class dark to the
<html> element. The initThemeToggle() helper handles
this automatically, including persisting the preference in localStorage.
import { initThemeToggle } from '@kerkhoff-ict/solora/dist/index.js';
// Attach to any button(s) with class .sol-theme-toggle
initThemeToggle('.sol-theme-toggle');
// Or manually:
document.documentElement.classList.add('dark'); // force dark
document.documentElement.classList.remove('dark'); // force light
✅ System preference
initThemeToggle automatically respects prefers-color-scheme
on first load, then stores the user's choice in localStorage.
Custom Theme Example
/* Brand: deep violet */
:root {
--color-primary: #7c3aed;
--color-focus-glow: rgba(124, 58, 237, 0.18);
}
:root.dark {
--color-primary: #a78bfa;
--color-focus-glow-dark: rgba(167, 139, 250, 0.22);
}