added dark theme

web/src/components/App/Sidebar.jsx

@@ -21,18 +21,24 @@ const Sidebar = ({ isDrawerOpen, setIsDonationDialogOpen, isOffline, isLoading }
     <AppSidebarStyle isDrawerOpen={isDrawerOpen}>
       <List>
         <AddDialogButton isOffline={isOffline} isLoading={isLoading} />
+
         <RemoveAll isOffline={isOffline} isLoading={isLoading} />
       </List>
+
       <Divider />
+
       <List>
         <SettingsDialog />
+
         <AboutDialog />
+
         <ListItem button onClick={() => setIsDonationDialogOpen(true)}>
           <ListItemIcon>
             <CreditCardIcon />
           </ListItemIcon>
           <ListItemText primary={t('Donate')} />
         </ListItem>
+
         <CloseServer isOffline={isOffline} isLoading={isLoading} />
       </List>
     </AppSidebarStyle>

web/src/components/App/index.jsx

@@ -1,8 +1,14 @@
 import CssBaseline from '@material-ui/core/CssBaseline'
-import { useEffect, useState } from 'react'
+import { createContext, useEffect, useState } from 'react'
 import Typography from '@material-ui/core/Typography'
 import IconButton from '@material-ui/core/IconButton'
-import { Menu as MenuIcon, Close as CloseIcon } from '@material-ui/icons'
+import {
+  Menu as MenuIcon,
+  Close as CloseIcon,
+  Brightness4 as Brightness4Icon,
+  Brightness5 as Brightness5Icon,
+  BrightnessAuto as BrightnessAutoIcon,
+} from '@material-ui/icons'
 import { echoHost } from 'utils/Hosts'
 import Div100vh from 'react-div-100vh'
 import axios from 'axios'
@@ -16,18 +22,20 @@ import { useQuery } from 'react-query'
 import { getTorrents } from 'utils/Utils'
 import GlobalStyle from 'style/GlobalStyle'
 
-import { AppWrapper, AppHeader, LanguageSwitch } from './style'
+import { AppWrapper, AppHeader, HeaderToggle } from './style'
 import Sidebar from './Sidebar'
-import { darkTheme, lightTheme, useMaterialUITheme } from '../../style/materialUISetup'
+import { lightTheme, THEME_MODES, useMaterialUITheme } from '../../style/materialUISetup'
 import getStyledComponentsTheme from '../../style/getStyledComponentsTheme'
 
+export const DarkModeContext = createContext()
+
 export default function App() {
   const [isDrawerOpen, setIsDrawerOpen] = useState(false)
   const [isDonationDialogOpen, setIsDonationDialogOpen] = useState(false)
   const [torrServerVersion, setTorrServerVersion] = useState('')
 
   // https://material-ui.com/ru/customization/palette/
-  const [isDarkMode, muiTheme] = useMaterialUITheme()
+  const [isDarkMode, currentThemeMode, setCurrentThemeMode, muiTheme] = useMaterialUITheme()
   const [currentLang, changeLang] = useChangeLanguage()
   const [isOffline, setIsOffline] = useState(false)
   const { data: torrents, isLoading } = useQuery('torrents', getTorrents, {
@@ -45,54 +53,74 @@ export default function App() {
     <>
       <GlobalStyle />
 
-      <MuiThemeProvider theme={muiTheme}>
-        <StyledComponentsThemeProvider theme={getStyledComponentsTheme(isDarkMode ? 'dark' : 'light')}>
-          <CssBaseline />
+      <DarkModeContext.Provider value={{ isDarkMode }}>
+        <MuiThemeProvider theme={muiTheme}>
+          <StyledComponentsThemeProvider
+            theme={getStyledComponentsTheme(isDarkMode ? THEME_MODES.DARK : THEME_MODES.LIGHT)}
+          >
+            <CssBaseline />
 
-          {/* Div100vh - iOS WebKit fix  */}
-          <Div100vh>
-            <AppWrapper>
-              <AppHeader>
-                <IconButton
-                  style={{ marginRight: '20px' }}
-                  color='inherit'
-                  onClick={() => setIsDrawerOpen(!isDrawerOpen)}
-                  edge='start'
-                >
-                  {isDrawerOpen ? <CloseIcon /> : <MenuIcon />}
-                </IconButton>
+            {/* Div100vh - iOS WebKit fix  */}
+            <Div100vh>
+              <AppWrapper>
+                <AppHeader>
+                  <IconButton
+                    style={{ marginRight: '20px' }}
+                    color='inherit'
+                    onClick={() => setIsDrawerOpen(!isDrawerOpen)}
+                    edge='start'
+                  >
+                    {isDrawerOpen ? <CloseIcon /> : <MenuIcon />}
+                  </IconButton>
 
-                <Typography variant='h6' noWrap>
-                  TorrServer {torrServerVersion}
-                </Typography>
+                  <Typography variant='h6' noWrap>
+                    TorrServer {torrServerVersion}
+                  </Typography>
 
-                <div style={{ justifySelf: 'end' }}>
-                  <LanguageSwitch onClick={() => (currentLang === 'en' ? changeLang('ru') : changeLang('en'))}>
-                    {currentLang === 'en' ? 'RU' : 'EN'}
-                  </LanguageSwitch>
-                </div>
-              </AppHeader>
+                  <div
+                    style={{ justifySelf: 'end', display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '10px' }}
+                  >
+                    <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)
+                      }}
+                    >
+                      {currentThemeMode === THEME_MODES.LIGHT ? (
+                        <Brightness5Icon />
+                      ) : currentThemeMode === THEME_MODES.DARK ? (
+                        <Brightness4Icon />
+                      ) : (
+                        <BrightnessAutoIcon />
+                      )}
+                    </HeaderToggle>
+
+                    <HeaderToggle onClick={() => (currentLang === 'en' ? changeLang('ru') : changeLang('en'))}>
+                      {currentLang === 'en' ? 'RU' : 'EN'}
+                    </HeaderToggle>
+                  </div>
+                </AppHeader>
 
-              <MuiThemeProvider theme={darkTheme}>
                 <Sidebar
                   isOffline={isOffline}
                   isLoading={isLoading}
                   isDrawerOpen={isDrawerOpen}
                   setIsDonationDialogOpen={setIsDonationDialogOpen}
                 />
-              </MuiThemeProvider>
 
-              <TorrentList isOffline={isOffline} torrents={torrents} isLoading={isLoading} />
+                <TorrentList isOffline={isOffline} torrents={torrents} isLoading={isLoading} />
 
-              <MuiThemeProvider theme={lightTheme}>
-                {isDonationDialogOpen && <DonateDialog onClose={() => setIsDonationDialogOpen(false)} />}
-              </MuiThemeProvider>
+                <MuiThemeProvider theme={lightTheme}>
+                  {isDonationDialogOpen && <DonateDialog onClose={() => setIsDonationDialogOpen(false)} />}
+                </MuiThemeProvider>
 
-              {!JSON.parse(localStorage.getItem('snackbarIsClosed')) && <DonateSnackbar />}
-            </AppWrapper>
-          </Div100vh>
-        </StyledComponentsThemeProvider>
-      </MuiThemeProvider>
+                {!JSON.parse(localStorage.getItem('snackbarIsClosed')) && <DonateSnackbar />}
+              </AppWrapper>
+            </Div100vh>
+          </StyledComponentsThemeProvider>
+        </MuiThemeProvider>
+      </DarkModeContext.Provider>
     </>
   )
 }

web/src/components/App/style.js

@@ -1,14 +1,21 @@
+import { rgba } from 'polished'
 import styled, { css } from 'styled-components'
 
 export const AppWrapper = styled.div`
-  height: 100%;
-  background: #cbe8d9;
-  display: grid;
-  grid-template-columns: 60px 1fr;
-  grid-template-rows: 60px 1fr;
-  grid-template-areas:
-    'head head'
-    'side content';
+  ${({
+    theme: {
+      app: { appSecondaryColor },
+    },
+  }) => css`
+    height: 100%;
+    background: ${rgba(appSecondaryColor, 0.8)};
+    display: grid;
+    grid-template-columns: 60px 1fr;
+    grid-template-rows: 60px 1fr;
+    grid-template-areas:
+      'head head'
+      'side content';
+  `}
 `
 
 export const CenteredGrid = styled.div`
@@ -32,16 +39,25 @@ export const AppHeader = styled.div`
   `}
 `
 export const AppSidebarStyle = styled.div`
-  ${({ isDrawerOpen }) => css`
+  ${({
+    isDrawerOpen,
+    theme: {
+      app: { appSecondaryColor, sidebarBGColor, sidebarFillColor },
+    },
+  }) => css`
     grid-area: side;
     width: ${isDrawerOpen ? '400%' : '100%'};
     z-index: 2;
     overflow-x: hidden;
     transition: width 195ms cubic-bezier(0.4, 0, 0.6, 1) 0ms;
-    border-right: 1px solid rgba(0, 0, 0, 0.12);
-    background: #575757;
-    color: #eee;
+    border-right: 1px solid ${rgba(appSecondaryColor, 0.12)};
+    background: ${sidebarBGColor};
+    color: ${sidebarFillColor};
     white-space: nowrap;
+
+    svg {
+      fill: ${sidebarFillColor};
+    }
   `}
 `
 export const TorrentListWrapper = styled.div`
@@ -69,25 +85,31 @@ export const TorrentListWrapper = styled.div`
   }
 `
 
-export const LanguageSwitch = styled.div`
-  cursor: pointer;
-  border-radius: 50%;
-  background: #56b887;
-  height: 35px;
-  width: 35px;
-  transition: all 0.2s;
-  font-weight: 600;
-  display: grid;
-  place-items: center;
-  color: #fff;
+export const HeaderToggle = styled.div`
+  ${({
+    theme: {
+      app: { headerToggleColor },
+    },
+  }) => css`
+    cursor: pointer;
+    border-radius: 50%;
+    background: ${headerToggleColor};
+    height: 35px;
+    width: 35px;
+    transition: all 0.2s;
+    font-weight: 600;
+    display: grid;
+    place-items: center;
+    color: #fff;
 
-  :hover {
-    background: #4db380;
-  }
+    :hover {
+      background: ${rgba(headerToggleColor, 0.9)};
+    }
 
-  @media (max-width: 700px) {
-    height: 28px;
-    width: 28px;
-    font-size: 12px;
-  }
+    @media (max-width: 700px) {
+      height: 28px;
+      width: 28px;
+      font-size: 12px;
+    }
+  `}
 `