feat: revert dark mode to @fisch0920/use-dark-mode

components/Footer.tsx

@@ -1,11 +1,12 @@
 import * as React from 'react'
-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'
 import { FaLinkedin } from '@react-icons/all-files/fa/FaLinkedin'
 import { IoSunnyOutline } from '@react-icons/all-files/io5/IoSunnyOutline'
 import { IoMoonSharp } from '@react-icons/all-files/io5/IoMoonSharp'
+
+import { useDarkMode } from 'lib/use-dark-mode'
 import * as config from 'lib/config'
 
 import styles from './styles.module.css'
@@ -14,14 +15,14 @@ import styles from './styles.module.css'
 
 export const FooterImpl: React.FC = () => {
   const [hasMounted, setHasMounted] = React.useState(false)
-  const { setTheme, resolvedTheme } = useTheme()
+  const { isDarkMode, toggleDarkMode } = useDarkMode()
 
   const onToggleDarkMode = React.useCallback(
     (e) => {
       e.preventDefault()
-      setTheme(resolvedTheme === 'light' ? 'dark' : 'light')
+      toggleDarkMode()
     },
-    [resolvedTheme, setTheme]
+    [toggleDarkMode]
   )
 
   React.useEffect(() => {
@@ -41,7 +42,7 @@ export const FooterImpl: React.FC = () => {
             onClick={onToggleDarkMode}
             title='Toggle dark mode'
           >
-            {resolvedTheme === 'dark' ? <IoMoonSharp /> : <IoSunnyOutline />}
+            {isDarkMode ? <IoMoonSharp /> : <IoSunnyOutline />}
           </a>
         )}
       </div>

components/NotionPage.tsx

@@ -6,7 +6,6 @@ import cs from 'classnames'
 import { useRouter } from 'next/router'
 import { useSearchParam } from 'react-use'
 import BodyClassName from 'react-body-classname'
-import { useTheme } from 'next-themes'
 import { PageBlock } from 'notion-types'
 
 import TweetEmbed from 'react-tweet-embed'
@@ -19,6 +18,7 @@ import { getBlockTitle, getPageProperty, formatDate } from 'notion-utils'
 import { mapPageUrl, getCanonicalPageUrl } from 'lib/map-page-url'
 import { mapImageUrl } from 'lib/map-image-url'
 import { searchNotion } from 'lib/search-notion'
+import { useDarkMode } from 'lib/use-dark-mode'
 import * as types from 'lib/types'
 import * as config from 'lib/config'
 
@@ -177,8 +177,7 @@ export const NotionPage: React.FC<types.PageProps> = ({
   // lite mode is for oembed
   const isLiteMode = lite === 'true'
 
-  const { resolvedTheme } = useTheme()
-  const isDarkMode = resolvedTheme === 'dark'
+  const { isDarkMode } = useDarkMode()
 
   const siteMapPageUrl = React.useMemo(() => {
     const params: any = {}
@@ -267,6 +266,7 @@ export const NotionPage: React.FC<types.PageProps> = ({
           styles.notion,
           pageId === site.rootNotionPageId && 'index-page'
         )}
+        darkMode={isDarkMode}
         components={components}
         recordMap={recordMap}
         rootPageId={site.rootNotionPageId}

components/NotionPageHeader.tsx

@@ -1,37 +1,33 @@
 import * as React from 'react'
 import cs from 'classnames'
-import { useTheme } from 'next-themes'
 import { IoSunnyOutline } from '@react-icons/all-files/io5/IoSunnyOutline'
 import { IoMoonSharp } from '@react-icons/all-files/io5/IoMoonSharp'
 import { Header, Breadcrumbs, Search, useNotionContext } from 'react-notion-x'
 import * as types from 'notion-types'
 
+import { useDarkMode } from 'lib/use-dark-mode'
 import { navigationStyle, navigationLinks, isSearchEnabled } from 'lib/config'
 
 import styles from './styles.module.css'
 
 const ToggleThemeButton = () => {
   const [hasMounted, setHasMounted] = React.useState(false)
-  const { resolvedTheme, setTheme } = useTheme()
+  const { isDarkMode, toggleDarkMode } = useDarkMode()
 
   React.useEffect(() => {
     setHasMounted(true)
   }, [])
 
   const onToggleTheme = React.useCallback(() => {
-    setTheme(resolvedTheme === 'light' ? 'dark' : 'light')
-  }, [resolvedTheme, setTheme])
+    toggleDarkMode()
+  }, [toggleDarkMode])
 
   return (
     <div
       className={cs('breadcrumb', 'button', !hasMounted && styles.hidden)}
       onClick={onToggleTheme}
     >
-      {hasMounted && resolvedTheme === 'dark' ? (
-        <IoMoonSharp />
-      ) : (
-        <IoSunnyOutline />
-      )}
+      {hasMounted && isDarkMode ? <IoMoonSharp /> : <IoSunnyOutline />}
     </div>
   )
 }

components/PageSocial.module.css

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