diff --git a/docs/functions/client_color_switch_color_switch.ColorSwitch.html b/docs/functions/client_color_switch_color_switch.ColorSwitch.html index 96370e8d..b540447a 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 6fb4fabf..687a67e9 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 ab13e5c2..bd73d070 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 1373d18a..44576b5d 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 7b47fd5f..6e4f8e11 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 0c0ff1ec..e7d0b8d7 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 404fb5c0..91019b1c 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 a2925d8a..2150b844 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 2ffd6616..4b532ddc 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 b3430793..dd672294 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 0c3adfb5..da3f2b3b 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 d4967d17..a8af3d20 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 bd7de297..59d3620a 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 7c30aeed..089411c7 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 0a0e52e5..3a18cbc9 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 507db5d1..a1c49339 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 44fc5abb..8a9991e2 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 3cca30e1..3ce5896c 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 2308fcb6..640ca28a 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 85d2a0a4..cdd715ff 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 5b02ac7f..1f419d01 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 601df21d..f4fab388 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -5326,8 +5326,8 @@ packages: package-json-from-dist@1.0.1: resolution: {integrity: sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==} - package-manager-detector@0.2.4: - resolution: {integrity: sha512-H/OUu9/zUfP89z1APcBf2X8Us0tt8dUK4lUmKqz12QNXif3DxAs1/YqjGtcutZi1zQqeNQRWr9C+EbQnnvSSFA==} + package-manager-detector@0.2.5: + resolution: {integrity: sha512-3dS7y28uua+UDbRCLBqltMBrbI+A5U2mI9YuxHRxIWYmLj3DwntEBmERYzIAQ4DMeuCUOBSak7dBHHoXKpOTYQ==} pako@0.2.9: resolution: {integrity: sha512-NUcwaKxUxWrZLpDG+z/xZaCgQITkA/Dv4V/T6bw7VON6l1Xz/VnrBqrYjZQ12TamKHzITTfOEIYUj48y2KXImA==} @@ -6381,8 +6381,8 @@ packages: trough@2.2.0: resolution: {integrity: sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw==} - ts-api-utils@1.4.0: - resolution: {integrity: sha512-032cPxaEKwM+GT3vA5JXNzIaizx388rhsSW79vGRNGXfRRAdEAn2mvk36PvK5HnOchyWZ7afLEXqYCvPCrzuzQ==} + ts-api-utils@1.4.1: + resolution: {integrity: sha512-5RU2/lxTA3YUZxju61HO2U6EoZLvBLtmV2mbTvqyu4a/7s7RmJPT+1YekhMVsQhznRWk/czIwDUg+V8Q9ZuG4w==} engines: {node: '>=16'} peerDependencies: typescript: '>=4.2.0' @@ -7439,7 +7439,7 @@ snapshots: fs-extra: 7.0.1 mri: 1.2.0 p-limit: 2.3.0 - package-manager-detector: 0.2.4 + package-manager-detector: 0.2.5 picocolors: 1.1.1 resolve-from: 5.0.0 semver: 7.6.3 @@ -8878,7 +8878,7 @@ snapshots: graphemer: 1.4.0 ignore: 5.3.2 natural-compare: 1.4.0 - ts-api-utils: 1.4.0(typescript@5.7.2) + ts-api-utils: 1.4.1(typescript@5.7.2) optionalDependencies: typescript: 5.7.2 transitivePeerDependencies: @@ -8918,7 +8918,7 @@ snapshots: '@typescript-eslint/utils': 7.18.0(eslint@9.12.0)(typescript@5.7.2) debug: 4.3.7 eslint: 9.12.0 - ts-api-utils: 1.4.0(typescript@5.7.2) + ts-api-utils: 1.4.1(typescript@5.7.2) optionalDependencies: typescript: 5.7.2 transitivePeerDependencies: @@ -8953,7 +8953,7 @@ snapshots: is-glob: 4.0.3 minimatch: 9.0.5 semver: 7.6.3 - ts-api-utils: 1.4.0(typescript@5.7.2) + ts-api-utils: 1.4.1(typescript@5.7.2) optionalDependencies: typescript: 5.7.2 transitivePeerDependencies: @@ -8968,7 +8968,7 @@ snapshots: is-glob: 4.0.3 minimatch: 9.0.5 semver: 7.6.3 - ts-api-utils: 1.4.0(typescript@5.7.2) + ts-api-utils: 1.4.1(typescript@5.7.2) optionalDependencies: typescript: 5.7.2 transitivePeerDependencies: @@ -13191,7 +13191,7 @@ snapshots: package-json-from-dist@1.0.1: {} - package-manager-detector@0.2.4: {} + package-manager-detector@0.2.5: {} pako@0.2.9: {} @@ -14389,7 +14389,7 @@ snapshots: trough@2.2.0: {} - ts-api-utils@1.4.0(typescript@5.7.2): + ts-api-utils@1.4.1(typescript@5.7.2): dependencies: typescript: 5.7.2