import type { JSX } from "react"; import type { Appearance } from "#appearance"; /** * Props for {@link AppearanceScript}. * * @since 0.5.0-canary.2 */ export type AppearanceScriptProps = { /** * Fallback preference when the storage entry is absent or unrecognised. * Defaults to {@link DEFAULT_APPEARANCE}. */ readonly appearance?: Appearance | undefined; /** * CSP nonce applied to the inline script element. */ readonly nonce?: string | undefined; /** * `localStorage` key the script reads before first paint — a recognised value (`"light"`, * `"dark"`, or `"automatic"`) wins over `appearance`. * Defaults to {@link STORAGE_KEY}; pair with `` using the **same key**. */ readonly storageKey?: string | undefined; }; /** * Inline script that prevents Flash of Unstyled Content (FOUC). * * **Why this is needed:** * React hydration occurs after the browser has already painted the page. * Without this script, users would briefly see the wrong appearance before * React takes over and applies the correct one. * * **How it works:** * This script runs synchronously in the `` before first paint: * 1. Reads the stored preference from `localStorage`, falling back to `appearance` * 2. Resolves 'automatic' to 'light' or 'dark' using `matchMedia()` * 3. Removes prior `light` / `dark` / `automatic` classes on `` (SSR may * have applied the wrong resolved class for `automatic`, e.g. default `dark`) * 4. Adds the resolved color scheme class and sets `color-scheme` for native controls * 5. Writes the *preference* to `data-appearance` so preference-aware UI (e.g. a 3-state toggle) * can render the right state from CSS on first paint, without a hydration flash * * @example * ```tsx * // In __root.tsx (TanStack Start) * * * * ``` * * @since 0.5.0-canary.2 */ export declare function AppearanceScript({ nonce, storageKey, appearance, }: AppearanceScriptProps): JSX.Element;