Foundations
Theme Override
Swaps theme colors for personal picks inside the wrapped subtree. Override only some tokens, or only one scheme such as dark mode. Pairs that fall below the 7:1 AAA contrast floor are flagged during development. To re-color the whole app, pass the same overrides to ThemeProvider.
ReactVueWeb Components
View in Storybook Playground
Examples
<ThemeOverride
colors={{ primary: '#115e59', 'primary-hover': '#134e4a', 'on-primary': '#ffffff' }}
dark={{ 'bg-canvas': '#101418' }}
>
<Button status="primary">保存する</Button>
</ThemeOverride>Props
| Name | Type | Default | Description |
|---|---|---|---|
colors | ThemeColorOverrides | — | Token overrides applied in both color schemes. |
light | ThemeColorOverrides | — | Token overrides applied only while the light scheme is active. |
dark | ThemeColorOverrides | — | Token overrides applied only while the dark scheme is active. |
children | ReactNode | — |
Accessibility
- Body/background contrast is ≥ 7:1 (AAA) in both light and dark.
- Every interaction works with the keyboard alone.
- The focus ring is always visible.
- Respects prefers-reduced-motion and stops excessive motion.
Every component is designed to meet WCAG 2.1 AAA.