Utility provider that gives everything below it a light, dark, or system color mode.
import { Theme } from "@/fragments/ui";Source<ThemeProvider defaultMode="system">
<div
style={{
padding: '16px',
borderRadius: '8px',
background: 'var(--fui-bg-elevated)',npx @usefragments/cli add themeWrites src/fragments/ui/components/Theme plus what it imports, the globals stylesheet, and .fragments/registry-lock.json, then prints the packages to add. No account, no key.
Your own registry: publish from Fragments Cloud and add --registry org/name. Connect a workspace.
Theme is a compound: import the root and reach its parts through dot notation.
Theme.ProviderTheme.ToggleTheme.ButtonTheme.useThemeThe toggle cycles light, dark, then back to system.
<ThemeProvider defaultMode="light">
<div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
<ThemeToggle />
<span>Click to cycle themes</span>
</div>
</ThemeProvider>Three sizes so the control fits whatever bar holds it.
<ThemeProvider defaultMode="light">
<div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
<ThemeToggle size="sm" />
<ThemeToggle size="md" />
<ThemeToggle size="lg" />
</div>A single icon button for toolbars with no room to spare.
<ThemeProvider defaultMode="system">
<ThemeButton aria-label="Switch color mode" />
</ThemeProvider>Prop | Type | Default | Description |
|---|---|---|---|
childrenRequired | node | Not set | Application content |
defaultMode | enumlightdarksystem | system | Default theme mode for uncontrolled usage |
defaultTheme | enumlightdarksystem | Not set | — |
mode | enumlightdarksystem | Not set | Controlled theme mode |
onModeChange | function | Not set | Callback when mode changes |
storageKey | string | fui-theme | localStorage key for persistence |
attribute | enumdata-themeclass | data-theme | How to apply theme to DOM |
componentDefaults | object | Not set | Default primitive component behavior for the subtree. |