useTheme
Read and write theme state (color, radius, font, icon set, dark mode) and export CSS variables or configuration code.
Introduction
useTheme exposes the reactive theme state and export methods. It is the underlying logic for the ThemePicker component and can be used to build custom theme panels or read/write theme values in business logic.
Return Values
const {
// Color
color, primary, primaryColors, neutral, neutralColors,
blackAsPrimary, setBlackAsPrimary,
// Radius / Font / Icon / Mode
radius, radiuses, font, fonts, icon, icons, mode, modes,
// Injection and state
style, link, hasCSSChanges, hasConfigChanges,
// Export
exportCSS, exportConfig, resetTheme
} = useTheme()
| Group | Members | Description |
|---|---|---|
| Color | color / primary / primaryColors | Primary color and available options |
| Color | neutral / neutralColors | Neutral color and available options |
| Color | blackAsPrimary / setBlackAsPrimary | Toggle for using black as the primary color |
| Radius | radius / radiuses | Current border radius and available presets |
| Font | font / fonts | Current font and available options |
| Icon | icon / icons | Current icon set and available options |
| Mode | mode / modes | Dark mode (light/dark/system) and available options |
| Injection | style / link | CSS variables and font link to inject into the page |
| State | hasCSSChanges / hasConfigChanges | Whether there are changes relative to the defaults |