Theming

Theme provider

Owns the theme: resolves it, applies it to `<html>`, persists it, and follows the OS.

Client component6 exportsSource

Import

import { createThemeScript, DEFAULT_STORAGE_KEY, DEFAULT_THEME_ATTRIBUTE, ThemeProvider, themeScript, useTheme } from '@the_viveksingh/vivek-ui'

Light, dark and system

Persists the choice, follows the OS when set to system, and exposes it through useTheme. Inject themeScript into the head so the first paint is already correct - otherwise dark-mode users get a white flash.

theme

system

resolvedTheme

light

This preview writes to its own storage key, so experimenting here does not fight the site theme. In an app you mount one ThemeProvider at the root and inject themeScript in the head to stop the first-paint flash.

// app/layout.tsx
import { ThemeProvider, themeScript } from '@the_viveksingh/vivek-ui'

<html suppressHydrationWarning>
  <head>
    <script dangerouslySetInnerHTML={{ __html: themeScript }} />
  </head>
  <body>
    <ThemeProvider defaultTheme="system">{children}</ThemeProvider>
  </body>
</html>

// anywhere below it
const { theme, resolvedTheme, setTheme } = useTheme()

Props

Generated from the package's own type declarations, so this table cannot drift from the code.

Props for ThemeProvider
PropTypeDefaultDescription
childrenReactNode——
defaultThemeTheme—Used when nothing is stored. Defaults to `'system'`.
storageKeystring—`localStorage` key. Defaults to `'vk-theme'`. Must match the one in `themeScript`.
attributestring—Attribute set on `<html>`. Defaults to `'data-theme'`, which is what tokens.css reads.
enableSystemboolean—Set to `false` to reject a stored `'system'` and stay on an explicit theme.

Exports

createThemeScriptDEFAULT_STORAGE_KEYDEFAULT_THEME_ATTRIBUTEThemeProviderthemeScriptuseTheme

Rendering