Theming
Light and dark themes via semantic CSS variables and ThemeProvider.
Overview
Light and dark themes ship via semantic CSS variables on [data-cx-theme="light|dark"].
useTheme() returns { theme, resolvedTheme, setTheme }. Preferences persist to localStorage (cx-ui-theme) when uncontrolled.
ThemeProvider
Wrap your application tree to enable theme switching and token resolution.
tsx
<ThemeProvider defaultTheme="system"> {children}</ThemeProvider>Controlled mode
Pass theme and onThemeChange for fully controlled behavior. Persistence is disabled in controlled mode.
tsx
<ThemeProvider theme="dark" />Overriding tokens
Override any --cx-color-* token on a host element. Do not restyle component internals with Tailwind.
The host app may still use Tailwind for layout chrome using var(--cx-color-*).