diff --git a/docs/functions/client_color-switch_color-switch.ColorSwitch.html b/docs/functions/client_color-switch_color-switch.ColorSwitch.html index 10ba1ef9..7fbc0267 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 9af422d7..9ea926bb 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 435592b7..dcfcd4c0 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 b745728c..653352ee 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 2bac2aee..fcedab05 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 1cd62363..0461c15f 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 089e8d03..f80b29e1 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 4ede3a8b..a8b7e3d4 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 4fe01317..b4621da3 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 ab69862f..80203bbf 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 38bd7cbd..e18ccac7 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?: undefined;
    theme?: string;
}

Hierarchy

Properties

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

Hierarchy

Properties

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

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

-
tag?: undefined
'div'
+

Properties

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

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

+
tag?: undefined
'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 28722047..389335a5 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?: undefined;
    targetId?: string;
}

Properties

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

Properties

styles?: Record<string, string>

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

-
tag?: undefined
'div'
+
tag?: undefined
'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/types/constants.ColorSchemePreference.html b/docs/types/constants.ColorSchemePreference.html index 33eba522..c2434483 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 8f5504f3..2c40e7d7 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

-
+