use auto dark palette and About

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))