react18-themes
Advanced tools
Unleash the Power of React Server Components! Use multiple themes on your site with confidence, without losing any advantages of React Server Components.
Note: react18-themes will now be maintained as react18-themes, as server-specific APIs are no longer needed.
🤟 👉 Unleash the Power of React Server Components
import from react18-themes/client/component)Exampand following to see more features.
This project was inspired by next-themes. Unlike next-themes, react18-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.
import from react18-themes/client/component)appDiruseTheme hookCheck out the live example.
$ pnpm add react18-themes
or
$ npm install react18-themes
or
$ yarn add react18-themes
$ pnpm add react18-themes-lite
or
$ npm install react18-themes-lite
or
$ yarn add react18-themes-lite
Note:
r18gsis a peer dependency
To add dark mode support, modify _app.js as follows:
import { ThemeSwitcher } from "react18-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!
app router (Server Components)Update app/layout.jsx to add ThemeSwitcher from react18-themes:
// app/layout.jsx
import { ThemeSwitcher } from "react18-themes";
export default function Layout({ children }) {
return (
<html lang="en">
<head />
<body>
<ThemeSwitcher />
{children}
</body>
</html>
);
}
Woohoo! Multiple theme modes with Server Components support!
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;
}
Show different images based on the current theme:
import Image from "next/image";
import { useTheme } from "react18-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;
The useTheme hook provides theme information and allows changing the theme:
import { useTheme } from "react18-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;
}
import { ForceTheme } from "react18-themes";
function MyPage() {
return (
<>
<ForceTheme theme="my-theme" />
...
</>
);
}
export default MyPage;
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.
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 "react18-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} />
</>
);
}
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">
Refer to the migration guide.
Want a hands-on course for getting started with Turborepo? Check out React and Next.js with TypeScript
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;
}
Why is resolvedTheme and resolvedColorScheme necessary?
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.
resolvedTheme is useful for modifying behavior or styles at runtime:
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.
This library is licensed under the MPL-2.0 open-source license.
with 💖 by Mayank Kumar Chaudhari
FAQs
Unleash the Power of React Server Components! Use multiple themes on your site with confidence, without losing any advantages of React Server Components.
The npm package react18-themes receives a total of 1,001 weekly downloads. As such, react18-themes popularity was classified as popular.
We found that react18-themes demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.
Research
Security News
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.
Security News
NVD’s backlog surpasses 20,000 CVEs as analysis slows and NIST announces new system updates to address ongoing delays.