Theme and tokens API
Theme configuration, token generation, runtime mode control, snapshots, subscriptions, and token metadata.
Theme and tokens exports
36 public exports from @tavojs/ui/theme.
@tavojs/ui/theme
Canonical import boundary for every symbol in this section.
buildTheme#
buildTheme(config: TavoUiThemeConfig): ThemeBuildResultPublic function exported from @tavojs/ui/theme.
Related guidecreateThemeController#
createThemeController(defaultMode?: ThemeMode | undefined): ThemeControllerPublic function exported from @tavojs/ui/theme.
Related guidecreateThemeControllerFromConfig#
createThemeControllerFromConfig(config: Pick<TavoUiThemeConfig, "defaultTheme">): ThemeControllerPublic function exported from @tavojs/ui/theme.
Related guidegetTavoUiTokenGroup#
getTavoUiTokenGroup(name: string): TavoUiTokenGroupPublic function exported from @tavojs/ui/theme.
Related guidegetTavoUiTokenMetadata#
getTavoUiTokenMetadata(config?: TavoUiThemeConfig | undefined): TavoUiTokenMetadata[]Public function exported from @tavojs/ui/theme.
Related guidegetThemeSnapshot#
getThemeSnapshot(controller: ThemeController): ThemeSnapshotPublic function exported from @tavojs/ui/theme.
Related guidemountThemeController#
mountThemeController(controller: ThemeController): () => voidPublic function exported from @tavojs/ui/theme.
Related guideResolvedThemeMode#
type ResolvedThemeMode = "light" | "dark";Public type exported from @tavojs/ui/theme.
Related guidesubscribeTheme#
subscribeTheme(controller: ThemeController, listener: (snapshot: ThemeSnapshot) => void, options?: { immediate?: boolean | undefined; } | undefined): () => voidPublic function exported from @tavojs/ui/theme.
Related guideTavoUiThemeConfig#
type TavoUiThemeConfig = {
$schema?: string;
preset?: ThemePreset;
defaultTheme?: ThemeMode;
color: ThemeColorConfig;
scale?: ThemeScaleConfig;
typography?: ThemeTypographyConfig;
interaction?: ThemeInteractionConfig;
viewport?: ThemeViewportConfig;
breakpoints?: ThemeBreakpointsConfig;
semantic?: ThemeModeSemanticConfig;
output?: ThemeOutputConfig;
accessibility?: ThemeAccessibilityConfig;
tokens?: ThemeTokenOverrides;
};Public type exported from @tavojs/ui/theme.
Related guideTavoUiTokenGroup#
type TavoUiTokenGroup = "color" | "sizing" | "spacing" | "radius" | "border" | "focus" | "motion" | "opacity" | "interaction" | "effects" | "breakpoint" | "typography" | "custom";Public type exported from @tavojs/ui/theme.
Related guidetavoUiTokenMetadata#
tavoUiTokenMetadata: readonly TavoUiTokenMetadata[]Complete built-in Tavo.js UI CSS variable catalog.
Related guideTavoUiTokenMetadata#
type TavoUiTokenMetadata = {
name: string;
cssVariable: `--tui-${string}`;
group: TavoUiTokenGroup;
};Public type exported from @tavojs/ui/theme.
Related guidetavoUiTokenNames#
tavoUiTokenNames: readonly `--tui-${string}`[]Complete built-in Tavo.js UI CSS variable names.
Related guideThemeAccessibilityConfig#
type ThemeAccessibilityConfig = {
contrast?: "AA" | "AAA";
failOnViolation?: boolean;
};Public type exported from @tavojs/ui/theme.
Related guideThemeBreakpointsConfig#
type ThemeBreakpointsConfig = {
sm?: number;
md?: number;
lg?: number;
};Public type exported from @tavojs/ui/theme.
Related guideThemeBuildResult#
type ThemeBuildResult = {
cssText: string;
modes: Record<ResolvedThemeMode, ThemeResolvedColorSet>;
staticTokens: Record<string, string>;
config: TavoUiThemeConfig;
warnings: string[];
};Public type exported from @tavojs/ui/theme.
Related guideThemeColorConfig#
type ThemeColorConfig = {
light: ThemeColorPair;
dark?: Partial<ThemeColorPair>;
method?: ThemeMethod;
fixShade?: boolean;
};Public type exported from @tavojs/ui/theme.
Related guideThemeColorPair#
type ThemeColorPair = {
primary: string;
secondary?: string;
};Public type exported from @tavojs/ui/theme.
Related guideThemeController#
type ThemeController = {
store: Store<ThemeRuntimeState>;
setMode(mode: ThemeMode): void;
toggleMode(): void;
syncDocument(): void;
watchSystem(): () => void;
};Public type exported from @tavojs/ui/theme.
Related guideThemeDensity#
type ThemeDensity = "compact" | "comfortable" | "spacious";Public type exported from @tavojs/ui/theme.
Related guideThemeInteractionConfig#
type ThemeInteractionConfig = {
hoverLift?: number;
hoverShadow?: number;
activeScale?: number;
focusAlpha?: number;
disabledOpacity?: number;
transition?: number;
};Public type exported from @tavojs/ui/theme.
Related guideThemeMethod#
type ThemeMethod = "analogous" | "monochromatic" | "glass";Public type exported from @tavojs/ui/theme.
Related guideThemeMode#
type ThemeMode = "light" | "dark" | "system";Public type exported from @tavojs/ui/theme.
Related guideThemeModeSemanticConfig#
type ThemeModeSemanticConfig = ThemeSemanticConfig & {
light?: ThemeSemanticConfig;
dark?: ThemeSemanticConfig;
};Public type exported from @tavojs/ui/theme.
Related guideThemeOutputConfig#
type ThemeOutputConfig = {
selector?: string;
darkSelector?: string;
includeMediaQuery?: boolean;
};Public type exported from @tavojs/ui/theme.
Related guideThemePreset#
type ThemePreset = "minimal" | "glass" | "enterprise" | "editorial" | "dense" | "mobile" | "monochrome";Public type exported from @tavojs/ui/theme.
Related guideThemeRamp#
type ThemeRamp = Record<number, string>;Public type exported from @tavojs/ui/theme.
Related guideThemeResolvedColorSet#
type ThemeResolvedColorSet = {
primary: ThemeRamp;
secondary: ThemeRamp;
neutral: ThemeRamp;
semantic: Required<ThemeSemanticConfig>;
tokens: Record<string, string>;
};Public type exported from @tavojs/ui/theme.
Related guideThemeRuntimeState#
type ThemeRuntimeState = {
mode: ThemeMode;
resolvedMode: ResolvedThemeMode;
};Public type exported from @tavojs/ui/theme.
Related guideThemeScaleConfig#
type ThemeScaleConfig = {
unit?: number;
controlHeight?: number;
spacing?: number;
radius?: number;
shadow?: number;
border?: number;
density?: ThemeDensity;
focus?: number;
motion?: number;
opacity?: number;
blur?: number;
glassAlpha?: number;
controlRadius?: number;
surfaceRadius?: number;
};Public type exported from @tavojs/ui/theme.
Related guideThemeSemanticConfig#
type ThemeSemanticConfig = {
success?: string;
warning?: string;
danger?: string;
info?: string;
};Public type exported from @tavojs/ui/theme.
Related guideThemeSnapshot#
type ThemeSnapshot = ThemeRuntimeState & {
setMode(mode: ThemeMode): void;
toggleMode(): void;
};Public type exported from @tavojs/ui/theme.
Related guideThemeTokenOverrides#
type ThemeTokenOverrides = Partial<Record<ResolvedThemeMode, Record<string, string>>>;Public type exported from @tavojs/ui/theme.
Related guideThemeTypographyConfig#
type ThemeTypographyConfig = {
fontFamily?: string;
textFontFamily?: string;
headingFontFamily?: string;
bodySize?: number;
captionSize?: number;
labelSize?: number;
headingScale?: number;
};Public type exported from @tavojs/ui/theme.
Related guideThemeViewportConfig#
type ThemeViewportConfig = {
rootMin?: number;
rootMax?: number;
minWidth?: number;
maxWidth?: number;
};Public type exported from @tavojs/ui/theme.
Related guide