feat: fix dark mode

components/Footer.tsx

@@ -7,14 +7,14 @@ import styles from './styles.module.css'
 
 export const Footer: React.FC<{
   isDarkMode: boolean
-  setDarkMode: (boolean) => void
-}> = ({ isDarkMode, setDarkMode }) => {
-  const toggleDarkMode = React.useCallback(
+  toggleDarkMode: () => void
+}> = ({ isDarkMode, toggleDarkMode }) => {
+  const toggleDarkModeCb = React.useCallback(
     (e) => {
       e.preventDefault()
-      setDarkMode(!isDarkMode)
+      toggleDarkMode()
     },
-    [isDarkMode, setDarkMode]
+    [toggleDarkMode]
   )
 
   return (
@@ -24,7 +24,7 @@ export const Footer: React.FC<{
       <div className={styles.settings}>
         <a
           className={styles.toggleDarkMode}
-          onClick={toggleDarkMode}
+          onClick={toggleDarkModeCb}
           title='Tottle dark mode'
         >
           {isDarkMode ? <IoMoonSharp /> : <IoSunnyOutline />}

components/NotionPage.tsx

@@ -4,8 +4,9 @@ import Link from 'next/link'
 import dynamic from 'next/dynamic'
 import cs from 'classnames'
 import { useRouter } from 'next/router'
-import { useLocalStorage, useSearchParam } from 'react-use'
+import { useSearchParam } from 'react-use'
 import BodyClassName from 'react-body-classname'
+import useDarkMode from 'use-dark-mode'
 
 // core notion renderer
 import { NotionRenderer, Code, Collection, CollectionRow } from 'react-notion-x'
@@ -35,11 +36,11 @@ import styles from './styles.module.css'
 // const Code = dynamic(() =>
 //   import('react-notion-x').then((notion) => notion.Code)
 // )
-
+//
 // const Collection = dynamic(() =>
 //   import('react-notion-x').then((notion) => notion.Collection)
 // )
-
+//
 // const CollectionRow = dynamic(
 //   () => import('react-notion-x').then((notion) => notion.CollectionRow),
 //   {
@@ -66,23 +67,16 @@ export const NotionPage: React.FC<types.PageProps> = ({
   pageId
 }) => {
   const router = useRouter()
-
-  const dark = useSearchParam('dark')
   const lite = useSearchParam('lite')
 
   const params: any = {}
-  if (dark) params.dark = dark
   if (lite) params.lite = lite
 
+  // lite mode is for oembed
+  const isLiteMode = lite === 'true'
   const searchParams = new URLSearchParams(params)
 
-  // TODO: add ability to toggle dark mode
-  const [isDarkMode, setDarkMode] = useLocalStorage(
-    'notionx-dark-mode',
-    dark !== null ? dark === 'true' : !!site?.darkMode
-  )
-
-  const isLiteMode = lite === 'true'
+  const darkMode = useDarkMode(false, { classNameDark: 'dark-mode' })
 
   if (router.isFallback) {
     return <Loading />
@@ -137,7 +131,7 @@ export const NotionPage: React.FC<types.PageProps> = ({
           repo={config.utterancesGitHubRepo}
           issueMap='issue-term'
           issueTerm='title'
-          theme={isDarkMode ? 'photon-dark' : 'github-light'}
+          theme={darkMode.value ? 'photon-dark' : 'github-light'}
         />
       )
     }
@@ -235,7 +229,7 @@ export const NotionPage: React.FC<types.PageProps> = ({
         recordMap={recordMap}
         rootPageId={site.rootNotionPageId}
         fullPage={!isLiteMode}
-        darkMode={isDarkMode}
+        darkMode={darkMode.value}
         previewImages={site.previewImages !== false}
         showCollectionViewDropdown={false}
         showTableOfContents={showTableOfContents}
@@ -248,7 +242,12 @@ export const NotionPage: React.FC<types.PageProps> = ({
         searchNotion={searchNotion}
         pageFooter={comments}
         pageAside={pageAside}
-        footer={<Footer isDarkMode={isDarkMode} setDarkMode={setDarkMode} />}
+        footer={
+          <Footer
+            isDarkMode={darkMode.value}
+            toggleDarkMode={darkMode.toggle}
+          />
+        }
       />
 
       <CustomHtml site={site} />

package.json

@@ -46,8 +46,9 @@
     "react-body-classname": "^1.3.1",
     "react-dom": "17.0.1",
     "react-icons": "^4.1.0",
-    "react-notion-x": "^4.0.0",
-    "react-use": "^15.3.3"
+    "react-notion-x": "^4.1.0",
+    "react-use": "^15.3.3",
+    "use-dark-mode": "^2.3.1"
   },
   "devDependencies": {
     "@next/bundle-analyzer": "^10.0.5",

pages/_document.tsx

@@ -38,6 +38,8 @@ export default class MyDocument extends Document {
           </Head>
 
           <body>
+            <script src='noflash.js' />
+
             <Main />
 
             <NextScript />

public/noflash.js

@@ -0,0 +1,40 @@
+// Insert this script in your index.html right after the <body> tag.
+// This will help to prevent a flash if dark mode is the default.
+
+;(function () {
+  // Change these if you use something different in your hook.
+  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))
+  }
+})()

yarn.lock

@@ -542,6 +542,11 @@
     "@typescript-eslint/types" "4.14.1"
     eslint-visitor-keys "^2.0.0"
 
+"@use-it/event-listener@^0.1.2":
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/@use-it/event-listener/-/event-listener-0.1.6.tgz#5776274fec72f3f25af9ead1898e7f45bc435812"
+  integrity sha512-e6V7vbU8xpuqy4GZkTLExHffOFgxmGHo3kNWnlhzM/zcX2v+idbD/HaJ9sKdQMgTh+L7MIhdRDXGX3SdAViZzA==
+
 "@webassemblyjs/ast@1.9.0":
   version "1.9.0"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.9.0.tgz#bd850604b4042459a5a41cd7d338cbed695ed964"
@@ -5304,10 +5309,10 @@ react-modal@^3.11.2:
     react-lifecycles-compat "^3.0.0"
     warning "^4.0.3"
 
-react-notion-x@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/react-notion-x/-/react-notion-x-4.0.0.tgz#018a65b36838be995ad9062268286709771bd9b6"
-  integrity sha512-oZ4LptNfHV7XWYJKyc7oI1d4GtDwdd5x6ajqh8Sej33sBz6sSHgNMVu6uGL9NDAtGoLv3glcsVxS/HwBfbvDuw==
+react-notion-x@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/react-notion-x/-/react-notion-x-4.1.0.tgz#ce8d9e64d1f4f08d39b71250607dc3df53144862"
+  integrity sha512-YlCXG5bRohG3p6l8gLITQ7yV4aT57e9D7rjzGTcwT0/OZUeGcLsvr8rS2cF1HsRJHjDD4sQvk6+/zwSFsjDRsQ==
   dependencies:
     "@matejmazur/react-katex" "^3.1.3"
     date-fns "^2.15.0"
@@ -6669,6 +6674,21 @@ url@^0.11.0:
     punycode "1.3.2"
     querystring "0.2.0"
 
+use-dark-mode@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/use-dark-mode/-/use-dark-mode-2.3.1.tgz#d506349c7b7e09e9977cb8a6ab4470896aa3779a"
+  integrity sha512-hmcdJR96tTustRQdaQwe6jMrZHnmPqXBxgy4jaQ4gsfhwajsCpjECuq9prgDe9XxMx/f9r96o2/md6O4Lwhwjg==
+  dependencies:
+    "@use-it/event-listener" "^0.1.2"
+    use-persisted-state "^0.3.0"
+
+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-subscription@1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/use-subscription/-/use-subscription-1.5.1.tgz#73501107f02fad84c6dd57965beb0b75c68c42d1"