use auto dark palette and About

web/src/components/About.jsx

@@ -9,11 +9,13 @@ 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()
+  const darkTheme = createMuiTheme({ palette: { type: 'dark', primary: { main: '#00a572' } } })
   const [open, setOpen] = useState(false)
   const [torrServerVersion, setTorrServerVersion] = useState('')
   useEffect(() => {
@@ -29,39 +31,61 @@ export default function AboutDialog() {
         <ListItemText primary={t('About')} />
       </ListItem>
 
-      <Dialog open={open} onClose={() => setOpen(false)} aria-labelledby='form-dialog-title' fullWidth maxWidth='lg'>
+      <ThemeProvider theme={darkTheme}>
-        <DialogTitle id='form-dialog-title'>{t('About')}</DialogTitle>
+        <Dialog
+          open={open}
+          onClose={() => setOpen(false)}
+          aria-labelledby='form-dialog-title'
+          fullWidth='true'
+          maxWidth='sm'
+        >
+          <DialogTitle id='form-dialog-title'>{t('About')}</DialogTitle>
 
-        <DialogContent>
-          <center>
-            <h2>TorrServer {torrServerVersion}</h2>
-            <a href='https://github.com/YouROK/TorrServer'>https://github.com/YouROK/TorrServer</a>
-          </center>
           <DialogContent>
             <center>
-              <h2>{t('ThanksToEveryone')}</h2>
+              <h2>TorrServer {torrServerVersion}</h2>
+              <a style={{ color: '#00a572' }} href='https://github.com/YouROK/TorrServer'>
+                https://github.com/YouROK/TorrServer
+              </a>
             </center>
-            <br />
+            <DialogContent>
-            <h2>{t('SpecialThanks')}</h2>
+              <center>
-            <b>anacrolix Matt Joiner</b> <a href='https://github.com/anacrolix/'>github.com/anacrolix</a>
+                <h2>{t('ThanksToEveryone')}</h2>
-            <br />
+              </center>
-            <b>nikk</b> <a href='https://github.com/tsynik'>github.com/tsynik</a>
+              <br />
-            <br />
+              <h2>{t('SpecialThanks')}</h2>
-            <b>dancheskus</b> <a href='https://github.com/dancheskus'>github.com/dancheskus</a>
+              <b>anacrolix Matt Joiner</b>
-            <br />
+              <a style={{ color: '#00a572' }} href='https://github.com/anacrolix/'>
-            <b>tw1cker Руслан Пахнев</b> <a href='https://github.com/Nemiroff'>github.com/Nemiroff</a>
+                github.com/anacrolix
-            <br />
+              </a>
-            <b>SpAwN_LMG</b>
+              <br />
-            <br />
+              <b>nikk</b>
+              <a style={{ color: '#00a572' }} href='https://github.com/tsynik'>
+                github.com/tsynik
+              </a>
+              <br />
+              <b>dancheskus</b>
+              <a style={{ color: '#00a572' }} href='https://github.com/dancheskus'>
+                github.com/dancheskus
+              </a>
+              <br />
+              <b>tw1cker Руслан Пахнев</b>
+              <a style={{ color: '#00a572' }} href='https://github.com/Nemiroff'>
+                github.com/Nemiroff
+              </a>
+              <br />
+              <b>SpAwN_LMG</b>
+              <br />
+            </DialogContent>
           </DialogContent>
-        </DialogContent>
 
-        <DialogActions>
+          <DialogActions>
-          <Button onClick={() => setOpen(false)} color='primary' variant='outlined' autoFocus>
+            <Button onClick={() => setOpen(false)} color='primary' variant='outlined' autoFocus>
-            {t('Close')}
+              {t('Close')}
-          </Button>
+            </Button>
-        </DialogActions>
+          </DialogActions>
-      </Dialog>
+        </Dialog>
+      </ThemeProvider>
     </div>
   )
 }

web/src/components/App/index.jsx

@@ -1,6 +1,7 @@
-import CssBaseline from '@material-ui/core/CssBaseline'
+import useMediaQuery from '@material-ui/core/useMediaQuery'
 import { createMuiTheme, MuiThemeProvider } from '@material-ui/core'
-import { useEffect, useState } from 'react'
+import CssBaseline from '@material-ui/core/CssBaseline'
+import { useEffect, useMemo, 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'
@@ -14,15 +15,25 @@ import DonateDialog from 'components/Donate/DonateDialog'
 import { AppWrapper, AppHeader } from './style'
 import Sidebar from './Sidebar'
 
-const baseTheme = createMuiTheme({
-  overrides: { MuiCssBaseline: { '@global': { html: { WebkitFontSmoothing: 'auto' } } } },
-  palette: { primary: { main: '#00a572' }, secondary: { main: '#ffa724' }, tonalOffset: 0.2 },
-})
-
 export default function App() {
+  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)')
   const [isDrawerOpen, setIsDrawerOpen] = useState(false)
   const [isDonationDialogOpen, setIsDonationDialogOpen] = useState(false)
   const [torrServerVersion, setTorrServerVersion] = useState('')
+  // https://material-ui.com/ru/customization/palette/
+  const baseTheme = useMemo(
+    () =>
+      createMuiTheme({
+        overrides: { MuiCssBaseline: { '@global': { html: { WebkitFontSmoothing: 'auto' } } } },
+        palette: {
+          type: prefersDarkMode ? 'dark' : 'light',
+          primary: { main: '#00a572' },
+          secondary: { main: '#ffa724' },
+          tonalOffset: 0.2,
+        },
+      }),
+    [prefersDarkMode],
+  )
 
   useEffect(() => {
     axios.get(echoHost()).then(({ data }) => setTorrServerVersion(data))

web/src/components/Donate/DonateDialog.jsx

@@ -15,7 +15,7 @@ export default function DonateDialog({ onClose }) {
   const { t } = useTranslation()
 
   return (
-    <Dialog open onClose={onClose} aria-labelledby='form-dialog-title' fullWidth>
+    <Dialog open onClose={onClose} aria-labelledby='form-dialog-title' fullWidth='true' maxWidth='xs'>
       <DialogTitle id='form-dialog-title'>{t('Donate')}</DialogTitle>
       <DialogContent>
         <List>