Interface ThemeSwitcherProps

interface ThemeSwitcherProps {
    forcedColorScheme?: ColorSchemeType;
    forcedTheme?: string;
    nonce?: string;
    styles?: Record<string, string>;
    targetSelector?: string;
    themeTransition?: string;
}

Properties

forcedColorScheme? forcedTheme? nonce? styles? targetSelector? themeTransition?

Properties

OptionalforcedColorScheme

forcedColorScheme?: ColorSchemeType

Forced color scheme for the current page

See

Force per page theme and color-scheme

OptionalforcedTheme

forcedTheme?: string

Forced theme name for the current page

See

Force per page theme and color-scheme

Optionalnonce

nonce?: string

The nonce value for your Content Security Policy.

Optionalstyles

styles?: Record<string, string>

Provide a styles object imported from CSS/SCSS modules if you are using these modules to define theme and color-scheme classes. All classes applied to the target are modified using the styles object as follows: if (styles) classes = classes.map(cls => styles[cls] ?? cls);

OptionaltargetSelector

targetSelector?: string

CSS selector for the target element to apply the theme. Use this to specify a different target element than the default (html or documentElement). This is particularly useful for controlling the theme of different parts of the page independently.

OptionalthemeTransition

themeTransition?: string

The transition property to enforce on all elements, preventing unwanted transitions during theme changes.

Example

'background .3s'

Default Value

'none'

Settings

Member Visibility

On This Page

Properties