feat: replace use-dark-mode with next-themes

Author: transitive-bullshit

components/Footer.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import useDarkMode from '@fisch0920/use-dark-mode'
+import { useTheme } from 'next-themes'
 import { FaTwitter } from '@react-icons/all-files/fa/FaTwitter'
 import { FaZhihu } from '@react-icons/all-files/fa/FaZhihu'
 import { FaGithub } from '@react-icons/all-files/fa/FaGithub'
@@ -14,14 +14,14 @@ import styles from './styles.module.css'
 
 export const FooterImpl: React.FC = () => {
   const [hasMounted, setHasMounted] = React.useState(false)
-  const darkMode = useDarkMode(false, { classNameDark: 'dark-mode' })
+  const { setTheme, resolvedTheme } = useTheme()
 
   const onToggleDarkMode = React.useCallback(
     (e) => {
       e.preventDefault()
-      darkMode.toggle()
+      setTheme(resolvedTheme === 'light' ? 'dark' : 'light')
     },
-    [darkMode]
+    [resolvedTheme, setTheme]
   )
 
   React.useEffect(() => {
@@ -41,7 +41,7 @@ export const FooterImpl: React.FC = () => {
             onClick={onToggleDarkMode}
             title='Toggle dark mode'
           >
-            {darkMode.value ? <IoMoonSharp /> : <IoSunnyOutline />}
+            {resolvedTheme === 'dark' ? <IoMoonSharp /> : <IoSunnyOutline />}
           </a>
         )}
       </div>

components/NotionPage.tsx

@@ -6,7 +6,7 @@ import cs from 'classnames'
 import { useRouter } from 'next/router'
 import { useSearchParam } from 'react-use'
 import BodyClassName from 'react-body-classname'
-import useDarkMode from '@fisch0920/use-dark-mode'
+import { useTheme } from 'next-themes'
 import { PageBlock } from 'notion-types'
 
 import { Tweet, TwitterContextProvider } from 'react-static-tweets'
@@ -189,7 +189,7 @@ export const NotionPage: React.FC<types.PageProps> = ({
   // lite mode is for oembed
   const isLiteMode = lite === 'true'
 
-  const darkMode = useDarkMode(false, { classNameDark: 'dark-mode' })
+  const { resolvedTheme } = useTheme()
 
   const siteMapPageUrl = React.useMemo(() => {
     const params: any = {}
@@ -284,7 +284,7 @@ export const NotionPage: React.FC<types.PageProps> = ({
         rootPageId={site.rootNotionPageId}
         rootDomain={site.domain}
         fullPage={!isLiteMode}
-        darkMode={darkMode.value}
+        darkMode={resolvedTheme === 'dark'}
         previewImages={!!recordMap.preview_images}
         showCollectionViewDropdown={false}
         showTableOfContents={showTableOfContents}

components/NotionPageHeader.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import cs from 'classnames'
-import useDarkMode from '@fisch0920/use-dark-mode'
+import { useTheme } from 'next-themes'
 import { IoSunnyOutline } from '@react-icons/all-files/io5/IoSunnyOutline'
 import { IoMoonSharp } from '@react-icons/all-files/io5/IoMoonSharp'
 
@@ -14,14 +14,18 @@ import styles from './styles.module.css'
 export const NotionPageHeader: React.FC<{
   block: types.CollectionViewPageBlock | types.PageBlock
 }> = ({ block }) => {
-  const darkMode = useDarkMode(false, { classNameDark: 'dark-mode' })
   const [hasMounted, setHasMounted] = React.useState(false)
+  const { resolvedTheme, setTheme } = useTheme()
   const { components, mapPageUrl } = useNotionContext()
 
   React.useEffect(() => {
     setHasMounted(true)
   }, [])
 
+  const onToggleTheme = React.useCallback(() => {
+    setTheme(resolvedTheme === 'light' ? 'dark' : 'light')
+  }, [resolvedTheme, setTheme])
+
   if (navigationStyle === 'default') {
     return <Header block={block} />
   }
@@ -62,8 +66,8 @@ export const NotionPageHeader: React.FC<{
             })
             .filter(Boolean)}
 
-          <div className={cs('breadcrumb', 'button')} onClick={darkMode.toggle}>
-            {hasMounted && darkMode.value ? (
+          <div className={cs('breadcrumb', 'button')} onClick={onToggleTheme}>
+            {hasMounted && resolvedTheme === 'dark' ? (
               <IoMoonSharp />
             ) : (
               <IoSunnyOutline />

components/PageSocial.module.css

@@ -68,7 +68,7 @@
   fill: var(--bg-color);
 }
 
-:global(.dark-mode) .action:hover svg {
+:global([data-theme='dark']) .action:hover svg {
   fill: var(--fg-color);
 }
 

package.json

@@ -25,7 +25,6 @@
     "test:prettier": "prettier '**/*.{js,jsx,ts,tsx}' --check"
   },
   "dependencies": {
-    "@fisch0920/use-dark-mode": "^2.4.0",
     "@keyvhq/core": "^1.6.9",
     "@keyvhq/redis": "^1.6.10",
     "@react-icons/all-files": "^4.1.0",
@@ -38,6 +37,7 @@
     "lqip-modern": "^1.2.0",
     "next": "^12.1.1",
     "next-api-og-image": "^2.2.1",
+    "next-themes": "^0.1.1",
     "node-fetch": "^2.6.1",
     "notion-client": "^6.11.0",
     "notion-types": "^6.11.0",

pages/_app.tsx

@@ -23,8 +23,9 @@ import 'styles/notion.css'
 import 'styles/prism-theme.css'
 
 import * as React from 'react'
-import { useRouter } from 'next/router'
 import * as Fathom from 'fathom-client'
+import { useRouter } from 'next/router'
+import { ThemeProvider } from 'next-themes'
 import posthog from 'posthog-js'
 
 import { bootstrap } from 'lib/bootstrap-client'
@@ -63,5 +64,9 @@ export default function App({ Component, pageProps }) {
     }
   }, [router.events])
 
-  return <Component {...pageProps} />
+  return (
+    <ThemeProvider disableTransitionOnChange>
+      <Component {...pageProps} />
+    </ThemeProvider>
+  )
 }

pages/_document.tsx

@@ -20,51 +20,6 @@ export default class MyDocument extends Document {
           </Head>
 
           <body>
-            <script
-              dangerouslySetInnerHTML={{
-                __html: `
-/** Inlined version of noflash.js from use-dark-mode */
-;(function () {
-  var storageKey = 'darkMode'
-  var classNameDark = 'dark-mode'
-  var classNameLight = 'light-mode'
-
-  function setClassOnDocumentBody(darkMode) {
-    document.body.classList.add(darkMode ? classNameDark : classNameLight)
-    document.body.classList.remove(darkMode ? classNameLight : classNameDark)
-  }
-
-  var preferDarkQuery = '(prefers-color-scheme: dark)'
-  var mql = window.matchMedia(preferDarkQuery)
-  var supportsColorSchemeQuery = mql.media === preferDarkQuery
-  var localStorageTheme = null
-  try {
-    localStorageTheme = localStorage.getItem(storageKey)
-  } catch (err) {}
-
-  var localStorageExists = localStorageTheme !== null
-  if (localStorageExists) {
-    localStorageTheme = JSON.parse(localStorageTheme)
-  }
-
-  // Determine the source of truth
-  if (localStorageExists) {
-    // source of truth from localStorage
-    setClassOnDocumentBody(localStorageTheme)
-  } else if (supportsColorSchemeQuery) {
-    // source of truth from system
-    setClassOnDocumentBody(mql.matches)
-    localStorage.setItem(storageKey, mql.matches)
-  } else {
-    // source of truth from document.body
-    var isDarkMode = document.body.classList.contains(classNameDark)
-    localStorage.setItem(storageKey, JSON.stringify(isDarkMode))
-  }
-})();
-`
-              }}
-            />
-
             <Main />
 
             <NextScript />

site.config.ts

@@ -47,16 +47,16 @@ export default siteConfig({
 
   // whether to use the default notion navigation style or a custom one with links to
   // important pages
-  navigationStyle: 'default'
-  // navigationStyle: 'custom',
-  // navigationLinks: [
-  //   {
-  //     title: 'About',
-  //     pageId: 'f1199d37579b41cbabfc0b5174f4256a'
-  //   },
-  //   {
-  //     title: 'Contact',
-  //     pageId: '6a29ebcb935a4f0689fe661ab5f3b8d1'
-  //   }
-  // ]
+  // navigationStyle: 'default'
+  navigationStyle: 'custom',
+  navigationLinks: [
+    {
+      title: 'About',
+      pageId: 'f1199d37579b41cbabfc0b5174f4256a'
+    },
+    {
+      title: 'Contact',
+      pageId: '6a29ebcb935a4f0689fe661ab5f3b8d1'
+    }
+  ]
 })

styles/notion.css

@@ -331,15 +331,15 @@
   );
 }
 
-.dark-mode .notion-red_background,
-.dark-mode .notion-pink_background,
-.dark-mode .notion-blue_background,
-.dark-mode .notion-purple_background,
-.dark-mode .notion-teal_background,
-.dark-mode .notion-yellow_background,
-.dark-mode .notion-orange_background,
-.dark-mode .notion-brown_background,
-.dark-mode .notion-gray_background {
+[data-theme='dark'] .notion-red_background,
+[data-theme='dark'] .notion-pink_background,
+[data-theme='dark'] .notion-blue_background,
+[data-theme='dark'] .notion-purple_background,
+[data-theme='dark'] .notion-teal_background,
+[data-theme='dark'] .notion-yellow_background,
+[data-theme='dark'] .notion-orange_background,
+[data-theme='dark'] .notion-brown_background,
+[data-theme='dark'] .notion-gray_background {
   padding: 0;
   margin: 0;
   border-radius: 0;
@@ -361,15 +361,15 @@
   backdrop-filter: saturate(180%) blur(16px);
 }
 
-.dark-mode .notion-header {
+[data-theme='dark'] .notion-header {
   background: transparent;
   box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
   backdrop-filter: saturate(180%) blur(8px);
 }
 
 /* Workaround for Firefox not supporting backdrop-filter yet */
 @-moz-document url-prefix() {
-  .dark-mode .notion-header {
+  [data-theme='dark'] .notion-header {
     background: hsla(203, 8%, 20%, 0.8);
   }
 }

styles/prism-theme.css

@@ -7,7 +7,7 @@
   padding: 1.5em !important;
 }
 
-.dark-mode .notion-code {
+[data-theme='dark'] .notion-code {
   background-color: rgba(17, 24, 39, 1);
   border-color: rgba(55, 65, 81, 1);
 }
@@ -18,11 +18,11 @@
   background: none !important;
   padding: 0 !important;
 }
-.dark-mode .notion code {
+[data-theme='dark'] .notion code {
   color: rgba(229, 231, 235, 1);
 }
 
-.dark-mode .notion .notion-inline-code {
+[data-theme='dark'] .notion .notion-inline-code {
   background: rgb(71, 76, 80) !important;
   color: #ff4081;
   padding: 0.2em 0.4em !important;
@@ -42,15 +42,15 @@
 .token.comment {
   color: #5b9b4c;
 }
-.dark-mode .token.cdata,
-.dark-mode .token.doctype,
-.dark-mode .token.prolog {
+[data-theme='dark'] .token.cdata,
+[data-theme='dark'] .token.doctype,
+[data-theme='dark'] .token.prolog {
   color: rgba(209, 213, 219, 1);
 }
 .token.punctuation {
   color: rgba(55, 65, 81, 1);
 }
-.dark-mode .token.punctuation {
+[data-theme='dark'] .token.punctuation {
   color: rgba(209, 213, 219, 1);
 }
 .token.boolean,
@@ -95,8 +95,8 @@ code[class*='language-'],
 pre[class*='language-'] {
   color: rgba(31, 41, 55, 1);
 }
-.dark-mode code[class*='language-'],
-.dark-mode pre[class*='language-'] {
+[data-theme='dark'] code[class*='language-'],
+[data-theme='dark'] pre[class*='language-'] {
   color: rgba(249, 250, 251, 1);
 }
 pre::-webkit-scrollbar {