dark sidebar and dialogs

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>
-
-          <Sidebar isDrawerOpen={isDrawerOpen} setIsDonationDialogOpen={setIsDonationDialogOpen} />
-
+          <ThemeProvider theme={darkTheme}>
+            <Sidebar isDrawerOpen={isDrawerOpen} setIsDonationDialogOpen={setIsDonationDialogOpen} />
+          </ThemeProvider>
           <TorrentList />
-
-          {isDonationDialogOpen && <DonateDialog onClose={() => setIsDonationDialogOpen(false)} />}
+          <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;
   `}
 `