diff --git a/docs/functions/client_color-switch_color-switch.ColorSwitch.html b/docs/functions/client_color-switch_color-switch.ColorSwitch.html index 39791c11..2e143159 100644 --- a/docs/functions/client_color-switch_color-switch.ColorSwitch.html +++ b/docs/functions/client_color-switch_color-switch.ColorSwitch.html @@ -6,4 +6,4 @@ 
<ColorSwitch size={20} skipSystem />
-

Settings

Member Visibility
+

Settings

Member Visibility
diff --git a/docs/functions/client_force-color-scheme_force-color-scheme.ForceColorScheme.html b/docs/functions/client_force-color-scheme_force-color-scheme.ForceColorScheme.html index 98b968f5..94bb68be 100644 --- a/docs/functions/client_force-color-scheme_force-color-scheme.ForceColorScheme.html +++ b/docs/functions/client_force-color-scheme_force-color-scheme.ForceColorScheme.html @@ -1,2 +1,2 @@ ForceColorScheme | Nextjs Themes

Function ForceColorScheme

Force color scheme on a page

-

Settings

Member Visibility
+

Settings

Member Visibility
diff --git a/docs/functions/client_force-theme_force-theme.ForceTheme.html b/docs/functions/client_force-theme_force-theme.ForceTheme.html index b1b7997c..cae9a80c 100644 --- a/docs/functions/client_force-theme_force-theme.ForceTheme.html +++ b/docs/functions/client_force-theme_force-theme.ForceTheme.html @@ -1,2 +1,2 @@ ForceTheme | Nextjs Themes

Function ForceTheme

Force theme on a page

-
  • ForceTheme(props: { targetSelector?: string; theme: string }): null

  • Parameters

    • props: { targetSelector?: string; theme: string }

    Returns null

Settings

Member Visibility
+

Settings

Member Visibility
diff --git a/docs/functions/client_switcher_switcher.Switcher.html b/docs/functions/client_switcher_switcher.Switcher.html index f9b96024..1347a2c5 100644 --- a/docs/functions/client_switcher_switcher.Switcher.html +++ b/docs/functions/client_switcher_switcher.Switcher.html @@ -3,4 +3,4 @@

Example

<Switcher targetSelector="#container1" />
-

Settings

Member Visibility
+

Settings

Member Visibility
diff --git a/docs/functions/client_theme-switcher_theme-switcher.ThemeSwitcher.html b/docs/functions/client_theme-switcher_theme-switcher.ThemeSwitcher.html index 4d5dc46a..9c2ab3ba 100644 --- a/docs/functions/client_theme-switcher_theme-switcher.ThemeSwitcher.html +++ b/docs/functions/client_theme-switcher_theme-switcher.ThemeSwitcher.html @@ -3,4 +3,4 @@

Example

<ThemeSwitcher [...props] />
-

Settings

Member Visibility
+

Settings

Member Visibility
diff --git a/docs/functions/hooks_use-theme.useTheme.html b/docs/functions/hooks_use-theme.useTheme.html index 636bb80e..5306b614 100644 --- a/docs/functions/hooks_use-theme.useTheme.html +++ b/docs/functions/hooks_use-theme.useTheme.html @@ -1,4 +1,4 @@ useTheme | Nextjs Themes

Function useTheme

Example

const [] = useTheme(options);
-

Settings

Member Visibility
+

Settings

Member Visibility
diff --git a/docs/interfaces/client_color-switch_color-switch.ColorSwitchProps.html b/docs/interfaces/client_color-switch_color-switch.ColorSwitchProps.html index eb939896..ae18f615 100644 --- a/docs/interfaces/client_color-switch_color-switch.ColorSwitchProps.html +++ b/docs/interfaces/client_color-switch_color-switch.ColorSwitchProps.html @@ -1,6 +1,6 @@ -ColorSwitchProps | Nextjs Themes

Interface ColorSwitchProps

interface ColorSwitchProps {
    size?: number;
    skipSystem?: boolean;
    targetSelector?: string;
}

Hierarchy

Properties

size? +ColorSwitchProps | Nextjs Themes

Interface ColorSwitchProps

interface ColorSwitchProps {
    size?: number;
    skipSystem?: boolean;
    targetSelector?: string;
}

Hierarchy

Properties

size? skipSystem? targetSelector?

Properties

Optionalsize

size?: number

Diameter of the color switch

-

OptionalskipSystem

skipSystem?: boolean

Skip system colorScheme while toggling

-

OptionaltargetSelector

targetSelector?: string

Settings

Member Visibility

On This Page

Properties
+

OptionalskipSystem

skipSystem?: boolean

Skip system colorScheme while toggling

+

OptionaltargetSelector

targetSelector?: string

Settings

Member Visibility

On This Page

Properties
diff --git a/docs/interfaces/client_theme-switcher_theme-switcher.ThemeSwitcherProps.html b/docs/interfaces/client_theme-switcher_theme-switcher.ThemeSwitcherProps.html index 077d8dd4..31be18b2 100644 --- a/docs/interfaces/client_theme-switcher_theme-switcher.ThemeSwitcherProps.html +++ b/docs/interfaces/client_theme-switcher_theme-switcher.ThemeSwitcherProps.html @@ -1,4 +1,4 @@ -ThemeSwitcherProps | Nextjs Themes

Interface ThemeSwitcherProps

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

Properties

forcedColorScheme? +ThemeSwitcherProps | Nextjs Themes

Interface ThemeSwitcherProps

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

Properties

forcedColorScheme? forcedTheme? nonce? styles? @@ -6,20 +6,20 @@ 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

+

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. +

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. +

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.

+

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
+

Settings

Member Visibility

On This Page

Properties
diff --git a/docs/interfaces/hooks_use-theme.UseThemeYield.html b/docs/interfaces/hooks_use-theme.UseThemeYield.html index 0bc2db29..d0493aa2 100644 --- a/docs/interfaces/hooks_use-theme.UseThemeYield.html +++ b/docs/interfaces/hooks_use-theme.UseThemeYield.html @@ -1,4 +1,4 @@ -UseThemeYield | Nextjs Themes

Interface UseThemeYield

interface UseThemeYield {
    colorSchemePref: ColorSchemeType;
    darkTheme: string;
    lightTheme: string;
    resolvedColorScheme: ResolvedColorSchemeType;
    resolvedTheme: string;
    setColorSchemePref: (colorSchemePref: ColorSchemeType) => void;
    setDarkTheme: (darkTheme: string) => void;
    setForcedColorScheme: (forcedColorScheme: ColorSchemeType) => void;
    setForcedTheme: (forcedTheme: string) => void;
    setLightTheme: (lightTheme: string) => void;
    setTheme: (theme: string) => void;
    setThemeSet: (themeSet: { darkTheme: string; lightTheme: string }) => void;
    systemColorScheme: ResolvedColorSchemeType;
    theme: string;
    toggleColorScheme: (skipSystem?: boolean) => void;
}

Properties

colorSchemePref +UseThemeYield | Nextjs Themes

Interface UseThemeYield

interface UseThemeYield {
    colorSchemePref: ColorSchemeType;
    darkTheme: string;
    lightTheme: string;
    resolvedColorScheme: ResolvedColorSchemeType;
    resolvedTheme: string;
    setColorSchemePref: (colorSchemePref: ColorSchemeType) => void;
    setDarkTheme: (darkTheme: string) => void;
    setForcedColorScheme: (forcedColorScheme: ColorSchemeType) => void;
    setForcedTheme: (forcedTheme: string) => void;
    setLightTheme: (lightTheme: string) => void;
    setTheme: (theme: string) => void;
    setThemeSet: (themeSet: { darkTheme: string; lightTheme: string }) => void;
    systemColorScheme: ResolvedColorSchemeType;
    theme: string;
    toggleColorScheme: (skipSystem?: boolean) => void;
}

Properties

colorSchemePref darkTheme lightTheme resolvedColorScheme @@ -13,5 +13,5 @@ systemColorScheme theme toggleColorScheme -

Properties

colorSchemePref

colorSchemePref: ColorSchemeType

darkTheme

darkTheme: string

lightTheme

lightTheme: string

resolvedColorScheme

resolvedColorScheme: ResolvedColorSchemeType

resolvedTheme

resolvedTheme: string

setColorSchemePref

setColorSchemePref: (colorSchemePref: ColorSchemeType) => void

setDarkTheme

setDarkTheme: (darkTheme: string) => void

setForcedColorScheme

setForcedColorScheme: (forcedColorScheme: ColorSchemeType) => void

setForcedTheme

setForcedTheme: (forcedTheme: string) => void

setLightTheme

setLightTheme: (lightTheme: string) => void

setTheme

setTheme: (theme: string) => void

actions

-

setThemeSet

setThemeSet: (themeSet: { darkTheme: string; lightTheme: string }) => void

systemColorScheme

systemColorScheme: ResolvedColorSchemeType

theme

theme: string

toggleColorScheme

toggleColorScheme: (skipSystem?: boolean) => void

Settings

Member Visibility

On This Page

Properties
+

Properties

colorSchemePref

colorSchemePref: ColorSchemeType

darkTheme

darkTheme: string

lightTheme

lightTheme: string

resolvedColorScheme

resolvedColorScheme: ResolvedColorSchemeType

resolvedTheme

resolvedTheme: string

setColorSchemePref

setColorSchemePref: (colorSchemePref: ColorSchemeType) => void

setDarkTheme

setDarkTheme: (darkTheme: string) => void

setForcedColorScheme

setForcedColorScheme: (forcedColorScheme: ColorSchemeType) => void

setForcedTheme

setForcedTheme: (forcedTheme: string) => void

setLightTheme

setLightTheme: (lightTheme: string) => void

setTheme

setTheme: (theme: string) => void

actions

+

setThemeSet

setThemeSet: (themeSet: { darkTheme: string; lightTheme: string }) => void

systemColorScheme

systemColorScheme: ResolvedColorSchemeType

theme

theme: string

toggleColorScheme

toggleColorScheme: (skipSystem?: boolean) => void

Settings

Member Visibility

On This Page

Properties
diff --git a/docs/types/types.ColorSchemeType.html b/docs/types/types.ColorSchemeType.html index 44fb9194..b0e0689b 100644 --- a/docs/types/types.ColorSchemeType.html +++ b/docs/types/types.ColorSchemeType.html @@ -1,2 +1,2 @@ ColorSchemeType | Nextjs Themes

Type Alias ColorSchemeType

ColorSchemeType: "" | "system" | "dark" | "light"

Types to be exposed to users

-

Settings

Member Visibility
+

Settings

Member Visibility
diff --git a/docs/types/types.ResolvedColorSchemeType.html b/docs/types/types.ResolvedColorSchemeType.html index 4bffe762..1fc7c1e6 100644 --- a/docs/types/types.ResolvedColorSchemeType.html +++ b/docs/types/types.ResolvedColorSchemeType.html @@ -1 +1 @@ -ResolvedColorSchemeType | Nextjs Themes

Type Alias ResolvedColorSchemeType

ResolvedColorSchemeType: "dark" | "light"

Settings

Member Visibility
+ResolvedColorSchemeType | Nextjs Themes

Type Alias ResolvedColorSchemeType

ResolvedColorSchemeType: "dark" | "light"

Settings

Member Visibility