ThemeProvider

Delivers a Sterling Theme to the React component tree. Sets React context so useTheme() returns the active theme.

For pipeline $token resolution and automatic fg/bg, use Box theme={…} instead — it handles fg, bg, and $tokens automatically.

Import

import { ThemeProvider } from "silvery"

Props

Prop	Type	Default	Description
theme	Theme	required	Theme object to provide
children	ReactNode	required	Child components

Usage

import { ThemeProvider, Box, Text } from "silvery"
import { sterling, catppuccinMocha } from "silvery/theme"

const theme = sterling.deriveFromScheme(catppuccinMocha)

// Root app -- ThemeProvider for useTheme()
<ThemeProvider theme={theme}>
  <App />
</ThemeProvider>

// Themed subtree -- Box theme handles fg, bg, and $tokens automatically
<Box theme={lightTheme} borderStyle="single">
  <Text color="$fg-accent">Uses light theme</Text>
</Box>

Related

import { useTheme, defaultDarkTheme, defaultLightTheme, detectTheme } from "silvery"

const theme = useTheme() // Access current theme in components

See Also

• Sterling primer — silvery's design system
• Theming guide — switching schemes, custom themes
• Theming reference — $token shorthand, special values
• Box — layout container with theme prop