primary color replaced to theme primary color

web/src/components/App/index.jsx

@@ -1,4 +1,3 @@
-import { MuiThemeProvider } from '@material-ui/core'
 import CssBaseline from '@material-ui/core/CssBaseline'
 import { useEffect, useState } from 'react'
 import Typography from '@material-ui/core/Typography'
@@ -11,13 +10,16 @@ import TorrentList from 'components/TorrentList'
 import DonateSnackbar from 'components/Donate'
 import DonateDialog from 'components/Donate/DonateDialog'
 import useChangeLanguage from 'utils/useChangeLanguage'
-import { ThemeProvider } from '@material-ui/core/styles'
+import { ThemeProvider as MuiThemeProvider } from '@material-ui/core/styles'
+import { ThemeProvider as StyledComponentsThemeProvider } from 'styled-components'
 import { useQuery } from 'react-query'
 import { getTorrents } from 'utils/Utils'
+import GlobalStyle from 'style/GlobalStyle'
 
 import { AppWrapper, AppHeader, LanguageSwitch } from './style'
 import Sidebar from './Sidebar'
-import { darkTheme, lightTheme, useMaterialUITheme } from './materialUISetup'
+import { darkTheme, lightTheme, useMaterialUITheme } from '../../style/materialUISetup'
+import getStyledComponentsTheme from '../../style/getStyledComponentsTheme'
 
 export default function App() {
   const [isDrawerOpen, setIsDrawerOpen] = useState(false)
@@ -25,7 +27,7 @@ export default function App() {
   const [torrServerVersion, setTorrServerVersion] = useState('')
 
   // https://material-ui.com/ru/customization/palette/
-  const materialUITheme = useMaterialUITheme()
+  const [isDarkMode, muiTheme] = useMaterialUITheme()
   const [currentLang, changeLang] = useChangeLanguage()
   const [isOffline, setIsOffline] = useState(false)
   const { data: torrents, isLoading } = useQuery('torrents', getTorrents, {
@@ -40,51 +42,57 @@ export default function App() {
   }, [])
 
   return (
-    <MuiThemeProvider theme={materialUITheme}>
-      <CssBaseline />
+    <>
+      <GlobalStyle />
 
-      {/* Div100vh - iOS WebKit fix  */}
-      <Div100vh>
-        <AppWrapper>
-          <AppHeader>
-            <IconButton
-              style={{ marginRight: '20px' }}
-              color='inherit'
-              onClick={() => setIsDrawerOpen(!isDrawerOpen)}
-              edge='start'
-            >
-              {isDrawerOpen ? <CloseIcon /> : <MenuIcon />}
-            </IconButton>
+      <MuiThemeProvider theme={muiTheme}>
+        <StyledComponentsThemeProvider theme={getStyledComponentsTheme(isDarkMode ? 'dark' : 'light')}>
+          <CssBaseline />
 
-            <Typography variant='h6' noWrap>
-              TorrServer {torrServerVersion}
-            </Typography>
+          {/* Div100vh - iOS WebKit fix  */}
+          <Div100vh>
+            <AppWrapper>
+              <AppHeader>
+                <IconButton
+                  style={{ marginRight: '20px' }}
+                  color='inherit'
+                  onClick={() => setIsDrawerOpen(!isDrawerOpen)}
+                  edge='start'
+                >
+                  {isDrawerOpen ? <CloseIcon /> : <MenuIcon />}
+                </IconButton>
 
-            <div style={{ justifySelf: 'end' }}>
-              <LanguageSwitch onClick={() => (currentLang === 'en' ? changeLang('ru') : changeLang('en'))}>
-                {currentLang === 'en' ? 'RU' : 'EN'}
-              </LanguageSwitch>
-            </div>
-          </AppHeader>
+                <Typography variant='h6' noWrap>
+                  TorrServer {torrServerVersion}
+                </Typography>
 
-          <ThemeProvider theme={darkTheme}>
-            <Sidebar
-              isOffline={isOffline}
-              isLoading={isLoading}
-              isDrawerOpen={isDrawerOpen}
-              setIsDonationDialogOpen={setIsDonationDialogOpen}
-            />
-          </ThemeProvider>
+                <div style={{ justifySelf: 'end' }}>
+                  <LanguageSwitch onClick={() => (currentLang === 'en' ? changeLang('ru') : changeLang('en'))}>
+                    {currentLang === 'en' ? 'RU' : 'EN'}
+                  </LanguageSwitch>
+                </div>
+              </AppHeader>
 
-          <TorrentList isOffline={isOffline} torrents={torrents} isLoading={isLoading} />
+              <MuiThemeProvider theme={darkTheme}>
+                <Sidebar
+                  isOffline={isOffline}
+                  isLoading={isLoading}
+                  isDrawerOpen={isDrawerOpen}
+                  setIsDonationDialogOpen={setIsDonationDialogOpen}
+                />
+              </MuiThemeProvider>
 
-          <ThemeProvider theme={lightTheme}>
-            {isDonationDialogOpen && <DonateDialog onClose={() => setIsDonationDialogOpen(false)} />}
-          </ThemeProvider>
+              <TorrentList isOffline={isOffline} torrents={torrents} isLoading={isLoading} />
 
-          {!JSON.parse(localStorage.getItem('snackbarIsClosed')) && <DonateSnackbar />}
-        </AppWrapper>
-      </Div100vh>
-    </MuiThemeProvider>
+              <MuiThemeProvider theme={lightTheme}>
+                {isDonationDialogOpen && <DonateDialog onClose={() => setIsDonationDialogOpen(false)} />}
+              </MuiThemeProvider>
+
+              {!JSON.parse(localStorage.getItem('snackbarIsClosed')) && <DonateSnackbar />}
+            </AppWrapper>
+          </Div100vh>
+        </StyledComponentsThemeProvider>
+      </MuiThemeProvider>
+    </>
   )
 }