diff --git a/docs/functions/client_color-switch_color-switch.ColorSwitch.html b/docs/functions/client_color-switch_color-switch.ColorSwitch.html index 47d83b16..6fe765e7 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 729e6227..5c09c890 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 fa74947d..50fd4fe8 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 454b00e0..7cf1a10b 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 1204f7fe..023b7f5e 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 9518caae..56de45aa 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 286c2174..08996ab2 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 9f9b81fd..69748f52 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 6891ce42..5d568251 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 8492dd24..a4cc2418 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 e3f20f1b..46bf50aa 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 f7502e77..fcb3b8e0 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -793,8 +793,8 @@ packages: resolution: {integrity: sha512-2b/g5hRmpbb1o4GnTZax9N9m0FXzz9OV42ZzI4rDDMDuHUqigAiQCEWChBWCY4ztAGVRjoWT19v0yMmc5/L5kA==} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} - '@gerrit0/mini-shiki@1.24.0': - resolution: {integrity: sha512-eopM3SyeUZQZSBu1VCV8/d1LtJXDd0aMpLjyWpGkjD6ux3sNwoLNeuEb5xmiWVfQvFeMUXa1WTjh06lqm3KETA==} + '@gerrit0/mini-shiki@1.24.1': + resolution: {integrity: sha512-PNP/Gjv3VqU7z7DjRgO3F9Ok5frTKqtpV+LJW1RzMcr2zpRk0ulhEWnbcNGXzPC7BZyWMIHrkfQX2GZRfxrn6Q==} '@humanfs/core@0.19.1': resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==} @@ -1321,8 +1321,8 @@ packages: '@shikijs/vscode-textmate@9.3.0': resolution: {integrity: sha512-jn7/7ky30idSkd/O5yDBfAnVt+JJpepofP/POZ1iMOxK59cOfqIgg/Dj0eFsjOTMw+4ycJN0uhZH/Eb0bs/EUA==} - '@storybook/csf@0.1.11': - resolution: {integrity: sha512-dHYFQH3mA+EtnCkHXzicbLgsvzYjcDJ1JWsogbItZogkPHgSJM/Wr71uMkcvw8v9mmCyP4NpXJuu6bPoVsOnzg==} + '@storybook/csf@0.1.12': + resolution: {integrity: sha512-9/exVhabisyIVL0VxTCxo01Tdm8wefIXKXfltAPTSr8cbLn5JAxGQ6QV3mjdecLGEOucfoVhAKtJfVHxEK1iqw==} '@swc/counter@0.1.3': resolution: {integrity: sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==} @@ -3602,8 +3602,8 @@ packages: resolution: {integrity: sha512-nkc+3pIIhqHVQr085X9d2JzPzLyjzQS96zbruppqC9aZRm/x8xx6xhI98gHtsfELP2bE+loHq8ZaHFHhe+NauA==} engines: {node: ^16.14.0 || >=18.0.0} - nwsapi@2.2.13: - resolution: {integrity: sha512-cTGB9ptp9dY9A5VbMSe7fQBcl/tt22Vcqdq8+eN93rblOuE0aCFu4aZ2vMwct/2t+lFnosm8RkQW1I0Omb1UtQ==} + nwsapi@2.2.16: + resolution: {integrity: sha512-F1I/bimDpj3ncaNDhfyMWuFqmQDBwDB0Fogc2qpL3BWvkQteFD/8BzWuIRl83rq0DXfm8SGt/HFhLXZyljTXcQ==} object-assign@4.1.1: resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==} @@ -5437,7 +5437,7 @@ snapshots: dependencies: levn: 0.4.1 - '@gerrit0/mini-shiki@1.24.0': + '@gerrit0/mini-shiki@1.24.1': dependencies: '@shikijs/engine-oniguruma': 1.24.0 '@shikijs/types': 1.24.0 @@ -5861,7 +5861,7 @@ snapshots: '@shikijs/vscode-textmate@9.3.0': {} - '@storybook/csf@0.1.11': + '@storybook/csf@0.1.12': dependencies: type-fest: 2.19.0 @@ -7158,7 +7158,7 @@ snapshots: eslint-plugin-storybook@0.11.1(eslint@9.12.0(jiti@2.3.1))(typescript@5.7.2): dependencies: - '@storybook/csf': 0.1.11 + '@storybook/csf': 0.1.12 '@typescript-eslint/utils': 8.16.0(eslint@9.12.0(jiti@2.3.1))(typescript@5.7.2) eslint: 9.12.0(jiti@2.3.1) ts-dedent: 2.2.0 @@ -7959,7 +7959,7 @@ snapshots: http-proxy-agent: 7.0.2 https-proxy-agent: 7.0.5 is-potential-custom-element-name: 1.0.1 - nwsapi: 2.2.13 + nwsapi: 2.2.16 parse5: 7.2.1 rrweb-cssom: 0.7.1 saxes: 6.0.0 @@ -8642,7 +8642,7 @@ snapshots: npm-package-arg: 11.0.3 semver: 7.6.3 - nwsapi@2.2.13: {} + nwsapi@2.2.16: {} object-assign@4.1.1: {} @@ -9852,7 +9852,7 @@ snapshots: typedoc@0.27.1(typescript@5.7.2): dependencies: - '@gerrit0/mini-shiki': 1.24.0 + '@gerrit0/mini-shiki': 1.24.1 lunr: 2.3.9 markdown-it: 14.1.0 minimatch: 9.0.5