feat[frontend]: monitor query change on system dark mode

Author: SharzyL

frontend/components/DarkModeToggle.tsx

@@ -1,56 +1,82 @@
-import React, { JSX, useEffect } from "react"
+import React, { JSX, useEffect, useState, useSyncExternalStore } from "react"
 import { ComputerIcon, MoonIcon, SunIcon } from "./icons.js"
 import { Button, ButtonProps, Tooltip } from "@heroui/react"
 import { tst } from "../utils/overrides.js"
 
-export type DarkMode = "dark" | "light" | "system"
-
-interface MyComponentProps extends ButtonProps {
-  mode: DarkMode
-  onModeChange: (newMode: DarkMode) => void
+const modeSelections = ["system", "light", "dark"]
+type ModeSelection = (typeof modeSelections)[number]
+const icons: Record<ModeSelection, JSX.Element> = {
+  system: <ComputerIcon className="size-6 inline" />,
+  light: <SunIcon className="size-6 inline" />,
+  dark: <MoonIcon className="size-6 inline" />,
 }
 
-const icons: { name: DarkMode; icon: JSX.Element }[] = [
-  { name: "system", icon: <ComputerIcon className="size-6 inline" /> },
-  { name: "light", icon: <SunIcon className="size-6 inline" /> },
-  { name: "dark", icon: <MoonIcon className="size-6 inline" /> },
-]
+export function useDarkModeSelection(): [
+  boolean,
+  ModeSelection | undefined,
+  React.Dispatch<React.SetStateAction<ModeSelection | undefined>>,
+] {
+  const [modeSelection, setModeSelection] = useState<ModeSelection | undefined>(undefined)
 
-export function defaultDarkMode(): DarkMode {
-  const storedDarkModeSelect = localStorage.getItem("darkModeSelect")
+  const isSystemDark = useSyncExternalStore<boolean>(
+    (callBack) => {
+      const mql = window.matchMedia("(prefers-color-scheme: dark)")
+      mql.addEventListener("change", callBack)
+      return () => {
+        mql.removeEventListener("change", callBack)
+      }
+    },
+    () => {
+      return window.matchMedia("(prefers-color-scheme: dark)").matches
+    },
+    () => false,
+  )
 
-  if (storedDarkModeSelect !== null && ["light", "dark", "system"].includes(storedDarkModeSelect)) {
-    return storedDarkModeSelect as DarkMode
-  } else {
-    return "system"
-  }
-}
+  useEffect(() => {
+    if (modeSelection) {
+      localStorage.setItem("darkModeSelect", modeSelection)
+    }
+  }, [modeSelection])
 
-export function shouldBeDark(mode: DarkMode): boolean {
-  // when matchMedia not available (e.g. in tests), set to light mode
-  const systemDark = window.matchMedia ? window.matchMedia("(prefers-color-scheme: dark)").matches : false
-  return mode === "system" ? systemDark : mode === "dark"
+  useEffect(() => {
+    const item = localStorage.getItem("darkModeSelect")
+    let storedSelect: ModeSelection | undefined
+    if (item !== null) {
+      if (item && modeSelections.includes(item)) {
+        storedSelect = item
+      } else {
+        storedSelect = "system"
+      }
+    } else {
+      storedSelect = "system"
+    }
+    setModeSelection(storedSelect)
+  }, [])
+
+  const isDark = modeSelection === undefined || modeSelection === "system" ? isSystemDark : modeSelection === "dark"
+  return [isDark, modeSelection, setModeSelection]
 }
 
-export function DarkModeToggle({ mode, onModeChange, className, ...rest }: MyComponentProps) {
-  useEffect(() => {
-    localStorage.setItem("darkModeSelect", mode)
-  }, [mode])
+interface MyComponentProps extends ButtonProps {
+  modeSelection: ModeSelection | undefined
+  setModeSelection: React.Dispatch<React.SetStateAction<ModeSelection | undefined>>
+}
 
-  return (
-    <Tooltip content={`Toggle dark mode (currently ${mode})`}>
+export function DarkModeToggle({ modeSelection, setModeSelection, className, ...rest }: MyComponentProps) {
+  return modeSelection ? (
+    <Tooltip content={`Toggle dark mode (currently ${modeSelection} mode)`}>
       <Button
         isIconOnly
         className={`mr-2 rounded-full ${tst} bg-background hover:bg-default-100` + " " + className}
         aria-label="Toggle dark mode"
         onPress={() => {
-          const curModeIdx = icons.findIndex(({ name }) => name === mode)
-          onModeChange(icons[(curModeIdx + 1) % icons.length].name)
+          const newSelected = modeSelections[(modeSelections.indexOf(modeSelection) + 1) % modeSelections.length]
+          setModeSelection(newSelected)
         }}
         {...rest}
       >
-        {icons.find(({ name }) => name === mode)!.icon}
+        {icons[modeSelection]}
       </Button>
     </Tooltip>
-  )
+  ) : null
 }

frontend/components/DecryptPaste.tsx

@@ -8,7 +8,7 @@ import { CheckIcon, CopyIcon, DownloadIcon, HomeIcon } from "./icons.js"
 import "../style.css"
 import { parseFilenameFromContentDisposition, parsePath } from "../../shared/parsers.js"
 import { formatSize } from "../utils/utils.js"
-import { DarkMode, DarkModeToggle, defaultDarkMode, shouldBeDark } from "./DarkModeToggle.js"
+import { DarkModeToggle, useDarkModeSelection } from "./DarkModeToggle.js"
 import binaryExtensions from "binary-extensions"
 import { tst } from "../utils/overrides.js"
 
@@ -121,7 +121,7 @@ export function DecryptPaste() {
     </div>
   )
 
-  const [darkModeSelect, setDarkModeSelect] = useState<DarkMode>(defaultDarkMode())
+  const [isDark, modeSelection, setModeSelection] = useDarkModeSelection()
 
   const numOfIssuedCopies = useRef(0)
   const [hasIssuedCopies, setHasIssuedCopies] = useState<boolean>(false)
@@ -147,7 +147,7 @@ export function DecryptPaste() {
     <main
       className={
         `flex flex-col items-center min-h-screen transition-transform-background bg-background ${tst} text-foreground w-full p-2` +
-        (shouldBeDark(darkModeSelect) ? " dark" : " light")
+        (isDark ? " dark" : " light")
       }
     >
       <div className="w-full max-w-[64rem]">
@@ -179,7 +179,7 @@ export function DecryptPaste() {
               </Button>
             </Tooltip>
           )}
-          <DarkModeToggle mode={darkModeSelect} onModeChange={setDarkModeSelect} className={buttonClasses} />
+          <DarkModeToggle modeSelection={modeSelection} setModeSelection={setModeSelection} />
         </div>
         <div className="my-4">
           <div className={`min-h-[30rem] w-full bg-secondary-50 rounded-lg p-3 relative ${tst}`}>

frontend/components/PasteBin.tsx

@@ -5,7 +5,7 @@ import { Button, Link } from "@heroui/react"
 import { PasteResponse } from "../../shared/interfaces.js"
 import { parsePath, parseFilenameFromContentDisposition } from "../../shared/parsers.js"
 
-import { DarkModeToggle, DarkMode, defaultDarkMode, shouldBeDark } from "./DarkModeToggle.js"
+import { DarkModeToggle, useDarkModeSelection } from "./DarkModeToggle.js"
 import { ErrorModal, ErrorState } from "./ErrorModal.js"
 import { PanelSettingsPanel, PasteSetting } from "./PasteSettingPanel.js"
 
@@ -50,7 +50,7 @@ export function PasteBin() {
 
   const [errorState, setErrorState] = useState<ErrorState>({ isOpen: false, content: "", title: "" })
 
-  const [darkModeSelect, setDarkModeSelect] = useState<DarkMode>(defaultDarkMode())
+  const [isDark, modeSelection, setModeSelection] = useDarkModeSelection()
 
   function showModal(title: string, content: string) {
     setErrorState({ title, content, isOpen: true })
@@ -175,7 +175,11 @@ export function PasteBin() {
     <div className="mx-4 lg:mx-0">
       <div className="mt-8 mb-4 relative">
         <h1 className="text-3xl inline">{INDEX_PAGE_TITLE}</h1>
-        <DarkModeToggle mode={darkModeSelect} onModeChange={setDarkModeSelect} className="absolute right-0" />
+        <DarkModeToggle
+          modeSelection={modeSelection}
+          setModeSelection={setModeSelection}
+          className="absolute right-0"
+        />
       </div>
       <p className="my-2">An open source pastebin deployed on Cloudflare Workers. </p>
       <p className="my-2">
@@ -225,7 +229,7 @@ export function PasteBin() {
     <main
       className={
         `flex flex-col items-center min-h-screen font-sans ${tst} bg-background text-foreground` +
-        (shouldBeDark(darkModeSelect) ? " dark" : " light")
+        (isDark ? " dark" : " light")
       }
     >
       <div className="grow w-full max-w-[64rem]">