diff --git a/docs/functions/client_color-switch_color-switch.ColorSwitch.html b/docs/functions/client_color-switch_color-switch.ColorSwitch.html index 198317d4..ad31c561 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 711329ad..6389237a 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 fc8b7ce2..0eaff486 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 c1a459d8..06acf767 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 b8824029..70313652 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 9776a582..938f72f6 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 dae208f5..eed5bb33 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 1a13c4d5..893bc671 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 5e2350c4..e00a8bbd 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 aee2ce37..6a874253 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 3247916b..3af40287 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
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5b075968..84ef2a38 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1913,8 +1913,8 @@ packages: caniuse-lite@1.0.30001690: resolution: {integrity: sha512-5ExiE3qQN6oF8Clf8ifIDcMRCRE/dMGcETG/XGMD8/XiXm6HXQgQTh1yZYLXXpSOsEUlJm1Xr7kGULZTuGtP/w==} - caniuse-lite@1.0.30001695: - resolution: {integrity: sha512-vHyLade6wTgI2u1ec3WQBxv+2BrTERV28UXQu9LO6lZ9pYeMk34vjXFLOxo1A4UBA8XTL4njRQZdno/yYaSmWw==} + caniuse-lite@1.0.30001696: + resolution: {integrity: sha512-pDCPkvzfa39ehJtJ+OwGT/2yvT2SbjfHhiIW2LWOAcMQ7BzwxT/XuyUp4OTOd0XFWA6BKw0JalnBHgSi5DGJBQ==} capital-case@1.0.4: resolution: {integrity: sha512-ds37W8CytHgwnhGGTi88pcPyR15qoNkOpYwmMMfnWqqWgESapLqvDx6huFjQ5vqWSn2Z06173XNA7LtMOeUh1A==} @@ -6522,7 +6522,7 @@ snapshots: autoprefixer@10.4.20(postcss@8.5.1): dependencies: browserslist: 4.24.4 - caniuse-lite: 1.0.30001695 + caniuse-lite: 1.0.30001696 fraction.js: 4.3.7 normalize-range: 0.1.2 picocolors: 1.1.1 @@ -6568,7 +6568,7 @@ snapshots: browserslist@4.24.4: dependencies: - caniuse-lite: 1.0.30001695 + caniuse-lite: 1.0.30001696 electron-to-chromium: 1.5.88 node-releases: 2.0.19 update-browserslist-db: 1.1.2(browserslist@4.24.4) @@ -6621,7 +6621,7 @@ snapshots: caniuse-lite@1.0.30001690: {} - caniuse-lite@1.0.30001695: {} + caniuse-lite@1.0.30001696: {} capital-case@1.0.4: dependencies: @@ -8666,7 +8666,7 @@ snapshots: '@swc/counter': 0.1.3 '@swc/helpers': 0.5.15 busboy: 1.6.0 - caniuse-lite: 1.0.30001695 + caniuse-lite: 1.0.30001696 postcss: 8.4.31 react: 19.0.0 react-dom: 19.0.0(react@19.0.0)