add useTheme to useApps

packages/freesewing.dev/hooks/useApp.js

@@ -2,6 +2,7 @@ import { useState } from 'react'
 import set from 'lodash.set'
 // Stores state in local storage
 import useLocalStorage from 'shared/hooks/useLocalStorage.js'
+import useTheme from 'shared/hooks/useTheme'
 // Prebuild navigation
 import prebuildNavigation from 'site/prebuild/navigation.js'
 
@@ -9,14 +10,9 @@ function useApp(full = true) {
   // No translation for freesewing.dev
   const language = 'en'
 
-  // User color scheme preference
-  const prefersDarkMode = (typeof window !== 'undefined' && typeof  window.matchMedia === 'function')
-    ? window.matchMedia(`(prefers-color-scheme: dark`).matches
-    : null
-
   // Persistent state
   const [account, setAccount] = useLocalStorage('account', { username: false })
-  const [theme, setTheme] = useLocalStorage('theme', prefersDarkMode ? 'dark' : 'light')
+  const [theme, setTheme] = useTheme();
 
   // React State
   const [primaryMenu, setPrimaryMenu] = useState(false)

packages/freesewing.lab/hooks/useApp.js

@@ -7,6 +7,7 @@ import patterns from 'shared/config/designs.json'
 import { useTranslation } from 'next-i18next'
 import { capitalize } from 'shared/utils'
 import useVersion from 'site/hooks/useVersion.js'
+import useTheme from 'shared/hooks/useTheme'
 
 // Initial navigation
 const initialNavigation = (t, version) => {
@@ -58,14 +59,9 @@ function useApp(full = true) {
   // Locale (aka language)
   const { t } = useTranslation(['app'])
 
-  // User color scheme preference
-  const prefersDarkMode = (typeof window !== 'undefined' && typeof  window.matchMedia === 'function')
-    ? window.matchMedia(`(prefers-color-scheme: dark`).matches
-    : null
-
   // Persistent state
   const [account, setAccount] = useLocalStorage('account', { username: false })
-  const [theme, setTheme] = useLocalStorage('theme', prefersDarkMode ? 'dark' : 'light')
+  const [theme, setTheme] = useTheme();
 
   // React State
   const [primaryMenu, setPrimaryMenu] = useState(false)

packages/freesewing.org/hooks/useApp.js

@@ -3,6 +3,7 @@ import get from 'lodash.get'
 import set from 'lodash.set'
 // Stores state in local storage
 import useLocalStorage from 'shared/hooks/useLocalStorage.js'
+import useTheme from 'shared/hooks/useTheme'
 // Prebuild navigation
 import prebuildNavigation from 'site/prebuild/navigation.js'
 // Translation
@@ -68,14 +69,9 @@ function useApp(full = true) {
   const locale = useRouter().locale
   const { t } = useTranslation()
 
-  // User color scheme preference
-  const prefersDarkMode = (typeof window !== 'undefined' && typeof  window.matchMedia === 'function')
-    ? window.matchMedia(`(prefers-color-scheme: dark`).matches
-    : null
-
   // Persistent state
   const [account, setAccount] = useLocalStorage('account', { username: false })
-  const [theme, setTheme] = useLocalStorage('theme', prefersDarkMode ? 'dark' : 'light')
+  const [theme, setTheme] = useTheme()
 
   // React State
   const [primaryMenu, setPrimaryMenu] = useState(false)

packages/freesewing.shared/hooks/useLocalStorage.js

@@ -1,7 +1,6 @@
 import { useState, useEffect } from 'react'
 
 // See: https://usehooks.com/useLocalStorage/
-
 function useLocalStorage(key, initialValue) {
   const prefix = 'fs_'
   const [storedValue, setStoredValue] = useState(initialValue);

packages/freesewing.shared/hooks/useTheme.js

@@ -5,18 +5,16 @@ function useTheme() {
   const [storedTheme, setStoredTheme, ready] = useLocalStorage('theme', undefined);
 
   useEffect(() => {
-    if (ready) {
+    if (ready && storedTheme === undefined) {
       const prefersDarkMode = (typeof window !== 'undefined' && typeof window.matchMedia === 'function')
         ? window.matchMedia(`(prefers-color-scheme: dark`).matches
         : null
 
-      if (storedTheme === undefined) {
+      setStoredTheme(prefersDarkMode ? 'dark' : 'light')
-        setStoredTheme(prefersDarkMode ? 'dark' : 'light')
-      }
     }
   }, [ready])
 
   return [storedTheme, setStoredTheme];
 }
 
-export default useTheme;
+export default useTheme;