Color Modes
OmniUI supports three color modes out of the box: light, dark, and high-contrast.
Setting Color Mode
Set the data-color-mode attribute on the <html> element:
<!-- Light mode (default) -->
<html>
<!-- Dark mode -->
<html data-color-mode="dark">
<!-- High contrast mode -->
<html data-color-mode="high-contrast">
JavaScript Toggle
Toggle between modes with JavaScript:
// Toggle dark mode
function toggleDarkMode() {
const html = document.documentElement;
const isDark = html.getAttribute('data-color-mode') === 'dark';
const newMode = isDark ? 'light' : 'dark';
html.setAttribute('data-color-mode', newMode);
// Persist preference
localStorage.setItem('theme', newMode);
}
// Apply saved preference on page load
const saved = localStorage.getItem('theme');
if (saved) {
document.documentElement.setAttribute('data-color-mode', saved);
}
System Preference
Respect the user's system preference:
// Check system preference
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
if (prefersDark) {
document.documentElement.setAttribute('data-color-mode', 'dark');
}
// Listen for changes
window.matchMedia('(prefers-color-scheme: dark)')
.addEventListener('change', (e) => {
const mode = e.matches ? 'dark' : 'light';
document.documentElement.setAttribute('data-color-mode', mode);
});
Semantic Color System
OmniUI uses 30 semantic color variables. Override these to create your own theme.
Surface Colors
| Variable |
Purpose |
--omni-color-background |
Page background |
--omni-color-surface |
Card and component backgrounds |
--omni-color-surface-alt |
Alternate surface (code blocks, previews) |
--omni-color-overlay |
Modal overlays and backdrops |
Text Colors
| Variable |
Purpose |
--omni-color-text |
Primary text |
--omni-color-text-muted |
Secondary/subdued text |
--omni-color-text-inverse |
Text on dark backgrounds |
Border Colors
| Variable |
Purpose |
--omni-color-border |
Default borders |
--omni-color-border-focus |
Focus ring color |
Action Colors
| Variable |
Purpose |
--omni-color-primary |
Primary actions |
--omni-color-primary-text |
Text on primary background |
--omni-color-secondary |
Secondary actions |
--omni-color-secondary-text |
Text on secondary background |
State Colors
| Variable |
Purpose |
--omni-color-success |
Success states |
--omni-color-success-text |
Text on success background |
--omni-color-warning |
Warning states |
--omni-color-warning-text |
Text on warning background |
--omni-color-danger |
Error/destructive states |
--omni-color-danger-text |
Text on danger background |
--omni-color-info |
Informational states |
--omni-color-info-text |
Text on info background |
Interactive Colors
| Variable |
Purpose |
--omni-color-link |
Link text |
--omni-color-link-hover |
Link hover state |
--omni-color-selection |
Text selection background |
Creating a Custom Theme
Override the color variables to create your own theme:
/* Your custom theme */
:root {
/* Brand colors */
--omni-color-primary: #0066cc;
--omni-color-primary-text: #ffffff;
/* Surfaces */
--omni-color-background: #f8fafc;
--omni-color-surface: #ffffff;
/* States */
--omni-color-success: #059669;
--omni-color-warning: #d97706;
--omni-color-danger: #dc2626;
}
/* Dark mode overrides */
[data-color-mode="dark"] {
--omni-color-background: #0f172a;
--omni-color-surface: #1e293b;
--omni-color-text: #f1f5f9;
--omni-color-text-muted: #94a3b8;
}
Typography
Font family, size scale, and weight tokens:
Font Families
| Variable |
Default |
--omni-font-sans |
system-ui, sans-serif |
--omni-font-mono |
ui-monospace, monospace |
Font Sizes
| Variable |
Size |
--omni-text-xs |
0.75rem (12px) |
--omni-text-sm |
0.875rem (14px) |
--omni-text-base |
1rem (16px) |
--omni-text-lg |
1.125rem (18px) |
--omni-text-xl |
1.25rem (20px) |
--omni-text-2xl |
1.5rem (24px) |
--omni-text-3xl |
1.875rem (30px) |
--omni-text-4xl |
2.25rem (36px) |
Font Weights
| Variable |
Weight |
--omni-font-normal |
400 |
--omni-font-medium |
500 |
--omni-font-semibold |
600 |
--omni-font-bold |
700 |
Spacing Scale
Consistent spacing tokens based on a 4px base unit:
| Variable |
Size |
--omni-space-1 |
0.25rem (4px) |
--omni-space-2 |
0.5rem (8px) |
--omni-space-3 |
0.75rem (12px) |
--omni-space-4 |
1rem (16px) |
--omni-space-5 |
1.25rem (20px) |
--omni-space-6 |
1.5rem (24px) |
--omni-space-8 |
2rem (32px) |
--omni-space-10 |
2.5rem (40px) |
--omni-space-12 |
3rem (48px) |
--omni-space-16 |
4rem (64px) |
Border Radius
| Variable |
Size |
--omni-radius-sm |
0.25rem (4px) |
--omni-radius-md |
0.375rem (6px) |
--omni-radius-lg |
0.5rem (8px) |
--omni-radius-xl |
0.75rem (12px) |
--omni-radius-full |
9999px (pill shape) |
Shadows
| Variable |
Use Case |
--omni-shadow-sm |
Subtle depth (cards) |
--omni-shadow-md |
Medium depth (dropdowns) |
--omni-shadow-lg |
Prominent depth (modals) |
--omni-shadow-xl |
Maximum depth (floating elements) |