ThemeProvider

ThemeProvider stores the active theme and writes the matching data-theme attribute on the document element by default.

Props

Prop	Type	Default	Description
`defaultTheme`	`ThemeId`	`'windows-98'`	Initial theme.
`storageKey`	`string \| null`	`'murasaki-theme'`	Local storage key. Use `null` to disable persistence.
`attributeTarget`	`HTMLElement \| null`	`document.documentElement`	Optional element that receives `data-theme` instead of `<html>`.
`children`	`ReactNode`	required	The app subtree.

Examples

Theme switcher

Active theme:windows-98

import { Button, FieldPanel, themeIds, themeLabels, ThemeProvider, useTheme } from '@murasaki/react98'
import { useState } from 'react'
 
function ThemeControls(): React.ReactElement {
  const { themeId, setTheme } = useTheme()
 
  return (
    <div className="flex flex-col gap-2 p-2">
      <div>
        Active theme:
        {themeId}
      </div>
      <div className="flex flex-wrap gap-2">
        {themeIds.map(id => (
          <Button key={id} onClick={() => setTheme(id)}>
            {themeLabels[id]}
          </Button>
        ))}
      </div>
    </div>
  )
}
 
export function ThemeProviderBasicDemo(): React.ReactElement {
  const [themeRoot, setThemeRoot] = useState<HTMLDivElement | null>(null)
 
  return (
    <div ref={setThemeRoot} className="w-80">
      <ThemeProvider defaultTheme="windows-98" storageKey={null} attributeTarget={themeRoot}>
        <FieldPanel>
          <ThemeControls />
        </FieldPanel>
      </ThemeProvider>
    </div>
  )
}

ARIA

ThemeProvider has no own UI. Ensure color contrast remains acceptable for custom theme variables.

Keyboard

ThemeProvider has no UI and no keyboard behavior.

SSR

For SSR apps, pass a request-aware defaultTheme when possible. Use storageKey={null} for isolated previews and examples.