Guide
Theming
Weini UI combines a blue action color, quiet neutral surfaces, compact geometry, and restrained depth. Components consume the same semantic variables in every product.
For control sizes, spacing, and interaction patterns, explore design foundations.
Core palette
Compare the same semantic tokens in both color modes. These previews stay visible when you switch the site theme.
Light mode
Primary action
--primaryActive surface
--accentCard
--cardSecondary
--secondaryMuted
--mutedSuccess
--successWarning
--warningDestructive
--destructiveDark mode
Primary action
--primaryActive surface
--accentCard
--cardSecondary
--secondaryMuted
--mutedSuccess
--successWarning
--warningDestructive
--destructiveOverride the system
app.css
:root {
--primary: oklch(0.54 0.18 150);
--primary-foreground: oklch(1 0 0);
--primary-hover: oklch(0.5 0.18 150);
--accent: oklch(0.95 0.04 150);
--accent-foreground: oklch(0.35 0.1 150);
--radius: 0.5rem;
}
.dark {
--primary: oklch(0.7 0.14 150);
--primary-foreground: oklch(0.15 0.02 150);
--primary-hover: oklch(0.75 0.13 150);
}Set complete CSS colors such as oklch(...). Add .dark to the document or a subtree for dark mode. Foreground pairs should change with their surfaces.
Common tokens
| Token | Controls |
|---|---|
--background / --foreground | Page canvas and text |
--primary / --primary-foreground / --primary-hover | Main actions and contrast-safe hover states |
--card / --popover | Surfaces |
--border / --ring | Surface edges, control boundaries, rules, and focus |
--radius | Compact corner scale |
--type-sans / --type-display | Interface and display typography |
--motion-duration | Short transitions |