Theme
Scoped Silver UI theme provider backed by CSS custom properties.
Examples
Section titled “Examples”Default
Section titled “Default”Workspace settings
A scoped theme updates Silver UI tokens for every component below.
Theme preview
Alerts, buttons, inputs, badges, and toggles all resolve through semantic tokens.
Clear Project
NeutralReadyReviewBlocked
Use themed semantic tokens for interactive controls.
<Theme {...args}> <ThemePreview> <ComponentPreview /> </ThemePreview></Theme>Primary Color
Section titled “Primary Color”Workspace settings
A scoped theme updates Silver UI tokens for every component below.
Theme preview
Alerts, buttons, inputs, badges, and toggles all resolve through semantic tokens.
Clear Project
NeutralReadyReviewBlocked
Use themed semantic tokens for interactive controls.
<Theme tokens={{ colors: { primary: 'purple-500', primaryActive: 'purple-700', primaryHover: 'purple-600', primarySubtle: 'purple-100', }, }}> <ThemePreview> <ComponentPreview /> </ThemePreview></Theme>Neutral Theme
Section titled “Neutral Theme”Workspace settings
A scoped theme updates Silver UI tokens for every component below.
Theme preview
Alerts, buttons, inputs, badges, and toggles all resolve through semantic tokens.
Clear Project
NeutralReadyReviewBlocked
Use themed semantic tokens for interactive controls.
<Theme themes={neutralTheme.themes}> <ThemePreview> <ComponentPreview previewBadgeColor="neutral" /> </ThemePreview></Theme>Material Theme
Section titled “Material Theme”Workspace settings
A scoped theme updates Silver UI tokens for every component below.
Theme preview
Alerts, buttons, inputs, badges, and toggles all resolve through semantic tokens.
Clear Project
NeutralReadyReviewBlocked
Use themed semantic tokens for interactive controls.
<Theme themes={materialTheme.themes}> <ThemePreview> <ComponentPreview /> </ThemePreview></Theme>Nord Theme
Section titled “Nord Theme”Workspace settings
A scoped theme updates Silver UI tokens for every component below.
Theme preview
Alerts, buttons, inputs, badges, and toggles all resolve through semantic tokens.
Clear Project
NeutralReadyReviewBlocked
Use themed semantic tokens for interactive controls.
<Theme themes={nordTheme.themes}> <ThemePreview> <ComponentPreview /> </ThemePreview></Theme>Solarized Theme
Section titled “Solarized Theme”Workspace settings
A scoped theme updates Silver UI tokens for every component below.
Theme preview
Alerts, buttons, inputs, badges, and toggles all resolve through semantic tokens.
Clear Project
NeutralReadyReviewBlocked
Use themed semantic tokens for interactive controls.
<Theme themes={solarizedTheme.themes}> <ThemePreview> <ComponentPreview /> </ThemePreview></Theme>Scoped Silver UI theme provider backed by CSS custom properties.
| Prop | Type | Default | Description |
|---|---|---|---|
as | ElementType | 'div' | HTML element type to render. |
children | ReactNode | — | Theme content. |
data-testid | string | — | Test ID applied to the root element. |
mode | "dark" | "light" | "system" | 'system' | Theme mode. 'system' follows the OS prefers-color-scheme (rendering data-theme="system"), while 'light' / 'dark' pin the theme explicitly and always win over the OS preference. |
ref | Ref<HTMLElement> | — | Ref forwarded to the root element. |
themes | ThemeModeTokens | — | Friendly token overrides mapped to Silver CSS custom properties. |
tokens | ThemeTokens | — | Friendly token overrides applied in every mode. |