diff --git a/docs/functions/client_color_switch_color_switch.ColorSwitch.html b/docs/functions/client_color_switch_color_switch.ColorSwitch.html index ef45c419..f82d29eb 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 @@

Sourceexport 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"
/>
);
}; -

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 757e0f52..65f879fa 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

Function ThemeSwitcher

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

-

Settings

Member Visibility
+

Settings

Member Visibility
diff --git a/docs/functions/constants.useRGSMinify.html b/docs/functions/constants.useRGSMinify.html index a24a16bf..09d3cb0e 100644 --- a/docs/functions/constants.useRGSMinify.html +++ b/docs/functions/constants.useRGSMinify.html @@ -1,2 +1,2 @@ useRGSMinify | React18 Loaders

Function useRGSMinify

To avoid multiple r18gs imports

-

Settings

Member Visibility
+

Settings

Member Visibility
diff --git a/docs/functions/hooks_use_theme.useTheme-1.html b/docs/functions/hooks_use_theme.useTheme-1.html index d58a5551..e9de315d 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

Function useTheme

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

  • useTheme(targetId?): UseTheme

  • Parameters

    • OptionaltargetId: string

      targetId corresponding to ThemeSwitcher and others tied to specific container.

    Returns UseTheme

    themeState and setter fucntions

    -

Settings

Member Visibility
+

Settings

Member Visibility
diff --git a/docs/functions/server_force_theme_force_theme.ForceTheme.html b/docs/functions/server_force_theme_force_theme.ForceTheme.html index 4162c325..c6c8277a 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

Function ForceTheme

ForceTheme

Settings

Member Visibility

On This Page

ForceTheme
+ForceTheme | React18 Loaders

Function ForceTheme

ForceTheme

Settings

Member Visibility

On This Page

ForceTheme
diff --git a/docs/functions/server_server_target_server_target.ServerTarget.html b/docs/functions/server_server_target_server_target.ServerTarget.html index f775e677..2a4d8f1a 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 @@

Example

<html>
  ...
  <body>
    <ServerTarget />
    ...
  </body>
</html>
-

Settings

Member Visibility
+

Settings

Member Visibility
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 032d871d..9706ad3d 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

interface ColorSwitchProps {
    size?: number;
    skipSystem?: boolean;
    targetId?: string;
}

Hierarchy

Properties

size? +ColorSwitchProps | React18 Loaders

Interface ColorSwitchProps

interface ColorSwitchProps {
    size?: number;
    skipSystem?: boolean;
    targetId?: string;
}

Hierarchy

Properties

size? skipSystem? targetId?

Properties

Optionalsize

size?: number

Diameter of the color switch

-

OptionalskipSystem

skipSystem?: boolean

Skip system colorScheme while toggling

-

OptionaltargetId

targetId?: string

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

-

Settings

Member Visibility

On This Page

Properties
+

OptionalskipSystem

skipSystem?: boolean

Skip system colorScheme while toggling

+

OptionaltargetId

targetId?: string

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

+

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 8af04332..1c800e7b 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

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

Properties

dontSync? +ThemeSwitcherProps | React18 Loaders

Interface ThemeSwitcherProps

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

Properties

dontSync? styles? targetId? themeTransition?

Properties

OptionaldontSync

dontSync?: boolean

To stop persisting and syncing theme between tabs.

-

Optionalstyles

styles?: Record<string, string>

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

-

OptionaltargetId

targetId?: string

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

-

OptionalthemeTransition

themeTransition?: string

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

-

Settings

Member Visibility

On This Page

Properties
+

Optionalstyles

styles?: Record<string, string>

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

+

OptionaltargetId

targetId?: string

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

+

OptionalthemeTransition

themeTransition?: string

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

+

Settings

Member Visibility

On This Page

Properties
diff --git a/docs/interfaces/constants.ThemeState.html b/docs/interfaces/constants.ThemeState.html index 928a8216..a66c21c7 100644 --- a/docs/interfaces/constants.ThemeState.html +++ b/docs/interfaces/constants.ThemeState.html @@ -1,7 +1,7 @@ -ThemeState | React18 Loaders

Interface ThemeState

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

Properties

c +ThemeState | React18 Loaders

Interface ThemeState

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

Properties

c s t

Properties

c

c: ColorSchemePreference

ColorSchemePreference

-

s

s: "dark" | "light"

SystemColorScheme

-

t

t: string

Theme

-

Settings

Member Visibility

On This Page

Properties
+

s

s: "dark" | "light"

SystemColorScheme

+

t

t: string

Theme

+

Settings

Member Visibility

On This Page

Properties
diff --git a/docs/interfaces/hooks_use_theme.UseTheme.html b/docs/interfaces/hooks_use_theme.UseTheme.html index dc53c0d5..ba04fa3d 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

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

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

Properties

colorSchemePreference resolvedColorScheme setColorSchemePreference setTheme systemColorScheme theme -

Properties

colorSchemePreference

colorSchemePreference: ColorSchemePreference

resolvedColorScheme

resolvedColorScheme: "dark" | "light"

setColorSchemePreference

setColorSchemePreference: ((colorSchemePreference: ColorSchemePreference) => void)

setTheme

setTheme: ((theme: string) => void)

systemColorScheme

systemColorScheme: "dark" | "light"

theme

theme: string

Settings

Member Visibility

On This Page

Properties
+

Properties

colorSchemePreference

colorSchemePreference: ColorSchemePreference

resolvedColorScheme

resolvedColorScheme: "dark" | "light"

setColorSchemePreference

setColorSchemePreference: ((colorSchemePreference: ColorSchemePreference) => void)

setTheme

setTheme: ((theme: string) => void)

systemColorScheme

systemColorScheme: "dark" | "light"

theme

theme: string

Settings

Member Visibility

On This Page

Properties
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 8fe69541..d9163f66 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

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

Hierarchy

Properties

children? +ForceThemeProps | React18 Loaders

Interface ForceThemeProps

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

Hierarchy

Properties

children? colorScheme? styles? tag? theme? -

Properties

Optionalchildren

children?: ReactNode

OptionalcolorScheme

colorScheme?: "dark" | "light"

Optionalstyles

styles?: Record<string, string>

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

-

Optionaltag

tag?: keyof IntrinsicElements

Default Value

'div'
+

Properties

Optionalchildren

children?: ReactNode

OptionalcolorScheme

colorScheme?: "dark" | "light"

Optionalstyles

styles?: Record<string, string>

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

+

Optionaltag

tag?: keyof IntrinsicElements

Default Value

'div'
-

Optionaltheme

theme?: string

Settings

Member Visibility

On This Page

Properties
+

Optionaltheme

theme?: string

Settings

Member Visibility

On This Page

Properties
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 3480e022..442ce29f 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

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

Properties

styles? +ServerTargetProps | React18 Loaders

Interface ServerTargetProps

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

Properties

styles? tag? targetId?

Properties

Optionalstyles

styles?: Record<string, string>

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

-

Optionaltag

tag?: keyof IntrinsicElements

Default Value

'div'
+

Optionaltag

tag?: keyof IntrinsicElements

Default Value

'div'
-

OptionaltargetId

targetId?: string

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

OptionaltargetId

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.

Default Value

undefined
-

Settings

Member Visibility

On This Page

Properties
+

Settings

Member Visibility

On This Page

Properties
diff --git a/docs/modules/client_color_switch_color_switch.html b/docs/modules/client_color_switch_color_switch.html index 660365d7..f8c1b2bf 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

<internal>

Functions

ColorSwitch

Settings

Member Visibility
diff --git a/docs/modules/client_theme_switcher_theme_switcher.html b/docs/modules/client_theme_switcher_theme_switcher.html index 007d70f7..49499284 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

Module client/theme-switcher/theme-switcher

Index

Interfaces

ThemeSwitcherProps

Functions

ThemeSwitcher

Settings

Member Visibility
diff --git a/docs/modules/constants.html b/docs/modules/constants.html index 6a773797..29be09c7 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

ThemeState

Type Aliases

ColorSchemePreference

Variables

DEFAULT_ID

Functions

useRGSMinify diff --git a/docs/modules/hooks_use_theme.html b/docs/modules/hooks_use_theme.html index 414f030e..9258f69e 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

UseTheme

Functions

useTheme

Settings

Member Visibility
diff --git a/docs/modules/hooks_use_theme_test.html b/docs/modules/hooks_use_theme_test.html index 07fa6322..88814e6c 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

Module hooks/use-theme.test

Settings

Member Visibility
+hooks/use-theme.test | React18 Loaders

Module hooks/use-theme.test

Settings

Member Visibility
diff --git a/docs/modules/server_force_theme_force_theme.html b/docs/modules/server_force_theme_force_theme.html index 9f84b864..b3920c21 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

<internal>

Functions

ForceTheme

Settings

Member Visibility
diff --git a/docs/modules/server_server_target_server_target.html b/docs/modules/server_server_target_server_target.html index 11f4c664..bc745bce 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

<internal>

Functions

ServerTarget

Settings

Member Visibility
diff --git a/docs/types/constants.ColorSchemePreference.html b/docs/types/constants.ColorSchemePreference.html index 36fb3785..2853d85d 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"

Settings

Member Visibility
+ColorSchemePreference | React18 Loaders

Type Alias ColorSchemePreference

ColorSchemePreference: "system" | "dark" | "light"

Settings

Member Visibility
diff --git a/docs/variables/constants.DEFAULT_ID.html b/docs/variables/constants.DEFAULT_ID.html index fe0cd974..1911a081 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" = "nthul"

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

-

Settings

Member Visibility
+

Settings

Member Visibility
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4070b843..aaf2cfa6 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -5479,8 +5479,8 @@ packages: resolution: {integrity: sha512-iETxpjK6YoRWJG5o6hXLwvjYAoW+FEZn9os0PD/b6AP6xQwsa/Y7lCVgIixBbUPMfhu+i2LtdeAqVTgGlQarfA==} hasBin: true - regexp.prototype.flags@1.5.2: - resolution: {integrity: sha512-NcDiDkTLuPR+++OCKB0nWafEmhg/Da8aUPLPMQbK+bxKKCm1/S5he+AqYa4PlMCVBalb4/yxIRub6qkEx5yJbw==} + regexp.prototype.flags@1.5.3: + resolution: {integrity: sha512-vqlC04+RQoFalODCbCumG2xIOvapzVMHwsyIGM/SIE8fRhFFsXeH8/QQ+s0T0kDAhKc4k30s73/0ydkHQz6HlQ==} engines: {node: '>= 0.4'} regjsparser@0.10.0: @@ -9372,7 +9372,7 @@ snapshots: object-is: 1.1.6 object-keys: 1.1.1 object.assign: 4.1.5 - regexp.prototype.flags: 1.5.2 + regexp.prototype.flags: 1.5.3 side-channel: 1.0.6 which-boxed-primitive: 1.0.2 which-collection: 1.0.2 @@ -9550,7 +9550,7 @@ snapshots: object-inspect: 1.13.2 object-keys: 1.1.1 object.assign: 4.1.5 - regexp.prototype.flags: 1.5.2 + regexp.prototype.flags: 1.5.3 safe-array-concat: 1.1.2 safe-regex-test: 1.0.3 string.prototype.trim: 1.2.9 @@ -13120,7 +13120,7 @@ snapshots: regexp-tree@0.1.27: {} - regexp.prototype.flags@1.5.2: + regexp.prototype.flags@1.5.3: dependencies: call-bind: 1.0.7 define-properties: 1.2.1 @@ -13555,7 +13555,7 @@ snapshots: gopd: 1.0.1 has-symbols: 1.0.3 internal-slot: 1.0.7 - regexp.prototype.flags: 1.5.2 + regexp.prototype.flags: 1.5.3 set-function-name: 2.0.2 side-channel: 1.0.6