added theme switcher

web/src/components/App/index.jsx

@@ -82,9 +82,14 @@ export default function App() {
                   >
                     <HeaderToggle
                       onClick={() => {
-                        currentThemeMode === THEME_MODES.LIGHT && setCurrentThemeMode(THEME_MODES.DARK)
+                        const updateThemeMode = mode => {
-                        currentThemeMode === THEME_MODES.DARK && setCurrentThemeMode(THEME_MODES.AUTO)
+                          setCurrentThemeMode(mode)
-                        currentThemeMode === THEME_MODES.AUTO && setCurrentThemeMode(THEME_MODES.LIGHT)
+                          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 ? (

web/src/components/DialogTorrentDetailsContent/TorrentCache/index.jsx

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

web/src/style/materialUISetup.js

@@ -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 savedThemeMode = localStorage.getItem('themeMode')
-  const [isDarkMode, setIsDarkMode] = useState(currentModeState)
+  const isSystemModeDark = useMediaQuery('(prefers-color-scheme: dark)')
-  const [currentThemeMode, setCurrentThemeMode] = useState(THEME_MODES.LIGHT)
+  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)
+    currentThemeMode === THEME_MODES.AUTO && setIsDarkMode(isSystemModeDark)
-  }, [currentModeState, currentThemeMode])
+  }, [isSystemModeDark, currentThemeMode])
 
   const theme = isDarkMode ? THEME_MODES.DARK : THEME_MODES.LIGHT