dark sidebar and dialogs

web/src/components/About.jsx

@@ -9,20 +9,11 @@ import InfoIcon from '@material-ui/icons/Info'
 import ListItem from '@material-ui/core/ListItem'
 import ListItemIcon from '@material-ui/core/ListItemIcon'
 import ListItemText from '@material-ui/core/ListItemText'
-import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'
 import { useTranslation } from 'react-i18next'
 import { echoHost } from 'utils/Hosts'
 
 export default function AboutDialog() {
   const { t } = useTranslation()
-  // https://material-ui.com/ru/customization/default-theme/
-  const darkTheme = createMuiTheme({
-    palette: {
-      type: 'dark',
-      primary: { main: '#00a572' },
-      background: { paper: '#575757' },
-    },
-  })
   const [open, setOpen] = useState(false)
   const [torrServerVersion, setTorrServerVersion] = useState('')
   useEffect(() => {
@@ -38,7 +29,6 @@ export default function AboutDialog() {
         <ListItemText primary={t('About')} />
       </ListItem>
 
-      <ThemeProvider theme={darkTheme}>
       <Dialog
         open={open}
         onClose={() => setOpen(false)}
@@ -92,7 +82,6 @@ export default function AboutDialog() {
           </Button>
         </DialogActions>
       </Dialog>
-      </ThemeProvider>
     </div>
   )
 }

web/src/components/Add/AddDialog.jsx

@@ -12,6 +12,8 @@ import usePreviousState from 'utils/usePreviousState'
 import { useQuery } from 'react-query'
 import { getTorrents } from 'utils/Utils'
 import parseTorrent from 'parse-torrent'
+import { ThemeProvider } from '@material-ui/core/styles'
+import { lightTheme } from 'components/App'
 
 import { checkImageURL, getMoviePosters, chechTorrentSource, parseTorrentTitle } from './helpers'
 import { ButtonWrapper, Content, Header } from './style'
@@ -207,6 +209,7 @@ export default function AddDialog({
   }
 
   return (
+    <ThemeProvider theme={lightTheme}>
       <Dialog
         open
         onClose={handleClose}
@@ -271,5 +274,6 @@ export default function AddDialog({
           </Button>
         </ButtonWrapper>
       </Dialog>
+    </ThemeProvider>
   )
 }

web/src/components/App/Sidebar.jsx

@@ -27,7 +27,6 @@ export default function Sidebar({ isDrawerOpen, setIsDonationDialogOpen }) {
 
       <List>
         <SettingsDialog />
-
         <CloseServer />
       </List>
 

web/src/components/App/index.jsx

@@ -12,10 +12,27 @@ 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 { AppWrapper, AppHeader, LanguageSwitch } from './style'
 import Sidebar from './Sidebar'
 
+// https://material-ui.com/ru/customization/default-theme/
+export const darkTheme = createMuiTheme({
+  palette: {
+    type: 'dark',
+    primary: { main: '#00a572' },
+    background: { paper: '#575757' },
+  },
+})
+export const lightTheme = createMuiTheme({
+  palette: {
+    type: 'light',
+    primary: { main: '#00a572' },
+    background: { paper: '#cbe8d9' },
+  },
+})
+
 export default function App() {
   const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)')
   const [isDrawerOpen, setIsDrawerOpen] = useState(false)
@@ -68,12 +85,13 @@ export default function App() {
               </LanguageSwitch>
             </div>
           </AppHeader>
-
+          <ThemeProvider theme={darkTheme}>
             <Sidebar isDrawerOpen={isDrawerOpen} setIsDonationDialogOpen={setIsDonationDialogOpen} />
-
+          </ThemeProvider>
           <TorrentList />
-
+          <ThemeProvider theme={darkTheme}>
             {isDonationDialogOpen && <DonateDialog onClose={() => setIsDonationDialogOpen(false)} />}
+          </ThemeProvider>
           {!JSON.parse(localStorage.getItem('snackbarIsClosed')) && <DonateSnackbar />}
         </AppWrapper>
       </Div100vh>

web/src/components/App/style.js

@@ -19,7 +19,7 @@ export const CenteredGrid = styled.div`
 
 export const AppHeader = styled.div`
   background: #00a572;
-  color: rgba(0, 0, 0, 0.87);
+  color: #1a1a1a;
   grid-area: head;
   display: grid;
   grid-auto-flow: column;
@@ -37,7 +37,8 @@ export const AppSidebarStyle = styled.div`
     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: #eee;
+    background: #575757;
+    color: #eee;
     white-space: nowrap;
   `}
 `