Function ColorSwitch
- Color
Switch(__namedParameters): Element Parameters
- __namedParameters: ColorSwitchProps
Returns Element
- Color
Switch(__namedParameters): Element Parameters
- __namedParameters: ColorSwitchProps
Returns Element
Function ForceColorScheme
- Force
Color Scheme(props): null Force color scheme on a page
-Parameters
- props: {
    colorScheme: ColorSchemeType;
}color
Scheme: ColorSchemeType
Returns null
- props: {
Function ForceColorScheme
Force color scheme on a page
+- Force
Color Scheme(props): null Parameters
- props: {
    colorScheme: ColorSchemeType;
}color
Scheme: ColorSchemeType
Returns null
- props: {
\ No newline at end of file
+
\ No newline at end of file
diff --git a/docs/functions/client_theme_switcher_no_fouc.noFOUCScript.html b/docs/functions/client_theme_switcher_no_fouc.noFOUCScript.html
index 2750fe96..268ef92c 100644
--- a/docs/functions/client_theme_switcher_no_fouc.noFOUCScript.html
+++ b/docs/functions/client_theme_switcher_no_fouc.noFOUCScript.html
@@ -1,2 +1,2 @@
-
Function noFOUCScript
- noFOUCScript(key, initialState, styles?, forcedTheme_?, forcedColorScheme_?): void
Script to be injected for avoiding FOUC
-Parameters
- key: string
- initialState: ThemeStoreType
Optionalstyles: Record<string, string>OptionalforcedTheme_: stringOptionalforcedColorScheme_: ColorSchemeType
Returns void
Function noFOUCScript
Script to be injected for avoiding FOUC
+- noFOUCScript(key, initialState, styles?, forcedTheme_?, forcedColorScheme_?): void
Parameters
- key: string
- initialState: ThemeStoreType
Optionalstyles: Record<string, string>OptionalforcedTheme_: stringOptionalforcedColorScheme_: ColorSchemeType
Returns void
Function ThemeSwitcher
- Theme
Switcher(__namedParameters): Element Parameters
- __namedParameters: ThemeSwitcherProps
Returns Element
Example
-<ThemeSwitcher /> -Source
-
+
- Source code
ThemeSwitcher | React18 Loaders \ No newline at end of file +Function ThemeSwitcher
Example
+ +<ThemeSwitcher /> +Source
-const ThemeSwitcher = ({
forcedTheme,
forcedColorScheme,
targetSelector,
themeTransition,
styles,
nonce,
}: ThemeSwitcherProps) => {
const k = targetSelector || `#${DEFAULT_ID}`;
// handle client side exceptions when script is not run. <- for client side apps like vite or CRA
if (typeof window !== "undefined" && !window.m)
noFOUCScript(k, initialState, styles, forcedTheme, forcedColorScheme);
const [state, setState] = useThemeStore(targetSelector);
const [forced] = useForcedStore(targetSelector);
useEffect(() => {
media.addEventListener("change", () =>
setState(state => ({ ...state, s: media.matches ? DARK : LIGHT })),
);
addEventListener("storage", e => {
if (e.key === k) setState(state => ({ ...state, ...JSON.parse(e.newValue || "{}") }));
});
}, []);
useEffect(() => {
const restoreThansitions = modifyTransition(themeTransition);
updateDOM(resolveTheme(state));
restoreThansitions();
localStorage.setItem(k, JSON.stringify(state));
}, [state]);
useEffect(() => {
updateForcedProps(forcedTheme, forcedColorScheme);
updateDOM(resolveTheme(state));
}, [forcedColorScheme, forcedTheme]);
useEffect(() => {
updateForcedState(forced.f, forced.fc);
updateDOM(resolveTheme(state));
}, [forced]);
return <Script {...{ k, n: nonce, s: styles, t: forcedTheme, c: forcedColorScheme }} />;
} -
+ +const ThemeSwitcher = ({
forcedTheme,
forcedColorScheme,
targetSelector,
themeTransition,
styles,
nonce,
}: ThemeSwitcherProps) => {
const k = targetSelector || `#${DEFAULT_ID}`;
// handle client side exceptions when script is not run. <- for client side apps like vite or CRA
if (typeof window !== "undefined" && !window.m)
noFOUCScript(k, initialState, styles, forcedTheme, forcedColorScheme);
const [state, setState] = useThemeStore(targetSelector);
const [forced] = useForcedStore(targetSelector);
useEffect(() => {
media.addEventListener("change", () =>
setState(state => ({ ...state, s: media.matches ? DARK : LIGHT })),
);
addEventListener("storage", e => {
if (e.key === k) setState(state => ({ ...state, ...JSON.parse(e.newValue || "{}") }));
});
}, []);
useEffect(() => {
const restoreThansitions = modifyTransition(themeTransition);
updateDOM(resolveTheme(state));
restoreThansitions();
localStorage.setItem(k, JSON.stringify(state));
}, [state]);
useEffect(() => {
updateForcedProps(forcedTheme, forcedColorScheme);
updateDOM(resolveTheme(state));
}, [forcedColorScheme, forcedTheme]);
useEffect(() => {
updateForcedState(forced.f, forced.fc);
updateDOM(resolveTheme(state));
}, [forced]);
return <Script {...{ k, n: nonce, s: styles, t: forcedTheme, c: forcedColorScheme }} />;
} +
- Theme
Switcher(__namedParameters): Element Parameters
- __namedParameters: ThemeSwitcherProps
Returns Element
Function useTheme
- use
Theme(targetSelector?): UseThemeYield Parameters
OptionaltargetSelector: string
Returns UseThemeYield
Example
-const [] = useTheme(options); -Source
-
+
- Source code
useTheme | React18 Loaders \ No newline at end of file +Function useTheme
Example
+ +const [] = useTheme(options); +Source
-const useTheme = (targetSelector?: string): UseThemeYield => {
const [state, setState] = useThemeStore(targetSelector);
const [_, setForcedState] = useForcedStore(targetSelector);
useEffect(() => {
resolveTheme = window.r;
}, []);
const setter =
<T>(key: string) =>
(arg: T) =>
setState(state => ({ ...state, [key]: arg }));
const hookResult: UseThemeYield = {
theme: state.t,
darkTheme: state.d,
lightTheme: state.l,
colorSchemePref: state.c,
systemColorScheme: state.s,
resolvedColorScheme: state.c === SYSTEM || state.c === "" ? state.s : state.c,
resolvedTheme: state.t,
setTheme: setter<string>("t"),
setDarkTheme: setter<string>("d"),
setLightTheme: setter<string>("l"),
setThemeSet: ({ darkTheme: d, lightTheme: l }) => setState(state => ({ ...state, d, l })),
setColorSchemePref: setter<ColorSchemeType>("c"),
toggleColorScheme(skipSystem) {
let index = colorSchemes.indexOf(state.c);
const len = colorSchemes.length;
if (index === -1 || (skipSystem && index === len - 1)) index = 0;
setter("c")(colorSchemes[(index + 1) % len]);
},
setForcedColorScheme: forcedColorScheme =>
setForcedState(state => ({ ...state, fc: forcedColorScheme })),
setForcedTheme: forcedTheme => setForcedState(state => ({ ...state, f: forcedTheme })),
};
if (resolveTheme) {
const resolvedValues = resolveTheme(state);
hookResult.resolvedColorScheme = resolvedValues[0];
hookResult.resolvedTheme = resolvedValues[1];
}
return hookResult;
} -
+ +const useTheme = (targetSelector?: string): UseThemeYield => {
const [state, setState] = useThemeStore(targetSelector);
const [_, setForcedState] = useForcedStore(targetSelector);
useEffect(() => {
resolveTheme = window.r;
}, []);
const setter =
<T>(key: string) =>
(arg: T) =>
setState(state => ({ ...state, [key]: arg }));
const hookResult: UseThemeYield = {
theme: state.t,
darkTheme: state.d,
lightTheme: state.l,
colorSchemePref: state.c,
systemColorScheme: state.s,
resolvedColorScheme: state.c === SYSTEM || state.c === "" ? state.s : state.c,
resolvedTheme: state.t,
setTheme: setter<string>("t"),
setDarkTheme: setter<string>("d"),
setLightTheme: setter<string>("l"),
setThemeSet: ({ darkTheme: d, lightTheme: l }) => setState(state => ({ ...state, d, l })),
setColorSchemePref: setter<ColorSchemeType>("c"),
toggleColorScheme(skipSystem) {
let index = colorSchemes.indexOf(state.c);
const len = colorSchemes.length;
if (index === -1 || (skipSystem && index === len - 1)) index = 0;
setter("c")(colorSchemes[(index + 1) % len]);
},
setForcedColorScheme: forcedColorScheme =>
setForcedState(state => ({ ...state, fc: forcedColorScheme })),
setForcedTheme: forcedTheme => setForcedState(state => ({ ...state, f: forcedTheme })),
};
if (resolveTheme) {
const resolvedValues = resolveTheme(state);
hookResult.resolvedColorScheme = resolvedValues[0];
hookResult.resolvedTheme = resolvedValues[1];
}
return hookResult;
} +
- use
Theme(targetSelector?): UseThemeYield Parameters
OptionaltargetSelector: string
Returns UseThemeYield
Function NextJsSSGThemeSwitcher
- Next
JsSSGTheme Switcher(props): Element Parameters
- props: NextJsSSRThemeSwitcherProps
Returns Element
Deprecated
No longer need to add this component for avoiding FOUC.
+NextJsSSGThemeSwitcher | React18 Loaders \ No newline at end of file +
- Next
JsSSGTheme Switcher(props): Element Parameters
- props: NextJsSSRThemeSwitcherProps
Returns Element
Function ServerSideWrapper
- Server
Side Wrapper(props): Element Parameters
- props: ServerSideWrapperProps
Returns Element
Deprecated
No longer need to add this component for avoiding FOUC.
+ServerSideWrapper | React18 Loaders \ No newline at end of file +
- Server
Side Wrapper(props): Element Parameters
- props: ServerSideWrapperProps
Returns Element
Function useForcedStore
- use
Forced Store(targetSelector?): [ForcedStoreType, SetStateAction<ForcedStoreType>] Parameters
OptionaltargetSelector: string
Returns [ForcedStoreType, SetStateAction<ForcedStoreType>]
Function useForcedStore
- use
Forced Store(targetSelector?): [ForcedStoreType, SetStateAction<ForcedStoreType>] Parameters
OptionaltargetSelector: string
Returns [ForcedStoreType, SetStateAction<ForcedStoreType>]
Function useThemeStore
- use
Theme Store(targetSelector?): [ThemeStoreType, SetStateAction<ThemeStoreType>] internal store
-Parameters
OptionaltargetSelector: string
Returns [ThemeStoreType, SetStateAction<ThemeStoreType>]
Function useThemeStore
internal store
+- use
Theme Store(targetSelector?): [ThemeStoreType, SetStateAction<ThemeStoreType>] Parameters
OptionaltargetSelector: string
Returns [ThemeStoreType, SetStateAction<ThemeStoreType>]
\ No newline at end of file
+
\ No newline at end of file
diff --git a/docs/index.html b/docs/index.html
index 2e8edd92..b772cb95 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -1,11 +1,9 @@
-
React18 Loaders
Next.js Themes 
React18 Loaders
Next.js Themes
Version 3 Short Notes:
Version 3.0 brings minor API changes along with major performance improvements and fixes. We have minimized changes to existing APIs. -Note: react18-themes will now be maintained as nextjs-themes, as server-specific APIs are no longer needed.
🤟 👉 Unleash the Power of React Server Components
- ✅ Perfect dark mode in 2 lines of code @@ -18,8 +16,7 @@
- ✅ Perfect dark mode in 2 lines of code
- ✅ Fully Treeshakable (
import from nextjs-themes/client/component)
@@ -37,106 +34,118 @@
- ✅ Manipulate theme via
useThemehook - ✅ Documented with Typedoc (Docs)
- ✅ Use combinations of [data-th=""] and [data-color-scheme=""] for dark/light variants of themes -
- ✅ Use [data-csp=""] to style based on colorSchemePreference.
- ✅ Use [data-csp=""] to style based on colorSchemePreference.
Motivation and Key Features:
-
-This project was inspired by next-themes. Unlike next-themes, nextjs-themes doesn't require wrapping everything in a provider, allowing you to take full advantage of React 18 Server Components. Additionally, it offers more features and control over your app's theming.
This project was inspired by next-themes. Unlike next-themes, nextjs-themes doesn't require wrapping everything in a provider, allowing you to take full advantage of React 18 Server Components. Additionally, it offers more features and control over your app's theming.
Check out the live example.
Installation
+$ pnpm add nextjs-themes
+$ pnpm add nextjs-themes
-or
-$ npm install nextjs-themes
-$ npm install nextjs-themes
+or
-$ yarn add nextjs-themes
-$ yarn add nextjs-themes
+Want Lite Version?
-
+ $ pnpm add nextjs-themes-lite
+$ pnpm add nextjs-themes-lite
-or
-$ npm install nextjs-themes-lite
-$ npm install nextjs-themes-lite
+or
-$ yarn add nextjs-themes-lite
-$ yarn add nextjs-themes-lite
+Note:
r18gsis a peer dependency
Usage
SPA (e.g., Vite, CRA) and Next.js pages directory (No server components)
To add dark mode support, modify _app.js as follows:
import { ThemeSwitcher } from "nextjs-themes";
function MyApp({ Component, pageProps }) {
return (
<>
<ThemeSwitcher forcedTheme={Component.theme} />
<Component {...pageProps} />
</>
);
}
export default MyApp;
+Usage
SPA (e.g., Vite, CRA) and Next.js pages directory (No server components)
To add dark mode support, modify _app.js as follows:
import { ThemeSwitcher } from "nextjs-themes";
function MyApp({ Component, pageProps }) {
return (
<>
<ThemeSwitcher forcedTheme={Component.theme} />
<Component {...pageProps} />
</>
);
}
export default MyApp;
-⚡🎉Boom! Dark mode is ready in just a couple of lines!
-With Next.js app router (Server Components)
Update app/layout.jsx to add ThemeSwitcher from nextjs-themes:
// app/layout.jsx
import { ThemeSwitcher } from "nextjs-themes";
export default function Layout({ children }) {
return (
<html lang="en">
<head />
<body>
<ThemeSwitcher />
{children}
</body>
</html>
);
}
-With Next.js app router (Server Components)
Update app/layout.jsx to add ThemeSwitcher from nextjs-themes:
// app/layout.jsx
import { ThemeSwitcher } from "nextjs-themes";
export default function Layout({ children }) {
return (
<html lang="en">
<head />
<body>
<ThemeSwitcher />
{children}
</body>
</html>
);
}
+Woohoo! Multiple theme modes with Server Components support!
-HTML & CSS
Next.js app supports dark mode, including System preference with prefers-color-scheme. The theme is synced between tabs, modifying the data-theme attribute on the html element:
:root {
--background: white;
--foreground: black;
}
[data-theme="dark"] {
--background: black;
--foreground: white;
}
-Images
Show different images based on the current theme:
-import Image from "next/image";
import { useTheme } from "nextjs-themes";
function ThemedImage() {
const { resolvedTheme } = useTheme();
const src = resolvedTheme === "light" ? "/light.png" : "/dark.png";
return <Image src={src} width={400} height={400} />;
}
export default ThemedImage;
-useTheme
The useTheme hook provides theme information and allows changing the theme:
import { useTheme } from "nextjs-themes";
const ThemeChanger = () => {
const { theme, setTheme } = useTheme();
return (
<div>
The current theme is: {theme}
<button onClick={() => setTheme("light")}>Light Mode</button>
<button onClick={() => setTheme("dark")}>Dark Mode</button>
</div>
);
};
-HTML & CSS
Next.js app supports dark mode, including System preference with prefers-color-scheme. The theme is synced between tabs, modifying the data-theme attribute on the html element:
:root {
--background: white;
--foreground: black;
}
[data-theme="dark"] {
--background: black;
--foreground: white;
}
+Images
Show different images based on the current theme:
+import Image from "next/image";
import { useTheme } from "nextjs-themes";
function ThemedImage() {
const { resolvedTheme } = useTheme();
const src = resolvedTheme === "light" ? "/light.png" : "/dark.png";
return <Image src={src} width={400} height={400} />;
}
export default ThemedImage;
+useTheme
The useTheme hook provides theme information and allows changing the theme:
import { useTheme } from "nextjs-themes";
const ThemeChanger = () => {
const { theme, setTheme } = useTheme();
return (
<div>
The current theme is: {theme}
<button onClick={() => setTheme("light")}>Light Mode</button>
<button onClick={() => setTheme("dark")}>Dark Mode</button>
</div>
);
};
+The useTheme hook returns the following object:
interface UseThemeYield {
theme: string;
darkTheme: string;
lightTheme: string;
colorSchemePref: ColorSchemeType;
systemColorScheme: ResolvedColorSchemeType;
resolvedColorScheme: ResolvedColorSchemeType;
resolvedTheme: string;
setTheme: (theme: string) => void;
setDarkTheme: (darkTheme: string) => void;
setLightTheme: (lightTheme: string) => void;
setThemeSet: (themeSet: { darkTheme: string; lightTheme: string }) => void;
setColorSchemePref: (colorSchemePref: ColorSchemeType) => void;
toggleColorScheme: (skipSystem?: boolean) => void;
setForcedTheme: (forcedTheme: string) => void;
setForcedColorScheme: (forcedColorScheme: ColorSchemeType) => void;
}
-interface UseThemeYield {
theme: string;
darkTheme: string;
lightTheme: string;
colorSchemePref: ColorSchemeType;
systemColorScheme: ResolvedColorSchemeType;
resolvedColorScheme: ResolvedColorSchemeType;
resolvedTheme: string;
setTheme: (theme: string) => void;
setDarkTheme: (darkTheme: string) => void;
setLightTheme: (lightTheme: string) => void;
setThemeSet: (themeSet: { darkTheme: string; lightTheme: string }) => void;
setColorSchemePref: (colorSchemePref: ColorSchemeType) => void;
toggleColorScheme: (skipSystem?: boolean) => void;
setForcedTheme: (forcedTheme: string) => void;
setForcedColorScheme: (forcedColorScheme: ColorSchemeType) => void;
}
+Force per page theme and color-scheme
+Next.js App Router
import { ForceTheme } from "nextjs-themes";
function MyPage() {
return (
<>
<ForceTheme theme="my-theme" />
...
</>
);
}
export default MyPage;
+Next.js Pages Router
For the pages router, you have two options. The first option is the same as the app router, and the second option, which is compatible with next-themes, involves adding the theme property to your page component like this:
function MyPage() {
return <>...</>;
}
MyPage.theme = "my-theme";
export default MyPage;
+Next.js App Router
import { ForceTheme } from "nextjs-themes";
function MyPage() {
return (
<>
<ForceTheme theme="my-theme" />
...
</>
);
}
export default MyPage;
-Next.js Pages Router
For the pages router, you have two options. The first option is the same as the app router, and the second option, which is compatible with next-themes, involves adding the theme property to your page component like this:
function MyPage() {
return <>...</>;
}
MyPage.theme = "my-theme";
export default MyPage;
-Similarly, you can force a color scheme. This will apply your defaultDark or defaultLight theme, which can be configured via hooks.
With Styled Components and any CSS-in-JS
Next Themes works with any library. For Styled Components, createGlobalStyle in your custom App:
// pages/_app.js
import { createGlobalStyle } from "styled-components";
import { ThemeSwitcher } from "nextjs-themes";
const GlobalStyle = createGlobalStyle`
:root {
--fg: #000;
--bg: #fff;
}
[data-theme="dark"] {
--fg: #fff;
--bg: #000;
}
`;
function MyApp({ Component, pageProps }) {
return (
<>
<GlobalStyle />
<ThemeSwitcher forcedTheme={Component.theme} />
<Component {...pageProps} />
</>
);
}
+With Tailwind
In tailwind.config.js, set the dark mode property to class:
// tailwind.config.js
module.exports = {
darkMode: "class",
};
+With Styled Components and any CSS-in-JS
Next Themes works with any library. For Styled Components, createGlobalStyle in your custom App:
// pages/_app.js
import { createGlobalStyle } from "styled-components";
import { ThemeSwitcher } from "nextjs-themes";
const GlobalStyle = createGlobalStyle`
:root {
--fg: #000;
--bg: #fff;
}
[data-theme="dark"] {
--fg: #fff;
--bg: #000;
}
`;
function MyApp({ Component, pageProps }) {
return (
<>
<GlobalStyle />
<ThemeSwitcher forcedTheme={Component.theme} />
<Component {...pageProps} />
</>
);
}
-With Tailwind
In tailwind.config.js, set the dark mode property to class:
// tailwind.config.js
module.exports = {
darkMode: "class",
};
-⚡🎉Ready to use dark mode in Tailwind!
Caution: Your class must be
"dark", which is the default value used in this library. Tailwind requires the class name"dark"for dark-theme.
Use dark-mode specific classes:
-<h1 className="text-black dark:text-white">
-Migration
-Refer to the migration guide.
++ +<h1 className="text-black dark:text-white"> +Migration
+-Refer to the migration guide.
Docs
-🤩 Don't forget to star this repo!
Want a hands-on course for getting started with Turborepo? Check out React and Next.js with TypeScript
-FAQ
Do I need to use CSS variables with this library?
+Docs
+🤩 Don't forget to star this repo!
Want a hands-on course for getting started with Turborepo? Check out React and Next.js with TypeScript
+FAQ
Do I need to use CSS variables with this library?
No. You can hard code values for every class:
-+.my-class {
color: #555;
}
[data-theme="dark"] .my-class {
color: white;
} -+.my-class {
color: #555;
}
[data-theme="dark"] .my-class {
color: white;
} +Why is
resolvedThemeandresolvedColorSchemenecessary?To reflect the System theme preference and forced theme/colorScheme pages in your UI. For instance, buttons or dropdowns indicating the current colorScheme should say "system" when the System colorScheme preference is active.
-
resolvedThemeis useful for modifying behavior or styles at runtime:+const { resolvedTheme, resolvedColorScheme } = useTheme();
const background = getBackground(resolvedTheme);
<div style={{ color: resolvedColorScheme === 'dark' ? white : black, background }}> -+const { resolvedTheme, resolvedColorScheme } = useTheme();
const background = getBackground(resolvedTheme);
<div style={{ color: resolvedColorScheme === 'dark' ? white : black, background }}> +Without
-resolvedTheme, you would only know the theme is "system", not what it resolved to.License
This library is licensed under the MPL-2.0 open-source license.
+License
This library is licensed under the MPL-2.0 open-source license.
- -with 💖 by Mayank Kumar Chaudhari
with 💖 by Mayank Kumar Chaudhari
Interface ColorSwitchProps
interface ColorSwitchProps {
    size?: number;
    skipSystem?: boolean;
    targetSelector?: string;
}
    size?: number;
    skipSystem?: boolean;
    targetSelector?: string;
}
Hierarchy
- HTMLProps<HTMLButtonElement>
- ColorSwitchProps
Index
Properties
size?
+ColorSwitchProps | React18 Loaders
Interface ColorSwitchProps
interface ColorSwitchProps {
    size?: number;
    skipSystem?: boolean;
    targetSelector?: string;
}
    size?: number;
    skipSystem?: boolean;
    targetSelector?: string;
}
Hierarchy
- HTMLProps<HTMLButtonElement>
- ColorSwitchProps
Index
Properties
Properties
Optional size
size?: number
Diameter of the color switch
-Optional skip
skip
Skip system colorScheme while toggling
-Optional target
target
Interface ThemeSwitcherProps
interface ThemeSwitcherProps {
    forcedColorScheme?: ColorSchemeType;
    forcedTheme?: string;
    nonce?: string;
    styles?: Record<string, string>;
    targetSelector?: string;
    themeTransition?: string;
}
    forcedColorScheme?: ColorSchemeType;
    forcedTheme?: string;
    nonce?: string;
    styles?: Record<string, string>;
    targetSelector?: string;
    themeTransition?: string;
}
Index
Properties
forcedThemeSwitcherProps | React18 Loaders
Interface ThemeSwitcherProps
interface ThemeSwitcherProps {
    forcedColorScheme?: ColorSchemeType;
    forcedTheme?: string;
    nonce?: string;
    styles?: Record<string, string>;
    targetSelector?: string;
    themeTransition?: string;
}
    forcedColorScheme?: ColorSchemeType;
    forcedTheme?: string;
    nonce?: string;
    styles?: Record<string, string>;
    targetSelector?: string;
    themeTransition?: string;
}
Index
Properties
Optional forced
Optional forced
forced
Optional nonce
nonce?: string
The nonce value for your Content Security Policy.
-Default Value
''
-Optional styles
provide styles object imported from CSS/SCSS modules, if you are using CSS/SCSS modules.
-Optional target
target
Optional theme
theme
Properties
Optionalforced
Optionalforced
forced
Optionalnonce
nonce?: string
The nonce value for your Content Security Policy.
+Optionalstyles
provide styles object imported from CSS/SCSS modules, if you are using CSS/SCSS modules.
+Optionaltarget
target
Optionaltheme
theme
Interface UseThemeYield
interface UseThemeYield {
    colorSchemePref: ColorSchemeType;
    darkTheme: string;
    lightTheme: string;
    resolvedColorScheme: ResolvedColorSchemeType;
    resolvedTheme: string;
    setColorSchemePref: ((colorSchemePref) => void);
    setDarkTheme: ((darkTheme) => void);
    setForcedColorScheme: ((forcedColorScheme) => void);
    setForcedTheme: ((forcedTheme) => void);
    setLightTheme: ((lightTheme) => void);
    setTheme: ((theme) => void);
    setThemeSet: ((themeSet) => void);
    systemColorScheme: ResolvedColorSchemeType;
    theme: string;
    toggleColorScheme: ((skipSystem?) => void);
}
    colorSchemePref: ColorSchemeType;
    darkTheme: string;
    lightTheme: string;
    resolvedColorScheme: ResolvedColorSchemeType;
    resolvedTheme: string;
    setColorSchemePref: ((colorSchemePref) => void);
    setDarkTheme: ((darkTheme) => void);
    setForcedColorScheme: ((forcedColorScheme) => void);
    setForcedTheme: ((forcedTheme) => void);
    setLightTheme: ((lightTheme) => void);
    setTheme: ((theme) => void);
    setThemeSet: ((themeSet) => void);
    systemColorScheme: ResolvedColorSchemeType;
    theme: string;
    toggleColorScheme: ((skipSystem?) => void);
}
Index
Properties
colorUseThemeYield | React18 Loaders
color
dark
light
resolved
resolved
set
set
set
set
set
set
set
system
toggle
Interface UseThemeYield
interface UseThemeYield {
    colorSchemePref: ColorSchemeType;
    darkTheme: string;
    lightTheme: string;
    resolvedColorScheme: ResolvedColorSchemeType;
    resolvedTheme: string;
    setColorSchemePref: ((colorSchemePref: ColorSchemeType) => void);
    setDarkTheme: ((darkTheme: string) => void);
    setForcedColorScheme: ((forcedColorScheme: ColorSchemeType) => void);
    setForcedTheme: ((forcedTheme: string) => void);
    setLightTheme: ((lightTheme: string) => void);
    setTheme: ((theme: string) => void);
    setThemeSet: ((themeSet: {
        darkTheme: string;
        lightTheme: string;
    }) => void);
    systemColorScheme: ResolvedColorSchemeType;
    theme: string;
    toggleColorScheme: ((skipSystem?: boolean) => void);
}
    colorSchemePref: ColorSchemeType;
    darkTheme: string;
    lightTheme: string;
    resolvedColorScheme: ResolvedColorSchemeType;
    resolvedTheme: string;
    setColorSchemePref: ((colorSchemePref: ColorSchemeType) => void);
    setDarkTheme: ((darkTheme: string) => void);
    setForcedColorScheme: ((forcedColorScheme: ColorSchemeType) => void);
    setForcedTheme: ((forcedTheme: string) => void);
    setLightTheme: ((lightTheme: string) => void);
    setTheme: ((theme: string) => void);
    setThemeSet: ((themeSet: {
        darkTheme: string;
        lightTheme: string;
    }) => void);
    systemColorScheme: ResolvedColorSchemeType;
    theme: string;
    toggleColorScheme: ((skipSystem?: boolean) => void);
}
Index
Properties
color
Properties
color
dark
dark
light
light
resolved
resolved
resolved
set
set
Type declaration
- (colorSchemePref): void
Parameters
- colorSchemePref: ColorSchemeType
Returns void
set
set
Type declaration
- (darkTheme): void
Parameters
- darkTheme: string
Returns void
set
set
Type declaration
- (forcedColorScheme): void
Parameters
- forcedColorScheme: ColorSchemeType
Returns void
set
set
Type declaration
- (forcedTheme): void
Parameters
- forcedTheme: string
Returns void
set
set
Type declaration
- (lightTheme): void
Parameters
- lightTheme: string
Returns void
set
set
actions
-Type declaration
- (theme): void
Parameters
- theme: string
Returns void
set
set
Type declaration
- (themeSet): void
Parameters
- themeSet: {
    darkTheme: string;
    lightTheme: string;
}dark
Theme: string light
Theme: string
Returns void
- themeSet: {
system
theme
theme: string
toggle
toggle
Type declaration
- (skipSystem?): void
Parameters
OptionalskipSystem: boolean
Returns void
Properties
color
dark
dark
light
light
resolved
resolved
resolved
set
set
set
set
set
set
set
set
set
set
actions
+set
set
    darkTheme: string;
    lightTheme: string;
}) => void)
    darkTheme: string;
    lightTheme: string;
}) => void)
system
theme
theme: string
toggle
toggle
Interface NextJsSSRThemeSwitcherProps
interface NextJsSSRThemeSwitcherProps {
    children?: ReactNode;
    forcedPages?: ForcedPage[];
    styles?: Record<string, string>;
    tag?: keyof IntrinsicElements;
    targetId?: string;
}
    children?: ReactNode;
    forcedPages?: ForcedPage[];
    styles?: Record<string, string>;
    tag?: keyof IntrinsicElements;
    targetId?: string;
}
Hierarchy (view full)
- HTMLProps<HTMLElement>
- NextJsSSRThemeSwitcherProps
Index
Properties
children?
+NextJsSSRThemeSwitcherProps | React18 Loaders
Interface NextJsSSRThemeSwitcherProps
interface NextJsSSRThemeSwitcherProps {
    children?: ReactNode;
    forcedPages?: ForcedPage[];
    styles?: Record<string, string>;
    tag?: keyof IntrinsicElements;
    targetId?: string;
}
    children?: ReactNode;
    forcedPages?: ForcedPage[];
    styles?: Record<string, string>;
    tag?: keyof IntrinsicElements;
    targetId?: string;
}
Hierarchy (view full)
- HTMLProps<HTMLElement>
- NextJsSSRThemeSwitcherProps
Index
Properties
Properties
Optional children
children?: ReactNode
Optional forced
Optional styles
provide styles object imported from CSS/SCSS modules, if you are using CSS/SCSS modules.
-Optional tag
tag?: keyof IntrinsicElements
Default Value
'div'
-Optional target
target
id of target element to apply classes to. This is useful when you want to apply theme only to specific container.
- Properties
Optionalchildren
children?: ReactNode
Optionalforced
Optionalstyles
provide styles object imported from CSS/SCSS modules, if you are using CSS/SCSS modules.
+Optionaltag
tag?: keyof IntrinsicElements
Optionaltarget
target
id of target element to apply classes to. This is useful when you want to apply theme only to specific container.
+Interface ServerSideWrapperProps
interface ServerSideWrapperProps {
    children?: ReactNode;
    forcedPages?: ForcedPage[];
    styles?: Record<string, string>;
    tag?: keyof IntrinsicElements;
    targetId?: string;
}
    children?: ReactNode;
    forcedPages?: ForcedPage[];
    styles?: Record<string, string>;
    tag?: keyof IntrinsicElements;
    targetId?: string;
}
Hierarchy (view full)
- NextJsSSRThemeSwitcherProps
- ServerSideWrapperProps
Index
Properties
children?
+ServerSideWrapperProps | React18 Loaders
Interface ServerSideWrapperProps
interface ServerSideWrapperProps {
    children?: ReactNode;
    forcedPages?: ForcedPage[];
    styles?: Record<string, string>;
    tag?: keyof IntrinsicElements;
    targetId?: string;
}
    children?: ReactNode;
    forcedPages?: ForcedPage[];
    styles?: Record<string, string>;
    tag?: keyof IntrinsicElements;
    targetId?: string;
}
Hierarchy (view full)
- NextJsSSRThemeSwitcherProps
- ServerSideWrapperProps
Index
Properties
Properties
Optional children
children?: ReactNode
Optional forced
Optional styles
provide styles object imported from CSS/SCSS modules, if you are using CSS/SCSS modules.
-Optional tag
tag?: keyof IntrinsicElements
Default Value
'html'
-Optional target
target
id of target element to apply classes to. This is useful when you want to apply theme only to specific container.
- Properties
Optionalchildren
children?: ReactNode
Optionalforced
Optionalstyles
provide styles object imported from CSS/SCSS modules, if you are using CSS/SCSS modules.
+Optionaltag
tag?: keyof IntrinsicElements
Optionaltarget
target
id of target element to apply classes to. This is useful when you want to apply theme only to specific container.
+Interface ForcedStoreType
Index
Properties
f?
+ForcedStoreType | React18 Loaders
Interface ThemeStoreType
interface ThemeStoreType {
    c: ColorSchemeType;
    d: string;
    l: string;
    s: ResolvedColorSchemeType;
    t: string;
}
    c: ColorSchemeType;
    d: string;
    l: string;
    s: ResolvedColorSchemeType;
    t: string;
}
Index
Properties
c
+ThemeStoreType | React18 Loaders
Interface ThemeStoreType
interface ThemeStoreType {
    c: ColorSchemeType;
    d: string;
    l: string;
    s: ResolvedColorSchemeType;
    t: string;
}
    c: ColorSchemeType;
    d: string;
    l: string;
    s: ResolvedColorSchemeType;
    t: string;
}
Properties
c
colorSchemePref
-d
d: string
darkTheme
-l
l: string
lightTheme
-s
systemColorScheme
-t
t: string
theme
-+ +
with 💖 by Mayank Kumar Chaudhari
diff --git a/docs/modules/client_color_switch_color_switch.html b/docs/modules/client_color_switch_color_switch.html index 0458487b..fd05663f 100644 --- a/docs/modules/client_color_switch_color_switch.html +++ b/docs/modules/client_color_switch_color_switch.html @@ -1,3 +1,3 @@ -Module client/color-switch/color-switch
Index
Interfaces
Colorclient/color-switch/color-switch | React18 Loaders
Module client/color-switch/color-switch
Index
Interfaces
Functions
Module client/force-color-scheme/force-color-scheme
Index
Functions
Module client/force-color-scheme/force-color-scheme
Index
Functions
Module client/force-theme/force-theme
Index
Functions
Module client/force-theme/force-theme
Index
Functions
Module <internal>
Index
Type Aliases
Module <internal>
Index
Type Aliases
Module client/theme-switcher/no-fouc
Index
Modules
<internal>
+client/theme-switcher/no-fouc | React18 Loaders
Module client/theme-switcher/no-fouc
Index
Modules
Type Aliases
Functions
Module client/theme-switcher/theme-switcher
Index
Interfaces
Themeclient/theme-switcher/theme-switcher | React18 Loaders
Module client/theme-switcher/theme-switcher
Index
Interfaces
Functions
Module constants
Index
Variables
Module <internal>
Index
Interfaces
Module <internal>
Index
Interfaces
Module hooks/use-theme
Index
Modules
<internal>
+hooks/use-theme | React18 Loaders
Module hooks/use-theme
Index
Modules
Functions
use
Module server/nextjs/server-side-wrapper/server-side-wrapper
Index
References
Nextserver/nextjs/server-side-wrapper/server-side-wrapper | React18 Loaders
Next
Renames and re-exports NextJsSSGThemeSwitcher
Module server/nextjs/server-side-wrapper/server-side-wrapper
Index
References
Interfaces
Type Aliases
Functions
References
Next
Renames and re-exports NextJsSSGThemeSwitcher References
Next
Renames and re-exports NextJsSSGThemeSwitcherModule store
Index
Interfaces
Forcedstore | React18 Loaders
Module store
Index
Interfaces
Variables
Functions
Module types
Index
Type Aliases
Type alias ResolveFunc
Type declaration
- (store): ValuesType
Parameters
- store: ThemeStoreType
Returns ValuesType
Type Alias ResolveFunc
Type alias UpdateDOMFunc
UpdateDOMFunc: ((values) => void)
Type declaration
- (values): void
Parameters
- values: ValuesType
Returns void
Type Alias UpdateDOMFunc
Type alias UpdateForcedPropsFunc
Update
Type declaration
- (forcedThemeProp?, forcedColorSchemeProp?): void
Parameters
OptionalforcedThemeProp: stringOptionalforcedColorSchemeProp: ColorSchemeType
Returns void
Type Alias UpdateForcedPropsFunc
Update
Type alias ValuesType
Type Alias ValuesType
Type alias ForcedPage
Forced
    pathMatcher: RegExp | string;
    props: {
        forcedColorScheme?: ColorSchemeType;
        forcedTheme?: string;
    };
} | [pathMatcher: RegExp | string, themes: {
    colorScheme?: ColorSchemeType;
    theme?: string;
}]
    pathMatcher: RegExp | string;
    props: {
        forcedColorScheme?: ColorSchemeType;
        forcedTheme?: string;
    };
} | [pathMatcher: RegExp | string, themes: {
    colorScheme?: ColorSchemeType;
    theme?: string;
}]
Type declaration
path
Matcher: RegExp | string props: {
    forcedColorScheme?: ColorSchemeType;
    forcedTheme?: string;
}OptionalforcedColor Scheme?: ColorSchemeType OptionalforcedTheme?: string
Deprecated
as no longer needed.
-Type Alias ForcedPage
Forced
    pathMatcher: RegExp | string;
    props: {
        forcedColorScheme?: ColorSchemeType;
        forcedTheme?: string;
    };
} | [pathMatcher: RegExp | string, themes: {
    colorScheme?: ColorSchemeType;
    theme?: string;
}]
    pathMatcher: RegExp | string;
    props: {
        forcedColorScheme?: ColorSchemeType;
        forcedTheme?: string;
    };
} | [pathMatcher: RegExp | string, themes: {
    colorScheme?: ColorSchemeType;
    theme?: string;
}]
Type alias ColorSchemeType
Color
Types to be exposed to users
-Type Alias ColorSchemeType
Color
    | ""
    | "system"
    | "dark"
    | "light"
    | ""
    | "system"
    | "dark"
    | "light"
Types to be exposed to users
+Type alias ResolvedColorSchemeType
Resolved
Type Alias ResolvedColorSchemeType
Resolved
Variable DARKConst
DARK: "dark" = "dark"
Variable DARKConst
DARK: "dark" = "dark"
Variable DEFAULT_IDConst
DEFAULT_
shared constants -- keep in separate files for better tree-shaking and dependency injection
-Variable DEFAULT_IDConst
DEFAULT_
shared constants -- keep in separate files for better tree-shaking and dependency injection
+Variable LIGHTConst
LIGHT: "light" = "light"
Variable LIGHTConst
LIGHT: "light" = "light"
Variable SYSTEMConst
SYSTEM: "system" = "system"
Variable SYSTEMConst
SYSTEM: "system" = "system"
Color switch button to quickly set user preference
-