@askrjs/themes/theme

CAT_THEME_NAMEStype

CAT_THEME_NAMES: readonly ["tabby", "ginger", "tuxedo", "calico", "torty"]

Names of the built-in "cat" theme presets.

CAT_THEME_OPTIONStype

CAT_THEME_OPTIONS: readonly ThemeOption[]

Theme options for the built-in "cat" theme presets, keyed to {@link CAT_THEME_NAMES}.

CatThemeNametype

CatThemeName: (typeof CAT_THEME_NAMES)[number]

A built-in "cat" theme name, one of {@link CAT_THEME_NAMES}.

DEFAULT_THEME_OPTIONStype

DEFAULT_THEME_OPTIONS: readonly ThemeOption[]

Default light/dark/system theme options used by {@link ThemeScope} and {@link ThemePicker}.

themetype

theme: () => ThemeScopeValue

Reads the current {@link ThemeScopeValue} from the nearest enclosing {@link ThemeScope}.

ThemeNametype

ThemeName: "light" | "dark" | "system" | CatThemeName | (string & {})

Any theme identifier accepted by {@link ThemeScope}: "light", "dark", "system", a {@link CatThemeName}, or a custom string.

ThemeOptiontype

ThemeOption: {
  value: ThemeName;
  label: string;
}

A theme choice offered by {@link ThemePicker}/{@link ThemeToggle}: a value paired with a display label.

ThemePickertype

ThemePicker: (props: ThemePickerProps) => JSX.Element

A <select> bound to the current {@link theme}, listing themes (defaults to the enclosing scope's options).

ThemePickerPropstype

ThemePickerProps: Omit<JSX.IntrinsicElements["select"], "children" | "value" | "defaultValue" | "onChange"> & {
  themes?: readonly ThemeOption[];
  label?: string;
}

Props for the {@link ThemePicker} component.

label

label?: string | undefined;

themes

themes?: readonly ThemeOption[] | undefined;

ThemeScopetype

ThemeScope: (props: ThemeScopeProps) => JSX.Element

Establishes a theme boundary: tracks the active theme (persisted to localStorage under storageKey and synced across tabs/scopes), resolves the OS "system" preference, and reflects the choice onto the DOM via data-theme/data-theme-choice attributes. Nested scopes cooperate through a shared coordinator so the deepest explicitly-set scope wins.

ThemeScopePropstype

ThemeScopeProps: {
  children?: unknown;
  defaultTheme?: ThemeName;
  themes?: readonly ThemeOption[];
  storageKey?: string;
}

Props for the {@link ThemeScope} component.

children

children?: unknown;

defaultTheme

defaultTheme?: ThemeName | undefined;

storageKey

storageKey?: string | undefined;

themes

themes?: readonly ThemeOption[] | undefined;

ThemeScopeValuetype

ThemeScopeValue: {
  theme: () => ThemeName;
  resolvedSystemTheme: () => "light" | "dark";
  setTheme: (theme: ThemeName) => void;
  themes: readonly ThemeOption[];
  storageKey: string;
}

Value read from {@link theme}: the active theme, its resolved system value, a setter, and the available theme options.

ThemeToggletype

ThemeToggle: (props: ThemeToggleProps) => JSX.Element

A button that cycles through themes (defaults to ["light", "dark"]) on press. Supports icon props per theme, or a function-as-children render prop receiving {@link ThemeToggleRenderContext}.

ThemeTogglePropstype

ThemeToggleProps: Omit<ButtonNativeProps, "children" | "onPress"> & {
  children?: unknown | ((context: ThemeToggleRenderContext) => unknown);
  lightIcon?: unknown;
  darkIcon?: unknown;
  systemIcon?: unknown;
  themes?: readonly ThemeName[];
  onPress?: (event: PressEvent) => void;
}

Props for the {@link ThemeToggle} component.

children

children?: unknown;

darkIcon

darkIcon?: unknown;

lightIcon

lightIcon?: unknown;

onPress

onPress?: ((event: PressEvent) => void) | undefined;

systemIcon

systemIcon?: unknown;

themes

themes?: readonly ThemeName[] | undefined;

ThemeToggleRenderContexttype

ThemeToggleRenderContext: {
  theme: ThemeName;
  nextTheme: ThemeName;
}

Render context passed to a function-as-children {@link ThemeToggleProps.children}.