Reference
Props and hook API for the Theme component.
useTheme()
Returns the current theme state and setters. Must be used within a <Theme> provider.
| Property | Type | Description |
|---|---|---|
| seed | string | Current seed color (hex) |
| variant | Variant | Current variant enum |
| colorMode | 'system' | 'light' | 'dark' | Current color mode setting |
| resolvedDark | boolean | Whether dark mode is active |
| theme | GeneratedTheme | Generated theme with light/dark tokens |
| setSeed | (s: string | HTMLImageElement) => void | Change seed color or extract from image |
| setVariant | (v: Variant) => void | Change variant |
| setColorMode | (m: ColorMode) => void | Set color mode directly |
| cycleColorMode | () => void | Cycle system → light → dark |
Root <Theme> props
Used when <Theme> is the outermost provider (no parent Theme in the tree).
| Prop | Type | Default |
|---|---|---|
| seed | string | HTMLImageElement | #6750A4 |
| variant | Variant | TONAL_SPOT |
| contrast | number | 0 |
| colorMode | 'system' | 'light' | 'dark' | system |
| storageKey | string | null | material-shadcn-theme |
Nested <Theme> props
When <Theme> is rendered inside another Theme, it creates a scoped <div> with its own CSS variables.
| Prop | Type | Default |
|---|---|---|
| seed | string | HTMLImageElement | required |
| variant | Variant | inherits parent |
| contrast | number | 0 |
| dark | boolean | inherits parent |
| ...divProps | HTMLDivElement props | — |
Variant enum
Imported from material-shadcn. Controls how Material 3 derives the palette from the seed color.
| Value | Description |
|---|---|
| TONAL_SPOT | Balanced, default Material 3 style |
| EXPRESSIVE | Vibrant, high-chroma palette |
| FIDELITY | Stays true to the seed color |
| VIBRANT | Bold, saturated tones |
| NEUTRAL | Subtle, desaturated palette |
| MONOCHROME | Grayscale only |
| CONTENT | Adaptive to content colors |
| RAINBOW | Colorful, multi-hue spread |
| FRUIT_SALAD | Playful, varied hues |