feat: add support for dark mode

components/Footer.tsx

@@ -1,13 +1,36 @@
 import * as React from 'react'
 import { FaTwitter, FaGithub, FaLinkedin } from 'react-icons/fa'
+import { IoSunnyOutline, IoMoonSharp } from 'react-icons/io5'
 import * as config from 'lib/config'
 
 import styles from './styles.module.css'
 
-export const Footer: React.FC<{}> = () => {
+export const Footer: React.FC<{
+  isDarkMode: boolean
+  setDarkMode: (boolean) => void
+}> = ({ isDarkMode, setDarkMode }) => {
+  const toggleDarkMode = React.useCallback(
+    (e) => {
+      e.preventDefault()
+      setDarkMode(!isDarkMode)
+    },
+    [isDarkMode, setDarkMode]
+  )
+
   return (
     <footer className={styles.footer}>
       <div className={styles.copyright}>Copyright 2021 Travis Fischer</div>
+
+      <div className={styles.settings}>
+        <a
+          className={styles.toggleDarkMode}
+          onClick={toggleDarkMode}
+          title='Tottle dark mode'
+        >
+          {isDarkMode ? <IoMoonSharp /> : <IoSunnyOutline />}
+        </a>
+      </div>
+
       <div className={styles.social}>
         {config.twitter && (
           <a

components/NotionPage.tsx

@@ -48,13 +48,12 @@ export const NotionPage: React.FC<types.PageProps> = ({
   const searchParams = new URLSearchParams(params)
 
   // TODO: add ability to toggle dark mode
-  const [darkMode, setDarkMode] = useLocalStorage(
+  const [isDarkMode, setDarkMode] = useLocalStorage(
     'notionx-dark-mode',
-    !!site?.darkMode
+    dark !== null ? dark === true : !!site?.darkMode
   )
 
   const isLiteMode = lite === 'true'
-  const isDarkMode = dark !== null ? dark === 'true' : darkMode
 
   if (router.isFallback) {
     return <Loading />
@@ -106,7 +105,7 @@ export const NotionPage: React.FC<types.PageProps> = ({
           repo={config.utterancesGitHubRepo}
           issueMap='issue-term'
           issueTerm='title'
-          theme='preferred-color-scheme'
+          theme={isDarkMode ? 'photon-dark' : 'github-light'}
         />
       )
     }
@@ -206,7 +205,7 @@ export const NotionPage: React.FC<types.PageProps> = ({
         mapImageUrl={mapNotionImageUrl}
         searchNotion={searchNotion}
         pageFooter={comments}
-        footer={<Footer />}
+        footer={<Footer isDarkMode={isDarkMode} setDarkMode={setDarkMode} />}
       />
 
       <CustomHtml site={site} />

components/ReactUtterances.tsx

@@ -37,6 +37,7 @@ export class ReactUtterances extends React.Component<
   ReactUtterancesState
 > {
   reference: React.RefObject<HTMLDivElement>
+  scriptElement: any
 
   constructor(props: ReactUtterancesProps) {
     super(props)
@@ -57,6 +58,18 @@ export class ReactUtterances extends React.Component<
     this.state = { pending: true }
   }
 
+  componentWillReceiveProps(props) {
+    // this.scriptElement.setAttribute('theme', props.theme)
+    const iframe = document.querySelector('iframe.utterances-frame') as any
+
+    if (iframe) {
+      iframe.contentWindow.postMessage(
+        { type: 'set-theme', theme: props.theme },
+        'https://utteranc.es/'
+      )
+    }
+  }
+
   componentDidMount(): void {
     const { repo, issueMap, issueTerm, issueNumber, label, theme } = this.props
     const scriptElement = document.createElement('script')
@@ -81,6 +94,7 @@ export class ReactUtterances extends React.Component<
     }
 
     // TODO: Check current availability
+    this.scriptElement = scriptElement
     this.reference.current!.appendChild(scriptElement)
   }
 

components/styles.module.css

@@ -60,7 +60,14 @@
   padding: 0.5em;
 }
 
+.settings,
+.social {
+  user-select: none;
+}
+
+.settings a,
 .social a {
+  cursor: pointer;
   font-size: 2em;
   display: inline-flex;
   padding: 0.25em;
@@ -68,14 +75,20 @@
   transition: color 250ms ease-out;
 }
 
+.settings a:last-of-type,
 .social a:last-of-type {
   margin-right: 0;
 }
 
+.settings a:hover,
 .social a:hover {
   transition: color 50ms ease-out;
 }
 
+.toggleDarkMode:hover {
+  color: #2795e9;
+}
+
 .twitter:hover {
   color: #2795e9;
 }

styles/notion.css

@@ -79,6 +79,7 @@
 }
 
 .notion-collection-card-cover {
+  border-bottom: 0 none;
   transition: filter 150ms linear;
   filter: none;
 }
@@ -116,11 +117,6 @@
   margin: 2em 0;
 }
 
-.notion-dark .notion-collection-card {
-  border: 1px solid var(--fg-color-0);
-  box-shadow: unset;
-}
-
 @media only screen and (max-width: 900px) {
   .notion-collection {
     padding-left: 8px;