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

11
web/src/components/App/index.jsx
View File

@@ -82,9 +82,14 @@ export default function App() {
>
<HeaderToggle
onClick={() => {
currentThemeMode === THEME_MODES.LIGHT && setCurrentThemeMode(THEME_MODES.DARK)
currentThemeMode === THEME_MODES.DARK && setCurrentThemeMode(THEME_MODES.AUTO)
currentThemeMode === THEME_MODES.AUTO && setCurrentThemeMode(THEME_MODES.LIGHT)
const updateThemeMode = mode => {
setCurrentThemeMode(mode)
localStorage.setItem('themeMode', mode)
}
if (currentThemeMode === THEME_MODES.LIGHT) updateThemeMode(THEME_MODES.DARK)
if (currentThemeMode === THEME_MODES.DARK) updateThemeMode(THEME_MODES.AUTO)
if (currentThemeMode === THEME_MODES.AUTO) updateThemeMode(THEME_MODES.LIGHT)
}}
>
{currentThemeMode === THEME_MODES.LIGHT ? (

3
web/src/components/DialogTorrentDetailsContent/TorrentCache/index.jsx
View File

@@ -3,6 +3,7 @@ import { useState, memo, useRef, useEffect, useContext } from 'react'
import { useTranslation } from 'react-i18next'
import isEqual from 'lodash/isEqual'
import { DarkModeContext } from 'components/App'
import { THEME_MODES } from 'style/materialUISetup'
import { useCreateCacheMap } from '../customHooks'
import getShortCacheMap from './getShortCacheMap'
@@ -18,7 +19,7 @@ const TorrentCache = ({ cache, isMini }) => {
const cacheMap = useCreateCacheMap(cache)
const settingsTarget = isMini ? 'mini' : 'default'
const { isDarkMode } = useContext(DarkModeContext)
const theme = isDarkMode ? 'dark' : 'light'
const theme = isDarkMode ? THEME_MODES.DARK : THEME_MODES.LIGHT
const {
readerColor,

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