Theme

The theme system persists a base theme (light / dark / system) plus an optional liquid flag, resolves the active theme, and reflects it on html[data-theme] — the attribute the kit's tokens key off.

Live toggles drive html[data-theme] for the whole page, so this page documents them with code rather than an embedded demo (which would fight the docs site's own theme switch).

Setup

Wrap your app once in ThemeProvider, and import the kit's stylesheet at the root so the tokens are present:

import { ThemeProvider } from '@dreamlake/uikit'
import '@dreamlake/uikit/styles.css'

export function App() {
  return (
    <ThemeProvider defaultBaseTheme="system">
      {/* …app… */}
    </ThemeProvider>
  )
}

Toggles

ThemeColorToggle cycles light → dark → system; LiquidToggle flips the liquid flag. Both must be inside a ThemeProvider.

import { ThemeColorToggle, LiquidToggle } from '@dreamlake/uikit'

<header>
  <ThemeColorToggle />
  <LiquidToggle />
</header>

useTheme

Read or drive the theme from anywhere under the provider:

import { useTheme } from '@dreamlake/uikit'

function Example() {
  const { baseTheme, setBaseTheme, isLiquid, toggleLiquid, computedTheme } = useTheme()
  return <button onClick={() => setBaseTheme('dark')}>Now: {computedTheme}</button>
}

ThemeProvider props