useTheme

Theme state singleton: read/switch color family and light/dark mode.

When to use

Building custom theme-switching UI (or just use ThemeSwitcher)
Business logic that needs the current theme (e.g. chart palettes)

Usage

import { useTheme } from '@luxeanor/ui'

const { family, mode, resolvedMode, setFamily, setMode } = useTheme()

setFamily('ink')          // switches family, writes <html data-theme>, persists
setMode('auto')           // 'light' | 'dark' | 'auto'
console.log(resolvedMode.value)  // resolved: 'light' | 'dark'

API

Return	Type	Description
family	`Readonly<Ref<'amethyst' \| 'obsidian' \| 'ink' \| 'emerald'>>`	current family
mode	`Readonly<Ref<'light' \| 'dark' \| 'auto'>>`	current setting
resolvedMode	`ComputedRef<'light' \| 'dark'>`	auto-resolved actual mode
setFamily	`(f: ThemeFamily) => void`	switch family (writes attrs + persists)
setMode	`(m: ThemeModeSetting) => void`	switch mode (writes attrs + persists)

Behavior:

Module-level singleton — all callers share one state; first call initializes
Persists to localStorage['lx-theme'] (JSON { family, mode })
auto follows system prefers-color-scheme live
Under SSR returns defaults (amethyst / light), never touches the DOM
The themeBootScript string export handles flash-free first paint, see Theming

useTheme ​

When to use ​

Usage ​

API ​

useTheme

When to use

Usage

API