diff --git a/docs/functions/client_color_switch_color_switch.ColorSwitch.html b/docs/functions/client_color_switch_color_switch.ColorSwitch.html index 2d6a119d..30a96954 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 11bf58ec..d934a256 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 fd091894..191d47b0 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 8f821a52..1d157d2c 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 72a6233e..0ab969c5 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 90a2a7d2..f907a5c5 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 2112ec0a..93815a6d 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 e9eb5d0c..d2c3e875 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 54d49045..e491a3e4 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 81b7fb4a..a00fee8f 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 f1da3dce..bf4c1a3d 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 016e4fd1..3dbaae2d 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 63beec06..05b3ef6f 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 ab33683d..649c3a96 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 5ee2c553..3f634347 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 e6a1b7b4..e8aa387c 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 8e35d40b..5b057e5d 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 fb5e0b3d..d464948b 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 c28735a3..b4df8330 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 aef4eedb..1e5790dc 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 4fe8795d..7eab3c39 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 cf211658..8c8912a1 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1618,20 +1618,20 @@ packages: '@rushstack/eslint-patch@1.10.4': resolution: {integrity: sha512-WJgX9nzTqknM393q1QJDJmoW28kUfEnybeTfVNcNAPnIx210RXm2DiXiHzfNPJNIUUb1tJnz/l4QGtJ30PgWmA==} - '@shikijs/core@1.21.0': - resolution: {integrity: sha512-zAPMJdiGuqXpZQ+pWNezQAk5xhzRXBNiECFPcJLtUdsFM3f//G95Z15EHTnHchYycU8kIIysqGgxp8OVSj1SPQ==} + '@shikijs/core@1.21.1': + resolution: {integrity: sha512-scBQo4V4O4WZLEDg11e75UPmXoCMq4Ya2A16U6efi/aTiR4o7T/GMNWZs2rq1U8dEvFKGxJZxiUy+tXgmr/4vw==} - '@shikijs/engine-javascript@1.21.0': - resolution: {integrity: sha512-jxQHNtVP17edFW4/0vICqAVLDAxmyV31MQJL4U/Kg+heQALeKYVOWo0sMmEZ18FqBt+9UCdyqGKYE7bLRtk9mg==} + '@shikijs/engine-javascript@1.21.1': + resolution: {integrity: sha512-29EG4KYKlAona8yikEx8uoKbK7N2YoXUO26LS1GOIxpMMIAlQS9UFONg95lkGmIfp1rRcvCvSpYYIJ/blsQxvg==} - '@shikijs/engine-oniguruma@1.21.0': - resolution: {integrity: sha512-AIZ76XocENCrtYzVU7S4GY/HL+tgHGbVU+qhiDyNw1qgCA5OSi4B4+HY4BtAoJSMGuD/L5hfTzoRVbzEm2WTvg==} + '@shikijs/engine-oniguruma@1.21.1': + resolution: {integrity: sha512-PvfEtXCDbQZc9ud0SC0bPiuMbul44Cv0Ky2go4SsvVkYAAKYJsMe/Hx7nxThW8yS0r+w8USa0WfOtQKsD9DU9A==} - '@shikijs/types@1.21.0': - resolution: {integrity: sha512-tzndANDhi5DUndBtpojEq/42+dpUF2wS7wdCDQaFtIXm3Rd1QkrcVgSSRLOvEwexekihOXfbYJINW37g96tJRw==} + '@shikijs/types@1.21.1': + resolution: {integrity: sha512-yLuTJTCHmYznerJ0nxF+f2rBKHQf2FMAd08QL/3du2xNBy/7yQ8CjuKN4Zc+Pk0vfIFzdBoxdzvEXE4JtXoR4Q==} - '@shikijs/vscode-textmate@9.2.2': - resolution: {integrity: sha512-TMp15K+GGYrWlZM8+Lnj9EaHEFmOen0WJBrfa17hF7taDOYthuPPV0GWzfd/9iMij0akS/8Yw2ikquH7uVi/fg==} + '@shikijs/vscode-textmate@9.3.0': + resolution: {integrity: sha512-jn7/7ky30idSkd/O5yDBfAnVt+JJpepofP/POZ1iMOxK59cOfqIgg/Dj0eFsjOTMw+4ycJN0uhZH/Eb0bs/EUA==} '@sinclair/typebox@0.27.8': resolution: {integrity: sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==} @@ -5693,8 +5693,8 @@ packages: resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==} engines: {node: '>=8'} - shiki@1.21.0: - resolution: {integrity: sha512-apCH5BoWTrmHDPGgg3RF8+HAAbEL/CdbYr8rMw7eIrdhCkZHdVGat5mMNlRtd1erNG01VPMIKHNQ0Pj2HMAiog==} + shiki@1.21.1: + resolution: {integrity: sha512-jSOKRHyQJxGOW3kJflmwzHJbp/kjg6hP8LYuVbCPw5oyX+fSNNoCywvcCD3w9eHbj2rvNljt7YMa5BP5Xi+nHg==} side-channel@1.0.6: resolution: {integrity: sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==} @@ -8127,32 +8127,32 @@ snapshots: '@rushstack/eslint-patch@1.10.4': {} - '@shikijs/core@1.21.0': + '@shikijs/core@1.21.1': dependencies: - '@shikijs/engine-javascript': 1.21.0 - '@shikijs/engine-oniguruma': 1.21.0 - '@shikijs/types': 1.21.0 - '@shikijs/vscode-textmate': 9.2.2 + '@shikijs/engine-javascript': 1.21.1 + '@shikijs/engine-oniguruma': 1.21.1 + '@shikijs/types': 1.21.1 + '@shikijs/vscode-textmate': 9.3.0 '@types/hast': 3.0.4 hast-util-to-html: 9.0.3 - '@shikijs/engine-javascript@1.21.0': + '@shikijs/engine-javascript@1.21.1': dependencies: - '@shikijs/types': 1.21.0 - '@shikijs/vscode-textmate': 9.2.2 + '@shikijs/types': 1.21.1 + '@shikijs/vscode-textmate': 9.3.0 oniguruma-to-js: 0.4.3 - '@shikijs/engine-oniguruma@1.21.0': + '@shikijs/engine-oniguruma@1.21.1': dependencies: - '@shikijs/types': 1.21.0 - '@shikijs/vscode-textmate': 9.2.2 + '@shikijs/types': 1.21.1 + '@shikijs/vscode-textmate': 9.3.0 - '@shikijs/types@1.21.0': + '@shikijs/types@1.21.1': dependencies: - '@shikijs/vscode-textmate': 9.2.2 + '@shikijs/vscode-textmate': 9.3.0 '@types/hast': 3.0.4 - '@shikijs/vscode-textmate@9.2.2': {} + '@shikijs/vscode-textmate@9.3.0': {} '@sinclair/typebox@0.27.8': {} @@ -13399,13 +13399,13 @@ snapshots: shebang-regex@3.0.0: {} - shiki@1.21.0: + shiki@1.21.1: dependencies: - '@shikijs/core': 1.21.0 - '@shikijs/engine-javascript': 1.21.0 - '@shikijs/engine-oniguruma': 1.21.0 - '@shikijs/types': 1.21.0 - '@shikijs/vscode-textmate': 9.2.2 + '@shikijs/core': 1.21.1 + '@shikijs/engine-javascript': 1.21.1 + '@shikijs/engine-oniguruma': 1.21.1 + '@shikijs/types': 1.21.1 + '@shikijs/vscode-textmate': 9.3.0 '@types/hast': 3.0.4 side-channel@1.0.6: @@ -14004,7 +14004,7 @@ snapshots: lunr: 2.3.9 markdown-it: 14.1.0 minimatch: 9.0.5 - shiki: 1.21.0 + shiki: 1.21.1 typescript: 5.6.2 yaml: 2.5.1