VSinerva/freesewing
1
0
Fork 0
Code Activity

add useTheme to useApps

Browse source
This commit is contained in:
Enoch Riese 2022-06-06 13:12:34 -05:00
parent 5553293476
commit 45e83c0225
5 changed files with 9 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

8
packages/freesewing.dev/hooks/useApp.js
View file

@ -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)

8
packages/freesewing.lab/hooks/useApp.js
View file

@ -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)

8
packages/freesewing.org/hooks/useApp.js
View file

@ -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)

1
packages/freesewing.shared/hooks/useLocalStorage.js
View file

@ -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);

4
packages/freesewing.shared/hooks/useTheme.js
View file

@ -5,15 +5,13 @@ 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')
}
}
}, [ready])
return [storedTheme, setStoredTheme];