/** The themes `'system'` picks between, by the operating system's light or dark setting. */
export interface SystemThemes {
    light: string;
    dark: string;
}
/** How `setCurrentThemeId` makes the change. */
export interface SetThemeOptions {
    /**
     * Grows the new theme out of this element, usually the control that chose it, as a rippling
     * blob across the page. Only where the browser has view transitions and the user has not asked for
     * reduced motion; elsewhere the theme just changes.
     */
    revealFrom?: Element | null;
}
export interface UseThemeResult {
    /** The theme to apply, for `currentThemeId`. Never `'system'`: that is resolved to a theme. */
    currentThemeId: string;
    /** What was chosen, `'system'` included, for marking the active choice in a theme switcher. */
    selectedThemeId: string;
    /** Chooses a theme by its `id`, or `'system'`, and remembers it for the next visit. */
    setCurrentThemeId: (themeId: string, options?: SetThemeOptions) => void;
}
/**
 * The theme the user chose, remembered across visits. Pass `'system'` as the default, or let the
 * user choose it, to follow the operating system's light or dark setting.
 */
export declare function useTheme(defaultThemeId?: string, systemThemes?: SystemThemes): UseThemeResult;