/** * Theme type definitions for rsc-router theme system. * * The theme system provides: * - Opt-in via router config * - FOUC prevention via inline script * - Server-side theme access via ctx.theme/ctx.setTheme * - Client-side theme access via useTheme hook */ /** * Theme value - stored in cookies/localStorage */ export type Theme = "light" | "dark" | "system"; /** * Resolved theme - actual visual appearance (system preference resolved) */ export type ResolvedTheme = "light" | "dark"; /** * Attribute used to apply theme to HTML element * - "class": Adds theme value as CSS class (e.g., ) * - "data-*": Sets data attribute (e.g., ) */ export type ThemeAttribute = "class" | `data-${string}`; /** * Theme configuration for router * * @example * ```typescript * const router = createRouter({ * theme: { * defaultTheme: "system", * themes: ["light", "dark"], * attribute: "class", * storageKey: "theme", * } * }); * ``` */ export interface ThemeConfig { /** * Default theme when no preference is stored * @default "system" */ defaultTheme?: Theme; /** * Available theme options * @default ["light", "dark"] */ themes?: string[]; /** * Attribute to apply to HTML element * @default "class" */ attribute?: ThemeAttribute; /** * Key for cookie and localStorage * @default "theme" */ storageKey?: string; /** * Enable system preference detection * When true, "system" theme will resolve based on prefers-color-scheme * @default true */ enableSystem?: boolean; /** * Set CSS color-scheme property on HTML element * This enables native dark mode for form controls, scrollbars, etc. * @default true */ enableColorScheme?: boolean; /** * Custom mapping of theme names to attribute values * Useful when theme names don't match desired attribute values * * @example * ```typescript * value: { * light: "light-mode", * dark: "dark-mode", * } * ``` */ value?: Record; } /** * Resolved theme configuration with defaults applied */ export interface ResolvedThemeConfig { defaultTheme: Theme; themes: string[]; attribute: ThemeAttribute; storageKey: string; enableSystem: boolean; enableColorScheme: boolean; value: Record; } /** * Return type from useTheme hook * * @example * ```tsx * function ThemeToggle() { * const { theme, setTheme, resolvedTheme, themes } = useTheme(); * * return ( * * ); * } * ``` */ export interface UseThemeReturn { /** * Current theme setting ("light" | "dark" | "system") */ theme: Theme; /** * Set the theme */ setTheme: (theme: Theme) => void; /** * Resolved theme based on system preference * When theme is "system", this reflects the actual appearance */ resolvedTheme: ResolvedTheme; /** * Current system preference ("light" | "dark") */ systemTheme: ResolvedTheme; /** * Available theme options (includes "system" if enableSystem is true) */ themes: string[]; } /** * Props for ThemeProvider component */ export interface ThemeProviderProps { /** * Theme configuration */ config: ResolvedThemeConfig; /** * Initial theme from server (from cookie) */ initialTheme?: Theme; /** * Children to render */ children: React.ReactNode; } /** * Context value for ThemeContext */ export interface ThemeContextValue extends UseThemeReturn { /** * Full theme configuration */ config: ResolvedThemeConfig; } //# sourceMappingURL=types.d.ts.map