State & Context·loomora → useTheme
useTheme
Provides reactive access to current theme mode, allows toggling between light, dark, and system preferences, and synchronizes the document data-theme attribute and localStorage persistence.
Interactive live playground
Interact with the hook state and inspect computed return values in real time.
Theme Preview
LIGHT Mode
Synchronized reactively with <html data-theme="LIGHT"> and local storage.
Theme Controls
Current ThemeLIGHT
Light Modeactive
Dark ModeDARK
System DetectionSYSTEM
Dynamic ModeDYNAMIC
How to call
Import directly from the Loomora root package in any React client component.
import { useTheme } from 'loomora'
export function ThemeSwitcher() {
const { theme, setTheme, isDark } = useTheme()
return (
<button onClick={() => setTheme(isDark ? 'light' : 'dark')}>
Current: {theme} ({isDark ? 'Dark Mode' : 'Light Mode'})
</button>
)
}Return values & methods
API signatures and utilities returned by this hook.
| Method / Prop | Type | Description |
|---|---|---|
| theme | 'light' | 'dark' | 'system' | The current active theme mode setting. |
| setTheme | (mode: 'light' | 'dark' | 'system') => void | Updates the active theme mode and persists it. |
| isDark | boolean | True if dark theme is active (including system dark preference). |