Skip to content
Clone
71e93e6
31 lines 1.0 KB
import { getLocale, translate } from '@app/i18n'
import type { Palette, PaletteMode } from '@app/lib'
import { createContext, useContext } from 'react'
/**
* The appearance contract every themed surface reads from: which palette is
* painted, which light/dark variant is live, and the base64 CSS payload that
* produced it.
*/
export interface ThemeContextValue {
palette: Palette
paletteId: string
/** Requested mode (the `.dark` class state). */
mode: PaletteMode
/** Variant the palette actually rendered in. */
variant: PaletteMode
/** Base64 of the injected stylesheet, as persisted locally. */
encoded: string
palettes: Palette[]
setPalette: (id: string) => void
resetPalette: () => void
setMode: (mode: PaletteMode) => void
}
export const ThemeContext = createContext<ThemeContextValue | null>(null)
export function useThemeContext(): ThemeContextValue {
const value = useContext(ThemeContext)
if (!value) throw new Error(translate(getLocale(), 'ui.themeContextMissing'))
return value
}