mirrors/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2025-05-30 06:45:47 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: add settings dialog

Browse source 
Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
This commit is contained in:
Tilman Vatteroth 2022-07-21 19:36:29 +02:00
parent 39823275a0
commit 4e18ce38f3
45 changed files with 656 additions and 376 deletions
Download patch file Download diff file Expand all files Collapse all files

40
src/hooks/common/use-apply-dark-mode.ts
View file

@ -5,22 +5,48 @@
*/
import { useEffect } from 'react'
import { useIsDarkModeActivated } from './use-is-dark-mode-activated'
import { useApplicationState } from './use-application-state'
import { isClientSideRendering } from '../../utils/is-client-side-rendering'
import { Logger } from '../../utils/logger'
import useMediaQuery from '@restart/hooks/useMediaQuery'
import { DarkModePreference } from '../../redux/dark-mode/types'
const logger = new Logger('useApplyDarkMode')
export const DARK_MODE_LOCAL_STORAGE_KEY = 'forcedDarkMode'
/**
* Applies the `dark` css class to the body tag according to the dark mode state.
*/
export const useApplyDarkMode = (): void => {
const darkModeActivated = useIsDarkModeActivated()
const preference = useApplicationState((state) => state.darkMode.darkModePreference)
const isBrowserPreferringDark = useMediaQuery('(prefers-color-scheme: dark)')
useEffect(() => saveToLocalStorage(preference), [preference])
useEffect(() => {
if (darkModeActivated) {
if (preference === DarkModePreference.DARK || (preference === DarkModePreference.AUTO && isBrowserPreferringDark)) {
window.document.body.classList.add('dark')
} else {
window.document.body.classList.remove('dark')
}
return () => {
window.document.body.classList.remove('dark')
}
}, [darkModeActivated])
}, [isBrowserPreferringDark, preference])
useEffect(() => () => window.document.body.classList.remove('dark'), [])
}
export const saveToLocalStorage = (preference: DarkModePreference): void => {
if (!isClientSideRendering()) {
return
}
try {
if (preference === DarkModePreference.DARK) {
window.localStorage.setItem(DARK_MODE_LOCAL_STORAGE_KEY, 'dark')
} else if (preference === DarkModePreference.LIGHT) {
window.localStorage.setItem(DARK_MODE_LOCAL_STORAGE_KEY, 'light')
} else if (preference === DarkModePreference.AUTO) {
window.localStorage.removeItem(DARK_MODE_LOCAL_STORAGE_KEY)
}
} catch (error) {
logger.error('Saving to local storage failed', error)
}
}