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

Author: transitive-bullshit

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

lib/use-dark-mode.ts

@@ -0,0 +1,10 @@
+import useDarkModeImpl from '@fisch0920/use-dark-mode'
+
+export function useDarkMode() {
+  const darkMode = useDarkModeImpl(false, { classNameDark: 'dark-mode' })
+
+  return {
+    isDarkMode: darkMode.value,
+    toggleDarkMode: darkMode.toggle
+  }
+}

package.json

@@ -25,6 +25,7 @@
     "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",
@@ -37,7 +38,6 @@
     "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.12.0",
     "notion-types": "^6.11.0",

pages/_app.tsx

@@ -23,7 +23,6 @@ import * as React from 'react'
 import * as Fathom from 'fathom-client'
 import type { AppProps } from 'next/app'
 import { useRouter } from 'next/router'
-import { ThemeProvider } from 'next-themes'
 import posthog from 'posthog-js'
 
 import { bootstrap } from 'lib/bootstrap-client'
@@ -68,9 +67,5 @@ export default function App({ Component, pageProps }: AppProps) {
     }
   }, [router.events])
 
-  return (
-    <ThemeProvider disableTransitionOnChange>
-      <Component {...pageProps} />
-    </ThemeProvider>
-  )
+  return <Component {...pageProps} />
 }

pages/_document.tsx

@@ -20,6 +20,46 @@ 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 />

styles/notion.css

@@ -327,15 +327,15 @@
 }
 
 /* disable highlighting in dark mode */
-[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 {
+.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 {
   padding: 0;
   margin: 0;
   border-radius: 0;
@@ -357,15 +357,15 @@
   backdrop-filter: saturate(180%) blur(16px);
 }
 
-[data-theme='dark'] .notion-header {
+.dark-mode .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() {
-  [data-theme='dark'] .notion-header {
+  .dark-mode .notion-header {
     background: hsla(203, 8%, 20%, 0.8);
   }
 }

yarn.lock

@@ -29,6 +29,14 @@
   resolved "https://registry.npmjs.org/@fisch0920/medium-zoom/-/medium-zoom-1.0.7.tgz"
   integrity sha512-hPUrgVM/QvsZdZzDTPyL1C1mOtEw03RqTLmK7ZlJ8S/64u4O4O5BvPvjB/9kyLtE6iVaS9UDRAMSwmM9uh2JIw==
 
+"@fisch0920/use-dark-mode@^2.4.0":
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/@fisch0920/use-dark-mode/-/use-dark-mode-2.4.0.tgz#92ba90c313a37099879a7b0405280933f9105cdc"
+  integrity sha512-R5onciu81CCOxWVIJcRjp1PfSfBI5fIfxYR2jqydc0nuGWrn4ZB4ciDXiv36PNX5mFIbAgPfjUF0Z5lhSI62TA==
+  dependencies:
+    "@use-it/event-listener" "^0.1.2"
+    use-persisted-state "^0.3.0"
+
 "@humanwhocodes/config-array@^0.9.2":
   version "0.9.5"
   resolved "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.5.tgz"
@@ -612,6 +620,11 @@
     "@typescript-eslint/types" "5.18.0"
     eslint-visitor-keys "^3.0.0"
 
+"@use-it/event-listener@^0.1.2":
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/@use-it/event-listener/-/event-listener-0.1.7.tgz#443a9b6df87f2f2961b74d42997ce723a7078623"
+  integrity sha512-hgfExDzUU9uTRTPDCpw2s9jWTxcxmpJya3fK5ADpf5VDpSy8WYwY/kh28XE0tUcbsljeP8wfan48QvAQTSSa3Q==
+
 "@xobotyi/scrollbar-width@^1.9.5":
   version "1.9.5"
   resolved "https://registry.npmjs.org/@xobotyi/scrollbar-width/-/scrollbar-width-1.9.5.tgz"
@@ -2368,11 +2381,6 @@ next-api-og-image@^2.2.1:
     puppeteer-core "^10.4.0"
     twemoji "^13.1.0"
 
-next-themes@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/next-themes/-/next-themes-0.1.1.tgz#122113a458bf1d1be5ffed66778ab924c106f82a"
-  integrity sha512-Iqxt6rhS/KfK/iHJ0tfFjTcdLEAI0AgwFuAFrMwLOPK5e+MI3I+fzyvBoS+VaOS+NldUiazurhgwYhrfV0VXsQ==
-
 next@^12.1.1:
   version "12.1.3"
   resolved "https://registry.npmjs.org/next/-/next-12.1.3.tgz"
@@ -3763,6 +3771,13 @@ use-callback-ref@^1.2.3:
   resolved "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.2.5.tgz"
   integrity sha512-gN3vgMISAgacF7sqsLPByqoePooY3n2emTH59Ur5d/M8eg4WTWu1xp8i8DHjohftIyEx0S08RiYxbffr4j8Peg==
 
+use-persisted-state@^0.3.0:
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/use-persisted-state/-/use-persisted-state-0.3.3.tgz#5e0f2236967cec7c34de33abc07ae6818e7c7451"
+  integrity sha512-pCNlvYC8+XjRxwnIut4teGC9f2p9aD88R8OGseQGZa2dvqG/h1vEGk1vRE1IZG0Vf161UDpn+NlW4+UGubQflQ==
+  dependencies:
+    "@use-it/event-listener" "^0.1.2"
+
 use-sidecar@^1.0.1:
   version "1.0.5"
   resolved "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.0.5.tgz"