pacocoursey · pacocoursey · Aug 28, 2023 · May 22, 2022 · May 23, 2022 · Jul 26, 2022
diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
@@ -3,31 +3,42 @@ name: E2E - Test
 on: push
 
 jobs:
- setup:
- runs-on: ubuntu-latest
- outputs:
- preview_url: ${{ steps.waitForVercelPreviewDeployment.outputs.url }}
- steps:
- - name: Wait for Vercel preview deployment to be ready
- uses: patrickedqvist/wait-for-vercel-preview@v1.2.0
- id: waitForVercelPreviewDeployment
- with:
- token: ${{ secrets.GITHUB_TOKEN }}
- max_timeout: 600
  test:
- needs: setup
  name: Run Playwright tests
  timeout-minutes: 5
  runs-on: ubuntu-latest
  steps:
- - name: Prepare Playwright
- uses: actions/checkout@v2
+ - uses: actions/checkout@v3
+
+ - uses: pnpm/action-setup@v2
+ with:
+ version: 8
+
  - uses: actions/setup-node@v2
  with:
- node-version: "14"
- - run: yarn
- - run: npx playwright install --with-deps
- - name: Run tests
- run: yarn test:e2e
+ node-version: 18.x
+ cache: 'pnpm'
+
+ - run: pnpm install
  env:
- BASE_URL: ${{ needs.setup.outputs.preview_url }}
+ CI: true
+
+ - name: Store Playwright's Version
+ run: |
+ PLAYWRIGHT_VERSION=$(pnpm ls @playwright/test | grep @playwright | sed 's/.*@//')
+ echo "Playwright's Version: $PLAYWRIGHT_VERSION"
+ echo "PLAYWRIGHT_VERSION=$PLAYWRIGHT_VERSION" >> $GITHUB_ENV
+
+ - name: Cache Playwright Browsers for Playwright's Version
+ id: cache-playwright-browsers
+ uses: actions/cache@v3
+ with:
+ path: ~/.cache/ms-playwright
+ key: playwright-browsers-${{ env.PLAYWRIGHT_VERSION }}
+
+ - name: Setup Playwright
+ if: steps.cache-playwright-browsers.outputs.cache-hit != 'true'
+ run: npx playwright install --with-deps
+
+ - name: Run tests
+ run: pnpm test:e2e
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -4,29 +4,23 @@ on: push
 
 jobs:
  test:
+ name: Run Unit Tests
  runs-on: ubuntu-latest
  steps:
- - uses: actions/checkout@v2
+ - uses: actions/checkout@v3
 
- - name: Get yarn cache
- id: yarn-cache
- run: echo "::set-output name=dir::$(yarn cache dir)"
-
- - uses: actions/cache@v1
+ - uses: pnpm/action-setup@v2
  with:
- path: ${{ steps.yarn-cache.outputs.dir }}
- key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
- restore-keys: |
- ${{ runner.os }}-yarn-
+ version: 8
 
- - uses: actions/setup-node@v1
+ - uses: actions/setup-node@v3
  with:
- node-version: 14.x
+ node-version: 18.x
+ cache: 'pnpm'
 
- - name: yarn install
- run: yarn
+ - run: pnpm install
  env:
  CI: true
 
- - name: Run test
- run: yarn test
+ - name: Run tests
+ run: pnpm test
diff --git a/.gitignore b/.gitignore
@@ -4,3 +4,5 @@ dist/
 .next/
 .yalc/
 yalc.lock
+.idea/
+.turbo
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1,3 @@
+.next
+dist
+build
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,7 @@
+{
+ "semi": false,
+ "singleQuote": true,
+ "trailingComma": "none",
+ "arrowParens": "avoid",
+ "printWidth": 100
+}
diff --git a/README.md b/README.md
@@ -1,10 +1,11 @@
-# next-themes ![next-themes minzip package size](https://img.shields.io/bundlephobia/minzip/next-themes/beta) ![Version](https://img.shields.io/npm/v/next-themes/beta.svg?colorB=green)
+# next-themes ![next-themes minzip package size](https://img.shields.io/bundlephobia/minzip/next-themes) [![Version](https://img.shields.io/npm/v/next-themes.svg?colorB=green)](https://www.npmjs.com/package/next-themes)
 
 An abstraction for themes in your Next.js app.
 
 - ✅ Perfect dark mode in 2 lines of code
 - ✅ System setting with prefers-color-scheme
 - ✅ Themed browser UI with color-scheme
+- ✅ Support for Next.js 13 `appDir`
 - ✅ No flash on load (both SSR and SSG)
 - ✅ Sync theme across tabs and windows
 - ✅ Disable flashing when changing themes
@@ -24,6 +25,8 @@ $ yarn add next-themes
 
 ## Use
 
+### With pages/
+
 You'll need a [Custom `App`](https://nextjs.org/docs/advanced-features/custom-app) to use next-themes. The simplest `_app` looks like this:
 
 ```js
@@ -52,6 +55,60 @@ function MyApp({ Component, pageProps }) {
 export default MyApp
 ```
 
+### With app/
+
+You'll need to update your `app/layout.jsx` to use next-themes. The simplest `layout` looks like this:
+
+```js
+// app/layout.jsx
+
+export default function Layout({ children }) {
+ return (
+ <html>
+ <head />
+ <body>{children}</body>
+ </html>
+ )
+}
+```
+
+Adding dark mode support still only takes a few lines of code. Start by creating a new [providers component](https://beta.nextjs.org/docs/rendering/server-and-client-components#rendering-third-party-context-providers-in-server-components) in its own file:
+
+```js
+// app/providers.jsx
+
+'use client'
+
+import { ThemeProvider } from 'next-themes'
+
+export function Providers({ children }) {
+ return <ThemeProvider>{children}</ThemeProvider>
+}
+```
+
+Then add the `<Providers>` component to your layout _inside_ of the `<body>`.
+
+```js
+// app/layout.jsx
+
+import { Providers } from './providers'
+
+export default function Layout({ children }) {
+ return (
+ <html suppressHydrationWarning>
+ <head />
+ <body>
+ <Providers>{children}</Providers>
+ </body>
+ </html>
+ )
+}
+```
+
+> **Note!** If you do not add [suppressHydrationWarning](https://reactjs.org/docs/dom-elements.html#suppresshydrationwarning:~:text=It%20only%20works%20one%20level%20deep) to your `<html>` you will get warnings because `next-themes` updates that element. This property only applies one level deep, so it won't block hydration warnings on other elements.
+
+### 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:
 
 ```css
@@ -67,6 +124,8 @@ That's it, your Next.js app fully supports dark mode, including System preferenc
 }
 ```
 
+> **Note!** If you set the attribute of your Theme Provider to class for Tailwind next-themes will modify the `class` attribute on the `html` element. See [With Tailwind](###with-tailwind).
+
 ### useTheme
 
 Your UI will need to know the current theme and be able to change it. The `useTheme` hook provides theme information:
@@ -118,12 +177,12 @@ useTheme takes no parameters, but returns:
 
 - `theme`: Active theme name
 - `setTheme(name)`: Function to update the theme
-- `forcedTheme`: Forced page theme or falsy. If `forcedTheme` is set, you should disable any theme switching UI
 - `resolvedTheme`: Returns the effective theme color of the page.
  - If `enableSystem` is true and the active theme is "system", this returns whether the system preference resolved to "dark" or "light".
  - If `forcedTheme` is set, the name of the forced theme is returned.
  - Otherwise identical to `theme`.
 - `systemTheme`: If `enableSystem` is true, represents the System theme preference ("dark" or "light"), regardless what the active theme is
+- `forcedTheme`: Forced page theme or falsy. If `forcedTheme` is set, you should disable any theme switching UI
 - `themes`: The list of themes passed to `ThemeProvider` (with "system" appended, if `enableSystem` is true)
 
 Not too bad, right? Let's see how to use these properties with examples:
@@ -134,10 +193,10 @@ The [Live Example](https://next-themes-example.vercel.app/) shows next-themes in
 
 ### Use System preference by default
 
-The `defaultTheme` is "light". If you want to respect the System preference instead, set it to "system":
+For versions above v0.0.12, the `defaultTheme` is automatically set to "system", so to use System preference you can simply use:
 
 ```js
-<ThemeProvider defaultTheme="system">
+<ThemeProvider>
 ```
 
 ### Ignore System preference
@@ -301,10 +360,10 @@ import { useTheme } from 'next-themes'
 
 // Do NOT use this! It will throw a hydration mismatch error.
 const ThemeSwitch = () => {
- const { resolvedTheme, setTheme } = useTheme()
+ const { theme, setTheme } = useTheme()
 
  return (
- <select value={resolvedTheme} onChange={e => setTheme(e.target.value)}>
+ <select value={theme} onChange={e => setTheme(e.target.value)}>
  <option value="system">System</option>
  <option value="dark">Dark</option>
  <option value="light">Light</option>
@@ -323,7 +382,7 @@ import { useTheme } from 'next-themes'
 
 const ThemeSwitch = () => {
  const [mounted, setMounted] = useState(false)
- const { resolvedTheme, setTheme } = useTheme()
+ const { theme, setTheme } = useTheme()
 
  // useEffect only runs on the client, so now we can safely show the UI
  useEffect(() => {
@@ -335,7 +394,7 @@ const ThemeSwitch = () => {
  }
 
  return (
- <select value={resolvedTheme} onChange={e => setTheme(e.target.value)}>
+ <select value={theme} onChange={e => setTheme(e.target.value)}>
  <option value="system">System</option>
  <option value="dark">Dark</option>
  <option value="light">Light</option>

diff --git a/e2e/forced-theme.test.ts b/e2e/forced-theme.test.ts
diff --git a/e2e/switch-theme.test.ts b/e2e/switch-theme.test.ts
diff --git a/e2e/system-theme.test.ts b/e2e/system-theme.test.ts