merge new setup into v1 branch

.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/[email protected]
-        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

.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

.gitignore

@@ -4,3 +4,5 @@ dist/
 .next/
 .yalc/
 yalc.lock
+.idea/
+.turbo

.prettierignore

@@ -0,0 +1,3 @@
+.next
+dist
+build

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "none",
+  "arrowParens": "avoid",
+  "printWidth": 100
+}

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>