Theming

useColorMode

Manage theme state and toggle between light and dark modes with persistence.

import { useColorMode } from "saha-ui"

Manage color mode (light, dark, system) persisted to local storage with automatic DOM class toggling.

Name	Type	Description	Default
defaultMode	'light' \| 'dark' \| 'system'	Initial color mode.	'system'
storageKey	string	localStorage key used to persist mode.	'color-mode'
classNameDark	string	Class name applied on document.documentElement when dark.	-
classNameLight	string	Class name applied on document.documentElement when light.	-

Name	Description
colorMode	Current raw mode: 'light' \| 'dark' \| 'system'.
isDark / isLight	Booleans for resolved mode.
setColorMode(mode)	Set the color mode explicitly.
toggleColorMode()	Toggle between light and dark modes.

const { colorMode, toggleColorMode } = useColorMode();
toggleColorMode();

Resolves 'system' mode using prefers-color-scheme and writes preference to localStorage.