ThemeProvider

Holds the theme mode, stores the choice and sets data-theme on the page. Put one at the root of an app; useTheme reads and changes the mode from any component below it. scoped themes a single panel, as here.

ThemeProvider

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

Light theme, ThemeProvider

Chosen: Same as system. On screen: Light.

Dark theme, ThemeProvider

Chosen: Same as system. On screen: Light.

High contrast theme, ThemeProvider

Chosen: Same as system. On screen: Light.

UsageLink to the section Usage

tsx

import { ThemeProvider } from '@skribly/ui/theme'

tsx

<ThemeProvider>
  <App />
</ThemeProvider>

function Status() {
  const { mode, resolvedTheme, setMode } = useTheme()
  return <button onClick={() => setMode('dark')}>{resolvedTheme}</button>
}

Every label is a prop, so the app passes its own words in its own language. See no built-in text.

AccessibilityLink to the section Accessibility

Same as system follows the device, including a request for more contrast.
The theme change animates from the pressed button only when motion is allowed.
Contrast of every text and control pairing is tested in all three themes.

This demo runs through axe in all three themes on every test run. See what the tests check.