diff --git a/README.md b/README.md
index bc8b15b4..8ae101b4 100644
--- a/README.md
+++ b/README.md
@@ -38,7 +38,7 @@ $ npm install nextjs-themes
$ yarn add nextjs-themes
```
-## Want Lite Version? [![npm bundle size](https://img.shields.io/bundlephobia/minzip/nextjs-themes-lite)](https://www.npmjs.com/package/nextjs-themes-lite)
+## Want Lite Version? [![npm bundle size](https://img.shields.io/bundlephobia/minzip/nextjs-themes-lite)](https://www.npmjs.com/package/nextjs-themes-lite) [![Version](https://img.shields.io/npm/v/nextjs-themes-lite.svg?colorB=green)](https://www.npmjs.com/package/nextjs-themes-lite) [![Downloads](https://img.jsdelivr.com/img.shields.io/npm/dt/nextjs-themes-lite.svg)](https://www.npmjs.com/package/nextjs-themes-lite)
```bash
$ pnpm add nextjs-themes-lite
@@ -50,24 +50,24 @@ $ yarn add nextjs-themes-lite
> You need Zustand as a peer-dependency
-## Use
+## Usage
-### With pages/
+### SPA (e.g., Vite, CRA) and Next.js pages directory (No server components)
The best way is to add a [Custom `App`](https://nextjs.org/docs/advanced-features/custom-app) to use by modifying `_app` as follows:
Adding dark mode support takes 2 lines of code:
```js
-import { ThemeSwitcher } from "next-themes";
+import { ThemeSwitcher } from "nextjs-themes";
function MyApp({ Component, pageProps }) {
- return (
- <>
-
-
- >
- );
+ return (
+ <>
+
+
+ >
+ );
}
export default MyApp;
@@ -77,25 +77,58 @@ export default MyApp;
Check out examples for advanced usage.
-### With app/
+### With Next.js `app` router (Server Components)
-Update your `app/layout.jsx` to add `ThemeSwitcher` and `SSCWrapper` from `nextjs-themes`. `SSCWrapper` is required to avoid flash of un-themed content on reload.
+#### Prefer static generation over SSR - No wrapper component
-```js
+> If your app is mostly serving static content, you do not want the overhead of SSR. Use `NextJsSSGThemeSwitcher` in this case.
+> When using this approach, you need to use CSS general sibling Combinator (~) to make sure your themed CSS is properly applied. See (HTML & CSS)[#html--css].
+
+Update your `app/layout.jsx` to add `ThemeSwitcher` from `nextjs-themes`, and `NextJsSSGThemeSwitcher` from `nextjs-themes/server`. `NextJsSSGThemeSwitcher` is required to avoid flash of un-themed content on reload.
+
+```tsx
+// app/layout.jsx
+import { ThemeSwitcher } from "nextjs-themes";
+import { NextJsSSGThemeSwitcher } from "nextjs-themes/server/nextjs";
+
+export default function Layout({ children }) {
+ return (
+
+
+ /** use NextJsSSGThemeSwitcher as first element inside body */
+
+
+ {children}
+
+
+ );
+}
+```
+
+Woohoo! You just added multiple theme modes and you can also use Server Component! Isn't that awesome!
+
+#### Prefer SSR over SSG - Use wrapper component
+
+> If your app is serving dynamic content and you want to utilize SSR, continue using `ServerSideWrapper` component to replace `html` tag in `layout.tsx` file.
+
+Update your `app/layout.jsx` to add `ThemeSwitcher` and `ServerSideWrapper` from `nextjs-themes`. `ServerSideWrapper` is required to avoid flash of un-themed content on reload.
+
+```tsx
// app/layout.jsx
-import { ThemeSwitcher } from "next-themes";
-import { SSCWrapper } from "next-themes/server/nextjs";
+import { ThemeSwitcher } from "nextjs-themes";
+import { ServerSideWrapper } from "nextjs-themes/server/nextjs";
export default function Layout({ children }) {
- return (
-
-
-
-
- {children}
-
-
- );
+ return (
+
+
+
+
+ {children}
+
+
+ );
}
```
@@ -103,18 +136,24 @@ Woohoo! You just added dark mode and you can also use Server Component! Isn't th
### HTML & CSS
-That's it, your Next.js app fully supports dark mode, including System preference with `prefers-color-scheme`. The theme is also immediately synced between tabs. By default, next-themes modifies the `data-theme` attribute on the `html` element, which you can easily use to style your app:
+That's it, your Next.js app fully supports dark mode, including System preference with `prefers-color-scheme`. The theme is also immediately synced between tabs. By default, nextjs-themes modifies the `data-theme` attribute on the `html` element, which you can easily use to style your app:
```css
:root {
- /* Your default theme */
- --background: white;
- --foreground: black;
+ /* Your default theme */
+ --background: white;
+ --foreground: black;
}
[data-theme="dark"] {
- --background: black;
- --foreground: white;
+ --background: black;
+ --foreground: white;
+}
+
+// v2 onwards when using NextJsSSGThemeSwitcher, we need to use CSS Combinators
+[data-theme="dark"] ~ * {
+ --background: black;
+ --foreground: white;
}
```
@@ -126,18 +165,18 @@ In case your components need to know the current theme and be able to change it.
import { useTheme } from "nextjs-themes";
const ThemeChanger = () => {
- /* you can also improve performance by using selectors
- * const [theme, setTheme] = useTheme(state => [state.theme, state.setTheme]);
- */
- const { theme, setTheme } = useTheme();
-
- return (
-
- The current theme is: {theme}
-
-
-
- );
+ /* you can also improve performance by using selectors
+ * const [theme, setTheme] = useTheme(state => [state.theme, state.setTheme]);
+ */
+ const { theme, setTheme } = useTheme();
+
+ return (
+