Theming
Built-in themes
Set data-theme on the root element (<html> or any container) to switch between three built-in themes:
data-theme | Description |
|---|---|
light (default) | Light |
dark | Dark |
high-contrast | High contrast (WCAG AAA friendly, stronger borders/text contrast) |
html
<html data-theme="dark">
…
</html>js
document.documentElement.dataset.theme = 'high-contrast'Custom themes (CSS variable overrides)
All components only reference semantic tokens (see docs/ui-spec.md §1), so you can customize brand colors by overriding CSS variables without touching component code:
css
:root {
/* Brand colors */
--oas-color-primary: #7c3aed;
--oas-color-primary-hover: #8b5cf6;
--oas-color-primary-active: #6d28d9;
/* Text */
--oas-color-text-primary: #18181b;
--oas-color-text-secondary: #71717a;
/* Sizing */
--oas-radius-md: 8px;
--oas-control-height-md: 36px;
}Token overview
| Group | Variables |
|---|---|
| Brand | --oas-color-primary(-hover/-active)、--oas-color-success、--oas-color-warning、--oas-color-danger |
| Text | --oas-color-text-primary/-secondary/-disabled |
| Border/bg | --oas-color-border、--oas-color-bg(-hover/-disabled)、--oas-color-overlay |
| Font size | --oas-font-size-xs/sm/md/lg/xl |
| Spacing | --oas-space-1…6 |
| Radius | --oas-radius-sm/md/lg |
| Controls | --oas-control-height-sm/md/lg |
| Motion | --oas-transition-fast/base、--oas-ease-out/in-out |
| Z-index | --oas-z-dropdown/sticky/fixed/overlay/modal/message/toast/tooltip |
| Focus ring | --oas-focus-ring |
Reduced motion
The library ships prefers-reduced-motion support: when the system has "reduce motion" enabled, all transitions/animations are shortened automatically.