feat: use next-themes

coral-xyz · Nov 23, 2024 · 1d99b6f · 1d99b6f
1 parent 94ed4e0
commit 1d99b6f
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 70 deletions.
diff --git a/docs/package-lock.json b/docs/package-lock.json
diff --git a/docs/package.json b/docs/package.json
@@ -23,6 +23,7 @@
     "gh-pages": "^5.0.0",
     "next": "12.2.1",
     "next-plausible": "^3.2.0",
+    "next-themes": "^0.4.3",
     "postcss-focus-visible": "^6.0.4",
     "postcss-import": "^14.1.0",
     "prism-react-renderer": "^1.3.5",

diff --git a/docs/src/components/ThemeSelector.jsx b/docs/src/components/ThemeSelector.jsx
@@ -1,4 +1,5 @@
-import { useEffect, useState } from 'react'
+import { useEffect } from 'react'
+import { useTheme } from 'next-themes'
 import { Listbox } from '@headlessui/react'
 import clsx from 'clsx'
 
@@ -53,31 +54,26 @@ function SystemIcon(props) {
 }
 
 export function ThemeSelector(props) {
-  let [selectedTheme, setSelectedTheme] = useState()
+  let { theme, setTheme } = useTheme()
 
   useEffect(() => {
-    if (selectedTheme) {
-      document.documentElement.setAttribute('data-theme', selectedTheme.value)
-    } else {
-      setSelectedTheme(
-        themes.find(
-          (theme) =>
-            theme.value === document.documentElement.getAttribute('data-theme')
-        )
-      )
+    if (theme) {
+      document.documentElement.setAttribute('data-theme', theme)
     }
-  }, [selectedTheme])
+  }, [theme])
 
   return (
     <Listbox
       as="div"
-      value={selectedTheme}
-      onChange={setSelectedTheme}
+      value={themes.find((t) => t.value === theme) }
+      onChange={(theme) => {
+        setTheme(theme.value)
+      }}
       {...props}
     >
       <Listbox.Label className="sr-only">Theme</Listbox.Label>
       <Listbox.Button className="flex h-6 w-6 items-center justify-center rounded-lg shadow-md shadow-black/5 ring-1 ring-black/5 dark:bg-slate-700 dark:ring-inset dark:ring-white/5">
-        <span className="sr-only">{selectedTheme?.name}</span>
+        <span className="sr-only">{theme}</span>
         <LightIcon className="hidden h-4 w-4 fill-sky-400 [[data-theme=light]_&]:block" />
         <DarkIcon className="hidden h-4 w-4 fill-sky-400 [[data-theme=dark]_&]:block" />
         <LightIcon className="hidden h-4 w-4 fill-slate-400 [:not(.dark)[data-theme=system]_&]:block" />

diff --git a/docs/src/pages/_app.jsx b/docs/src/pages/_app.jsx
@@ -1,7 +1,7 @@
 import Head from 'next/head'
 import { slugifyWithCounter } from '@sindresorhus/slugify'
 import PlausibleProvider from 'next-plausible'
-
+import { ThemeProvider } from 'next-themes'
 import Prism from 'prism-react-renderer/prism'
 ;(typeof global !== 'undefined' ? global : window).Prism = Prism
 
@@ -155,7 +155,7 @@ export default function App({ Component, pageProps }) {
     : []
 
   return (
-    <>
+    <ThemeProvider attribute="class" defaultTheme="system">
       <PlausibleProvider domain="anchor-lang.com" trackOutboundLinks={true}>
         <Head>
           <title>{pageTitle}</title>
@@ -189,6 +189,6 @@ export default function App({ Component, pageProps }) {
           <Component {...pageProps} />
         </Layout>
       </PlausibleProvider>
-    </>
+    </ThemeProvider>
   )
 }
diff --git a/docs/src/pages/_document.jsx b/docs/src/pages/_document.jsx
@@ -1,61 +1,9 @@
 import { Head, Html, Main, NextScript } from 'next/document'
 
-const themeScript = `
-  let mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
-
-  function updateTheme(savedTheme) {
-    let theme = 'system'
-    try {
-      if (!savedTheme) {
-        savedTheme = window.localStorage.theme
-      }
-      if (savedTheme === 'dark') {
-        theme = 'dark'
-        document.documentElement.classList.add('dark')
-      } else if (savedTheme === 'light') {
-        theme = 'light'
-        document.documentElement.classList.remove('dark')
-      } else if (mediaQuery.matches) {
-        document.documentElement.classList.add('dark')
-      } else {
-        document.documentElement.classList.remove('dark')
-      }
-    } catch {
-      theme = 'light'
-      document.documentElement.classList.remove('dark')
-    }
-    return theme
-  }
-
-  function updateThemeWithoutTransitions(savedTheme) {
-    updateTheme(savedTheme)
-    document.documentElement.classList.add('[&_*]:!transition-none')
-    window.setTimeout(() => {
-      document.documentElement.classList.remove('[&_*]:!transition-none')
-    }, 0)
-  }
-
-  document.documentElement.setAttribute('data-theme', updateTheme())
-
-  new MutationObserver(([{ oldValue }]) => {
-    let newValue = document.documentElement.getAttribute('data-theme')
-    if (newValue !== oldValue) {
-      try {
-        window.localStorage.setItem('theme', newValue)
-      } catch {}
-      updateThemeWithoutTransitions(newValue)
-    }
-  }).observe(document.documentElement, { attributeFilter: ['data-theme'], attributeOldValue: true })
-
-  mediaQuery.addEventListener('change', updateThemeWithoutTransitions)
-  window.addEventListener('storage', updateThemeWithoutTransitions)
-`
-
 export default function Document() {
   return (
     <Html className="antialiased [font-feature-settings:'ss01']" lang="en">
       <Head>
-        <script dangerouslySetInnerHTML={{ __html: themeScript }} />
       </Head>
       <body className="bg-white dark:bg-slate-900">
         <Main />