Skip to content

ThemeProvider

Wrapper for managing theme state
import { ThemeProvider } from '@kalidao/reality'
name
type
default
description
defaultAccent
Accent
violet
Default accent name.
defaultMode
Mode
dark
Default mode name.
element
string | HTMLElement
:root
Element to bind theme
forcedAccent
Accent
-
Forced accent name
forcedMode
Mode
-
Forced mode name

Pass in an element selector or reference to change where the theme binds. By default, the theme attaches to the :root element.

Passing forcedAccent and forcedMode allows you to override the internal state kept by ThemeProvider.

Hook for accessing and setting theme-related properties.

import { useTheme } from '@kalidao/reality'