Theme

Theme provider component. The entry point of svxui.

View source

Examples

ThemeRootProvider

Show code

Theme strategy:

Radius:

Accent color:

ThemeChildProvider

ThemeChildProvider is a utility component to override the theme anywhere in the application. It must be used inside the ThemeRootProvider component.

Show code

{ strategy="dark", color="green", radius="full" }

{ strategy="light", color="red", radius"none" }

API Reference

ThemeRootProvider

Property	Type	Default	Description
`children` Snippet	`Snippet<[void]>`		ThemeRootProvider content to render
`colorKey`	`string`		Storage key for accent color
`customThemeColors`	`ThemeColorsType`		Custom theme colors
`defaultColor`	`string`	`"neutral"`	Default accent color
`defaultRadius`	`union`	`"medium"`	Default radius
`defaultStrategy`	`union`	`"system"`	Default theme strategy
`disableHeadScriptInjection`	`boolean`	`false`	Should disable init theme script injection. This script prevent FOUC.
`disableTransitions`	`boolean`	`true`	Should disable css transition when theme change
`hasBackground`	`boolean`	`true`	Should set the background color
`metaThemeColors`	`MetaThemeColorsType`	`"{"light":"#fcfcfc","dark":"#111111"}"`	Content colors for meta theme-color tag
`radiusKey`	`string`		Storage key for radius
`strategyKey`	`string`		Storage key for theme strategy
`track`	`boolean`	`true`	Should track storage change from other tab

ThemeChildProvider

Property	Type	Description
`children` Snippet	`Snippet<[void]>`	ThemeChildProvider content to render
`color`	`string`	Static Accent color or resolved from ThemeRootProvider.
`hasBackground`	`boolean`	Should set the background color
`radius`	`union`	Static radius or resolved from ThemeRootProvider.
`strategy`	`union`	Static theme strategy or resolved from ThemeRootProvider.

Type Definitions

export type StrategyType = (typeof Strategies)[number];

export type ThemeType = (typeof Themes)[number];

export type MetaThemeColorsType = {
    light: string;
    dark: string;
};

export type ThemeColorsType = Record<string, string>;

export type ThemeRootStateProps = {
    /**
     * Default accent color
     */
    defaultColor?: string;
    /**
     * Storage key for accent color
     */
    colorKey?: string;
    /**
     * Default theme strategy
     */
    defaultStrategy?: StrategyType;
    /**
     * Storage key for theme strategy
     */
    strategyKey?: string;
    /**
     * Default radius
     */
    defaultRadius?: Radius;
    /**
     * Storage key for radius
     */
    radiusKey?: string;
    /**
     * Content colors for meta theme-color tag
     */
    metaThemeColors?: MetaThemeColorsType;
    /**
     * Should set the background color
     */
    hasBackground?: boolean;
    /**
     * Should track storage change from other tab
     */
    track?: boolean;
    /**
     * Should disable css transition when theme change
     */
    disableTransitions?: boolean;
    /**
     * Should disable init theme script injection. This script prevent FOUC.
     */
    disableHeadScriptInjection?: boolean;
    /**
     * Custom theme colors
     */
    customThemeColors?: ThemeColorsType;
};

export type ThemeChildStateProps = {
    /**
     * Static Accent color or resolved from ThemeRootProvider.
     */
    color?: string;
    /**
     * Static theme strategy or resolved from ThemeRootProvider.
     */
    strategy?: StrategyType;
    /**
     * Static radius or resolved from ThemeRootProvider.
     */
    radius?: Radius;
    /**
     * Should set the background color
     */
    hasBackground?: boolean;
};

Textarea