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

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);
 }