Leave it at that

adhamu · Sep 26, 2023 · 81d0cf7 · 81d0cf7
1 parent 0921e5f
commit 81d0cf7
Show file tree

Hide file tree

Showing 7 changed files with 52 additions and 45 deletions.
diff --git a/src/Wrapper.tsx b/src/Wrapper.tsx
@@ -9,17 +9,18 @@ import { globalStyles } from './theme'
 
 import type { ReactNode } from 'react'
 
-const matchMediaFallback = (): boolean =>
-  window.matchMedia?.('(prefers-color-scheme: dark)')?.matches
-
 const Wrapper = ({ children }: { children: ReactNode }) => {
   const {
-    settings: { prefersDarkMode = matchMediaFallback() },
+    settings: { prefersDarkMode },
     setSetting,
   } = useContext(SettingsContext)
 
   const theme = useTheme()
 
+  if (!theme) {
+    return null
+  }
+
   return (
     <ThemeProvider theme={theme}>
       <Global styles={globalStyles(theme)} />

diff --git a/src/components/DarkModeToggle.tsx b/src/components/DarkModeToggle.tsx
@@ -31,7 +31,7 @@ const ToggleArea = styled(Switch)`
 `
 
 type Props = {
-  isDarkMode: boolean
+  isDarkMode?: boolean
   toggleDarkMode: () => void
 }
 

diff --git a/src/components/Preferences/Theme.tsx b/src/components/Preferences/Theme.tsx
@@ -5,7 +5,6 @@ import styled from '@emotion/styled'
 import Button from './Button'
 import { SettingsContext } from '../../context/SettingsProvider'
 import { useTheme } from '../../hooks/useTheme'
-import { matchMediaFallback } from '../../utils'
 
 import type { Theme } from '@emotion/react'
 
@@ -48,7 +47,7 @@ type AvailableOption =
 
 const Themer = () => {
   const {
-    settings: { prefersDarkMode = matchMediaFallback() },
+    settings: { prefersDarkMode },
     setSetting,
     deleteSetting,
   } = useContext(SettingsContext)

diff --git a/src/context/SettingsProvider.tsx b/src/context/SettingsProvider.tsx
@@ -63,13 +63,13 @@ const SettingsProvider = ({ children }: SettingsProviderProps) => {
     })()
   }, [])
 
-  const setSetting = <
+  const setSetting = async <
     T extends string | boolean | BookmarkLink[] | undefined | Theme,
   >(
     setting: string,
     value: T
   ) => {
-    set(setting, value, store).then(() => {
+    await set(setting, value, store).then(() => {
       setSettings(prevState => ({
         ...prevState,
         [setting]: value,

diff --git a/src/hooks/useTheme.ts b/src/hooks/useTheme.ts
@@ -1,30 +1,37 @@
-import { useContext, useEffect, useState } from 'react'
+import { useContext, useMemo, useState } from 'react'
 
 import { SettingsContext } from '../context/SettingsProvider'
 import { getTheme } from '../theme'
-import { matchMediaFallback } from '../utils'
 
 import type { Theme } from '@emotion/react'
 
-export const useTheme = (): Theme => {
+export const useTheme = () => {
   const {
-    settings: { themeLight, themeDark, prefersDarkMode = matchMediaFallback() },
+    settings: { themeLight, themeDark, prefersDarkMode },
   } = useContext(SettingsContext)
-  const [theme, setTheme] = useState(getTheme(prefersDarkMode))
-
-  useEffect(() => {
-    const refreshTheme = () => {
-      if (prefersDarkMode) {
-        return themeDark !== undefined
-          ? setTheme(themeDark)
-          : setTheme(getTheme(true))
-      }
-
-      return themeLight !== undefined
-        ? setTheme(themeLight)
-        : setTheme(getTheme(false))
+
+  const [theme, setTheme] = useState<Theme>()
+
+  useMemo(() => {
+    let themeToSet
+
+    if (
+      prefersDarkMode ||
+      window.matchMedia?.('(prefers-color-scheme: dark)')?.matches
+    ) {
+      themeToSet = themeDark ?? getTheme(true)
+    }
+
+    if (
+      !prefersDarkMode ||
+      !window.matchMedia?.('(prefers-color-scheme: dark)')?.matches
+    ) {
+      themeToSet = themeLight ?? getTheme(false)
+    }
+
+    if (JSON.stringify(themeToSet) !== JSON.stringify(theme)) {
+      setTheme(themeToSet)
     }
-    refreshTheme()
   }, [prefersDarkMode, themeLight, themeDark])
 
   return theme

diff --git a/src/index.html b/src/index.html
@@ -1,19 +1,21 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <title>Start 🚀</title>
-    <meta charset="utf-8" />
-    <meta name="description" content="Start Page" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600&display=swap"
-      rel="stylesheet"
-    />
-  </head>
 
-  <body>
-    <main id="app"></main>
-    <script type="module" src="./index.tsx"></script>
-  </body>
-</html>
+<head>
+  <title>Start 🚀</title>
+  <meta charset="utf-8" />
+  <meta name="description" content="Start Page" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" />
+  <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600&display=swap" rel="stylesheet" />
+  <style>
+
+  </style>
+</head>
+
+<body>
+  <main id="app"></main>
+  <script type="module" src="./index.tsx"></script>
+</body>
+
+</html>
diff --git a/src/utils.ts b/src/utils.ts