diff --git a/docs/functions/client_color_switch_color_switch.ColorSwitch.html b/docs/functions/client_color_switch_color_switch.ColorSwitch.html index faf67c21..cd6a9678 100644 --- a/docs/functions/client_color_switch_color_switch.ColorSwitch.html +++ b/docs/functions/client_color_switch_color_switch.ColorSwitch.html @@ -13,4 +13,4 @@
export const ColorSwitch = ({ targetId, skipSystem, size, ...props }: ColorSwitchProps) => {
const {
setColorSchemePreference,
resolvedColorScheme: rcs,
colorSchemePreference: csp,
} = useTheme(targetId);
const toggleColorScheme = () => {
switch (csp) {
case "dark":
setColorSchemePreference("light");
break;
case "light":
setColorSchemePreference(skipSystem ? "dark" : "system");
break;
case "system":
default:
setColorSchemePreference("dark");
break;
}
};
return (
<button
className={["nthul--color-switch", rcs, csp === "system" ? "system" : ""].join(" ")}
data-testid="color-switch"
{...props}
onClick={toggleColorScheme}
// @ts-expect-error -- setting custom attribute
style={{ "--size": `${size}px` }}
type="button"
/>
);
};
-
+
diff --git a/docs/functions/client_theme_switcher_theme_switcher.ThemeSwitcher.html b/docs/functions/client_theme_switcher_theme_switcher.ThemeSwitcher.html index 334a481b..4cbc619b 100644 --- a/docs/functions/client_theme_switcher_theme_switcher.ThemeSwitcher.html +++ b/docs/functions/client_theme_switcher_theme_switcher.ThemeSwitcher.html @@ -1,3 +1,3 @@ ThemeSwitcher | React18 Loaders

The core ThemeSwitcher component wich applies classes and transitions. Cookies are set only if corresponding ServerTarget is detected.

-
+
diff --git a/docs/functions/constants.useRGSMinify.html b/docs/functions/constants.useRGSMinify.html index f5646aa9..1d913146 100644 --- a/docs/functions/constants.useRGSMinify.html +++ b/docs/functions/constants.useRGSMinify.html @@ -1,2 +1,2 @@ useRGSMinify | React18 Loaders

To avoid multiple r18gs imports

-
+
diff --git a/docs/functions/hooks_use_theme.useTheme-1.html b/docs/functions/hooks_use_theme.useTheme-1.html index 94d5d72e..7712c548 100644 --- a/docs/functions/hooks_use_theme.useTheme-1.html +++ b/docs/functions/hooks_use_theme.useTheme-1.html @@ -1,4 +1,4 @@ useTheme | React18 Loaders

use this hook to gain access to theme state and setters from your components.

  • Parameters

    • OptionaltargetId: string

      targetId corresponding to ThemeSwitcher and others tied to specific container.

    Returns UseTheme

    themeState and setter fucntions

    -
+
diff --git a/docs/functions/server_force_theme_force_theme.ForceTheme.html b/docs/functions/server_force_theme_force_theme.ForceTheme.html index b433a029..72ee544f 100644 --- a/docs/functions/server_force_theme_force_theme.ForceTheme.html +++ b/docs/functions/server_force_theme_force_theme.ForceTheme.html @@ -1 +1 @@ -ForceTheme | React18 Loaders

ForceTheme

+ForceTheme | React18 Loaders

ForceTheme

diff --git a/docs/functions/server_server_target_server_target.ServerTarget.html b/docs/functions/server_server_target_server_target.ServerTarget.html index 70d8fa38..6a4aafaa 100644 --- a/docs/functions/server_server_target_server_target.ServerTarget.html +++ b/docs/functions/server_server_target_server_target.ServerTarget.html @@ -2,4 +2,4 @@
<html>
...
<body>
<ServerTarget />
...
</body>
</html>
-
+
diff --git a/docs/interfaces/client_color_switch_color_switch._internal_.ColorSwitchProps.html b/docs/interfaces/client_color_switch_color_switch._internal_.ColorSwitchProps.html index 5d51277d..a85cd3b9 100644 --- a/docs/interfaces/client_color_switch_color_switch._internal_.ColorSwitchProps.html +++ b/docs/interfaces/client_color_switch_color_switch._internal_.ColorSwitchProps.html @@ -1,7 +1,7 @@ -ColorSwitchProps | React18 Loaders
interface ColorSwitchProps {
    size?: number;
    skipSystem?: boolean;
    targetId?: string;
}

Hierarchy

Properties

size? +ColorSwitchProps | React18 Loaders
interface ColorSwitchProps {
    size?: number;
    skipSystem?: boolean;
    targetId?: string;
}

Hierarchy

Properties

size?: number

Diameter of the color switch

-
skipSystem?: boolean

Skip system colorScheme while toggling

-
targetId?: string

id of target element if you are applying theme only to specific container. Should be same as corresponding ThemeSwitcher, etc.

-
+
skipSystem?: boolean

Skip system colorScheme while toggling

+
targetId?: string

id of target element if you are applying theme only to specific container. Should be same as corresponding ThemeSwitcher, etc.

+
diff --git a/docs/interfaces/client_theme_switcher_theme_switcher.ThemeSwitcherProps.html b/docs/interfaces/client_theme_switcher_theme_switcher.ThemeSwitcherProps.html index 1222aceb..16fe524a 100644 --- a/docs/interfaces/client_theme_switcher_theme_switcher.ThemeSwitcherProps.html +++ b/docs/interfaces/client_theme_switcher_theme_switcher.ThemeSwitcherProps.html @@ -1,9 +1,9 @@ -ThemeSwitcherProps | React18 Loaders
interface ThemeSwitcherProps {
    dontSync?: boolean;
    styles?: Record<string, string>;
    targetId?: string;
    themeTransition?: string;
}

Properties

dontSync? +ThemeSwitcherProps | React18 Loaders
interface ThemeSwitcherProps {
    dontSync?: boolean;
    styles?: Record<string, string>;
    targetId?: string;
    themeTransition?: string;
}

Properties

dontSync?: boolean

To stop persisting and syncing theme between tabs.

-
styles?: Record<string, string>

provide styles object imported from CSS/SCSS modules, if you are using CSS/SCSS modules.

-
targetId?: string

id of target element to apply classes to. This is useful when you want to apply theme only to specific container.

-
themeTransition?: string

force apply CSS transition property to all the elements during theme switching. E.g., all .3s

-
+
styles?: Record<string, string>

provide styles object imported from CSS/SCSS modules, if you are using CSS/SCSS modules.

+
targetId?: string

id of target element to apply classes to. This is useful when you want to apply theme only to specific container.

+
themeTransition?: string

force apply CSS transition property to all the elements during theme switching. E.g., all .3s

+
diff --git a/docs/interfaces/constants.ThemeState.html b/docs/interfaces/constants.ThemeState.html index a51c3af7..78f64956 100644 --- a/docs/interfaces/constants.ThemeState.html +++ b/docs/interfaces/constants.ThemeState.html @@ -1,7 +1,7 @@ -ThemeState | React18 Loaders
interface ThemeState {
    c: ColorSchemePreference;
    s: "dark" | "light";
    t: string;
}

Properties

c +ThemeState | React18 Loaders
interface ThemeState {
    c: ColorSchemePreference;
    s: "dark" | "light";
    t: string;
}

Properties

c s t

Properties

ColorSchemePreference

-
s: "dark" | "light"

SystemColorScheme

-
t: string

Theme

-
+
s: "dark" | "light"

SystemColorScheme

+
t: string

Theme

+
diff --git a/docs/interfaces/hooks_use_theme.UseTheme.html b/docs/interfaces/hooks_use_theme.UseTheme.html index ea87970c..eae933d7 100644 --- a/docs/interfaces/hooks_use_theme.UseTheme.html +++ b/docs/interfaces/hooks_use_theme.UseTheme.html @@ -1,7 +1,7 @@ -UseTheme | React18 Loaders
interface UseTheme {
    colorSchemePreference: ColorSchemePreference;
    resolvedColorScheme: "dark" | "light";
    setColorSchemePreference: ((colorSchemePreference: ColorSchemePreference) => void);
    setTheme: ((theme: string) => void);
    systemColorScheme: "dark" | "light";
    theme: string;
}

Properties

colorSchemePreference +UseTheme | React18 Loaders
interface UseTheme {
    colorSchemePreference: ColorSchemePreference;
    resolvedColorScheme: "dark" | "light";
    setColorSchemePreference: ((colorSchemePreference: ColorSchemePreference) => void);
    setTheme: ((theme: string) => void);
    systemColorScheme: "dark" | "light";
    theme: string;
}

Properties

colorSchemePreference: ColorSchemePreference
resolvedColorScheme: "dark" | "light"
setColorSchemePreference: ((colorSchemePreference: ColorSchemePreference) => void)
setTheme: ((theme: string) => void)
systemColorScheme: "dark" | "light"
theme: string
+

Properties

colorSchemePreference: ColorSchemePreference
resolvedColorScheme: "dark" | "light"
setColorSchemePreference: ((colorSchemePreference: ColorSchemePreference) => void)
setTheme: ((theme: string) => void)
systemColorScheme: "dark" | "light"
theme: string
diff --git a/docs/interfaces/server_force_theme_force_theme._internal_.ForceThemeProps.html b/docs/interfaces/server_force_theme_force_theme._internal_.ForceThemeProps.html index 52717650..855deca2 100644 --- a/docs/interfaces/server_force_theme_force_theme._internal_.ForceThemeProps.html +++ b/docs/interfaces/server_force_theme_force_theme._internal_.ForceThemeProps.html @@ -1,10 +1,10 @@ -ForceThemeProps | React18 Loaders
interface ForceThemeProps {
    children?: ReactNode;
    colorScheme?: "dark" | "light";
    styles?: Record<string, string>;
    tag?: keyof IntrinsicElements;
    theme?: string;
}

Hierarchy

Properties

children? +ForceThemeProps | React18 Loaders
interface ForceThemeProps {
    children?: ReactNode;
    colorScheme?: "dark" | "light";
    styles?: Record<string, string>;
    tag?: keyof IntrinsicElements;
    theme?: string;
}

Hierarchy

Properties

children?: ReactNode
colorScheme?: "dark" | "light"
styles?: Record<string, string>

provide styles object if you are using CSS/SCSS modules.

-
tag?: keyof IntrinsicElements
'div'
+

Properties

children?: ReactNode
colorScheme?: "dark" | "light"
styles?: Record<string, string>

provide styles object if you are using CSS/SCSS modules.

+
tag?: keyof IntrinsicElements
'div'
 
-
theme?: string
+
theme?: string
diff --git a/docs/interfaces/server_server_target_server_target._internal_.ServerTargetProps.html b/docs/interfaces/server_server_target_server_target._internal_.ServerTargetProps.html index 3bd94f99..3ade8d20 100644 --- a/docs/interfaces/server_server_target_server_target._internal_.ServerTargetProps.html +++ b/docs/interfaces/server_server_target_server_target._internal_.ServerTargetProps.html @@ -1,13 +1,13 @@ -ServerTargetProps | React18 Loaders
interface ServerTargetProps {
    styles?: Record<string, string>;
    tag?: keyof IntrinsicElements;
    targetId?: string;
}

Properties

styles? +ServerTargetProps | React18 Loaders
interface ServerTargetProps {
    styles?: Record<string, string>;
    tag?: keyof IntrinsicElements;
    targetId?: string;
}

Properties

styles?: Record<string, string>

provide styles object if you are using CSS/SCSS modules.

-
tag?: keyof IntrinsicElements
'div'
+
tag?: keyof IntrinsicElements
'div'
 
-
targetId?: string

id of target element if you are applying theme only to specific container. +

targetId?: string

id of target element if you are applying theme only to specific container. make sure you pass same targetId to corresponding ThemeSwitcher, ColorSwitch and useTheme hook as well.

undefined
 
-
+
diff --git a/docs/modules/client_color_switch_color_switch.html b/docs/modules/client_color_switch_color_switch.html index 4949a927..c102ee03 100644 --- a/docs/modules/client_color_switch_color_switch.html +++ b/docs/modules/client_color_switch_color_switch.html @@ -1,3 +1,3 @@ -client/color-switch/color-switch | React18 Loaders

Module client/color-switch/color-switch

Index

Modules

<internal> +client/color-switch/color-switch | React18 Loaders

Module client/color-switch/color-switch

Index

Modules

Functions

diff --git a/docs/modules/client_theme_switcher_theme_switcher.html b/docs/modules/client_theme_switcher_theme_switcher.html index 971bb08c..de540fe6 100644 --- a/docs/modules/client_theme_switcher_theme_switcher.html +++ b/docs/modules/client_theme_switcher_theme_switcher.html @@ -1,3 +1,3 @@ -client/theme-switcher/theme-switcher | React18 Loaders

Module client/theme-switcher/theme-switcher

Index

Interfaces

ThemeSwitcherProps +client/theme-switcher/theme-switcher | React18 Loaders
diff --git a/docs/modules/constants.html b/docs/modules/constants.html index c87c3ea3..13afec92 100644 --- a/docs/modules/constants.html +++ b/docs/modules/constants.html @@ -1,4 +1,4 @@ -constants | React18 Loaders

Module constants

Index

Interfaces

ThemeState +constants | React18 Loaders

Module constants

Index

Interfaces

Type Aliases

Variables

Functions

useRGSMinify diff --git a/docs/modules/hooks_use_theme.html b/docs/modules/hooks_use_theme.html index 806e1653..5323e823 100644 --- a/docs/modules/hooks_use_theme.html +++ b/docs/modules/hooks_use_theme.html @@ -1,3 +1,3 @@ -hooks/use-theme | React18 Loaders

Module hooks/use-theme

Index

Interfaces

UseTheme +hooks/use-theme | React18 Loaders

Module hooks/use-theme

Index

Interfaces

Functions

diff --git a/docs/modules/hooks_use_theme_test.html b/docs/modules/hooks_use_theme_test.html index ebead62a..690c837b 100644 --- a/docs/modules/hooks_use_theme_test.html +++ b/docs/modules/hooks_use_theme_test.html @@ -1 +1 @@ -hooks/use-theme.test | React18 Loaders
+hooks/use-theme.test | React18 Loaders
diff --git a/docs/modules/server_force_theme_force_theme.html b/docs/modules/server_force_theme_force_theme.html index 475a2684..aefcd7c8 100644 --- a/docs/modules/server_force_theme_force_theme.html +++ b/docs/modules/server_force_theme_force_theme.html @@ -1,3 +1,3 @@ -server/force-theme/force-theme | React18 Loaders

Module server/force-theme/force-theme

Index

Modules

<internal> +server/force-theme/force-theme | React18 Loaders

Module server/force-theme/force-theme

Index

Modules

Functions

diff --git a/docs/modules/server_server_target_server_target.html b/docs/modules/server_server_target_server_target.html index 8377b537..ee03d650 100644 --- a/docs/modules/server_server_target_server_target.html +++ b/docs/modules/server_server_target_server_target.html @@ -1,3 +1,3 @@ -server/server-target/server-target | React18 Loaders

Module server/server-target/server-target

Index

Modules

<internal> +server/server-target/server-target | React18 Loaders

Module server/server-target/server-target

Index

Modules

Functions

diff --git a/docs/types/constants.ColorSchemePreference.html b/docs/types/constants.ColorSchemePreference.html index 87e8865e..29fc2f8b 100644 --- a/docs/types/constants.ColorSchemePreference.html +++ b/docs/types/constants.ColorSchemePreference.html @@ -1 +1 @@ -ColorSchemePreference | React18 Loaders

Type Alias ColorSchemePreference

ColorSchemePreference: "system" | "dark" | "light"
+ColorSchemePreference | React18 Loaders

Type Alias ColorSchemePreference

ColorSchemePreference: "system" | "dark" | "light"
diff --git a/docs/variables/constants.DEFAULT_ID.html b/docs/variables/constants.DEFAULT_ID.html index 13793694..52afd37f 100644 --- a/docs/variables/constants.DEFAULT_ID.html +++ b/docs/variables/constants.DEFAULT_ID.html @@ -1,2 +1,2 @@ DEFAULT_ID | React18 Loaders

Variable DEFAULT_IDConst

DEFAULT_ID = "nthul"

shared constants -- keep in separate files for better tree-shaking and dependency injection

-
+
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 852fcc61..e0d2ad9e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -5552,8 +5552,8 @@ packages: resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==} engines: {node: '>= 0.8.0'} - prettier-plugin-packagejson@2.5.3: - resolution: {integrity: sha512-ATMEEXr+ywls1kgrZEWl4SBPEm0uDdyDAjyNzUC0/Z8WZTD3RqbJcQDR+Dau+wYkW9KHK6zqQIsFyfn+9aduWg==} + prettier-plugin-packagejson@2.5.5: + resolution: {integrity: sha512-SvzImCwDluH29OgD37wDv96milAHhIQuYS+WN3iwQzonR8lqv0su7IdQYfLc3So+0MtuPSCEQF6tZYubTnf7xg==} peerDependencies: prettier: '>= 1.16.0' peerDependenciesMeta: @@ -6043,8 +6043,8 @@ packages: sort-object-keys@1.1.3: resolution: {integrity: sha512-855pvK+VkU7PaKYPc+Jjnmt4EzejQHyhhF33q31qG8x7maDzkeFhAAThdCYay11CISO+qAMwjOBP+fPZe0IPyg==} - sort-package-json@2.10.1: - resolution: {integrity: sha512-d76wfhgUuGypKqY72Unm5LFnMpACbdxXsLPcL27pOsSrmVqH3PztFp1uq+Z22suk15h7vXmTesuh2aEjdCqb5w==} + sort-package-json@2.11.0: + resolution: {integrity: sha512-pBs3n/wcsbnMSiO5EYV4AVnZVtyQslfZ/0v6VbrRRVApqyNf0Uqo4MOXJsBmIplGY1hYZ4bq5qjO9xTgY+K8xw==} hasBin: true source-map-js@1.2.1: @@ -6326,11 +6326,11 @@ packages: title-case@3.0.3: resolution: {integrity: sha512-e1zGYRvbffpcHIrnuqT0Dh+gEJtDaxDSoG4JAIpq4oDFyooziLBIiYQv0GBT4FUAnUop5uZ1hiIAj7oAF6sOCA==} - tldts-core@6.1.61: - resolution: {integrity: sha512-In7VffkDWUPgwa+c9picLUxvb0RltVwTkSgMNFgvlGSWveCzGBemBqTsgJCL4EDFWZ6WH0fKTsot6yNhzy3ZzQ==} + tldts-core@6.1.62: + resolution: {integrity: sha512-ohONqbfobpuaylhqFbtCzc0dFFeNz85FVKSesgT8DS9OV3a25Yj730pTj7/dDtCqmgoCgEj6gDiU9XxgHKQlBw==} - tldts@6.1.61: - resolution: {integrity: sha512-rv8LUyez4Ygkopqn+M6OLItAOT9FF3REpPQDkdMx5ix8w4qkuE7Vo2o/vw1nxKQYmJDV8JpAMJQr1b+lTKf0FA==} + tldts@6.1.62: + resolution: {integrity: sha512-TF+wo3MgTLbf37keEwQD0IxvOZO8UZxnpPJDg5iFGAASGxYzbX/Q0y944ATEjrfxG/pF1TWRHCPbFp49Mz1Y1w==} hasBin: true tmp@0.0.33: @@ -9114,7 +9114,7 @@ snapshots: eslint-plugin-tsdoc: 0.2.17 eslint-plugin-unicorn: 51.0.1(eslint@9.12.0) eslint-plugin-vitest: 0.3.26(@typescript-eslint/eslint-plugin@7.18.0(@typescript-eslint/parser@7.18.0(eslint@9.12.0)(typescript@5.6.3))(eslint@9.12.0)(typescript@5.6.3))(eslint@9.12.0)(typescript@5.6.3)(vitest@2.1.5(@types/node@22.9.1)(jsdom@25.0.1)(sass@1.81.0)) - prettier-plugin-packagejson: 2.5.3(prettier@3.3.3) + prettier-plugin-packagejson: 2.5.5(prettier@3.3.3) optionalDependencies: '@next/eslint-plugin-next': 14.2.15 eslint: 9.12.0 @@ -13413,9 +13413,9 @@ snapshots: prelude-ls@1.2.1: {} - prettier-plugin-packagejson@2.5.3(prettier@3.3.3): + prettier-plugin-packagejson@2.5.5(prettier@3.3.3): dependencies: - sort-package-json: 2.10.1 + sort-package-json: 2.11.0 synckit: 0.9.2 optionalDependencies: prettier: 3.3.3 @@ -14033,16 +14033,16 @@ snapshots: sort-object-keys@1.1.3: {} - sort-package-json@2.10.1: + sort-package-json@2.11.0: dependencies: detect-indent: 7.0.1 detect-newline: 4.0.1 get-stdin: 9.0.0 git-hooks-list: 3.1.0 - globby: 13.2.2 is-plain-obj: 4.1.0 semver: 7.6.3 sort-object-keys: 1.1.3 + tinyglobby: 0.2.10 source-map-js@1.2.1: {} @@ -14339,11 +14339,11 @@ snapshots: dependencies: tslib: 2.8.1 - tldts-core@6.1.61: {} + tldts-core@6.1.62: {} - tldts@6.1.61: + tldts@6.1.62: dependencies: - tldts-core: 6.1.61 + tldts-core: 6.1.62 tmp@0.0.33: dependencies: @@ -14368,7 +14368,7 @@ snapshots: tough-cookie@5.0.0: dependencies: - tldts: 6.1.61 + tldts: 6.1.62 tr46@1.0.1: dependencies: