web / lib/hooks/use-theme-preset

lib/hooks/use-theme-preset

Hook for managing design theme presets at runtime.

Works independently from dark/light mode (next-themes). The preset controls the color palette while dark/light controls the brightness. Together they form a 2D matrix: preset × mode.

Type Aliases

ThemePresetId

ThemePresetId = typeof THEME_PRESETS[number]["id"]

Variables

THEME_PRESETS

const THEME_PRESETS: readonly [{ id: "cartographic"; label: "Cartographic"; description: "Earth-tone palette inspired by vintage maps"; }, { id: "modern"; label: "Modern"; description: "Clean, contemporary design with cool blue-gray tones"; }]

Available theme presets. Each maps to a CSS class .theme-{name} (except the default).

Functions

useThemePreset()

useThemePreset(): UseThemePresetReturn

Manages the active theme preset.

Persists selection to localStorage
Applies/removes CSS class on <html> element
Default preset (“cartographic”) has no class (it’s the :root default)
Other presets add .theme-{id} to <html>

Returns

UseThemePresetReturn