Theme
Diwa ships two themes — Dark (default) and Light. Semantic tokens automatically resolve to the correct value for the active theme. Switching is done by toggling data-theme="light" on any ancestor element.
Example
Theme Dark
Background
Contrast
Notification
State
Theme Light
Background
Contrast
Notification
State
Accent Scale(theme-invariant)
Usage
Dark is the primary V3 design expression. Use Light only where context demands it — for example, in print-oriented views, high-ambient-light environments, or sub-sections embedded in external light-themed surfaces.
Do
- ✓Choose Dark as the first choice for Diwa interfaces — it reduces visual fatigue in long sessions.
- ✓Use accessibility-safe semantic tokens: contrast-high for primary text, contrast-medium for secondary, contrast-low only for decorative dividers.
- ✓Play with bg-base / bg-surface layers to create hierarchy — surface sits one step above base.
- ✓Scope light theme to a subtree with data-theme="light" on a container element when mixing is intentional.
Don't
- ✕Don't use contrast-low for text or critical information — it fails WCAG AA contrast.
- ✕Don't mix tokens from different themes (e.g. using a dark color value in a light context).
- ✕Don't add new raw color values to components. Always reference a semantic token.
- ✕Don't override semantic tokens with primitives in ad-hoc inline styles.
Theme switching: Toggle by setting data-theme="light" on <html>. Removing the attribute returns to Dark. Themes can be scoped to any subtree.
// Switch to Light
document.documentElement.setAttribute('data-theme', 'light');
// Return to Dark (default)
document.documentElement.removeAttribute('data-theme');
// Scope to a subtree
<section data-theme="light">…</section>Styles
Import JS tokens for CSS-in-JS frameworks. Hover any tile above to see its full token name. Use CSS custom properties directly in stylesheets — they resolve automatically for the active theme.
import { getFocusStyle, space4 } from '@diwacopilot/components/styles';
const cardStyle = {
padding: space4,
background: 'var(--diwa-bg-surface)',
color: 'var(--diwa-text-primary)',
border: '1px solid var(--diwa-border)',
...getFocusStyle(),
};
/* CSS remains token-first and theme-aware */
.card {
background: var(--diwa-bg-surface);
color: var(--diwa-text-primary);
border: 1px solid var(--diwa-border);
}/* Use semantic tokens directly in component styles */
.card {
background: var(--diwa-bg-surface);
border: 1px solid var(--diwa-border);
color: var(--diwa-text-primary);
}
.badge-accent {
background: var(--diwa-color-accent-100);
color: var(--diwa-color-accent-400);
}