sovonegr/TorrServerJellyfin
1
0
Fork 0
mirror of https://github.com/Ernous/TorrServerJellyfin.git synced 2025-12-19 21:46:11 +05:00
Code Issues Packages Projects Releases Wiki Activity

added theme switcher

Browse Source
This commit is contained in:
Daniel Shleifman
2021-06-26 21:47:33 +03:00
parent 72ff729ee8
commit ca4f78120c
3 changed files with 20 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
web/src/style/materialUISetup.js
View File

@@ -3,35 +3,36 @@ import { useEffect, useMemo, useState } from 'react'
import { mainColors } from './colors'
export const THEME_MODES = { LIGHT: 'light', DARK: 'dark', AUTO: 'auto' }
const typography = { fontFamily: 'Open Sans, sans-serif' }
export const darkTheme = createMuiTheme({
typography,
palette: {
type: 'dark',
type: THEME_MODES.DARK,
primary: { main: mainColors.dark.primary },
},
})
export const lightTheme = createMuiTheme({
typography,
palette: {
type: 'light',
type: THEME_MODES.LIGHT,
primary: { main: mainColors.light.primary },
},
})
export const THEME_MODES = { LIGHT: 'light', DARK: 'dark', AUTO: 'auto' }
export const useMaterialUITheme = () => {
const currentModeState = useMediaQuery('(prefers-color-scheme: dark)')
const [isDarkMode, setIsDarkMode] = useState(currentModeState)
const [currentThemeMode, setCurrentThemeMode] = useState(THEME_MODES.LIGHT)
const savedThemeMode = localStorage.getItem('themeMode')
const isSystemModeDark = useMediaQuery('(prefers-color-scheme: dark)')
const [isDarkMode, setIsDarkMode] = useState(savedThemeMode === 'dark' || isSystemModeDark)
const [currentThemeMode, setCurrentThemeMode] = useState(savedThemeMode || THEME_MODES.LIGHT)
useEffect(() => {
currentThemeMode === THEME_MODES.LIGHT && setIsDarkMode(false)
currentThemeMode === THEME_MODES.DARK && setIsDarkMode(true)
currentThemeMode === THEME_MODES.AUTO && setIsDarkMode(currentModeState)
}, [currentModeState, currentThemeMode])
currentThemeMode === THEME_MODES.AUTO && setIsDarkMode(isSystemModeDark)
}, [isSystemModeDark, currentThemeMode])
const theme = isDarkMode ? THEME_MODES.DARK : THEME_MODES.LIGHT