refactor

web/src/components/About.jsx

@@ -12,11 +12,11 @@ import ListItemText from '@material-ui/core/ListItemText'
 import { useTranslation } from 'react-i18next'
 import { echoHost } from 'utils/Hosts'
 import { ThemeProvider } from '@material-ui/core/styles'
-import { themeColors } from 'style/colors'
+import { mainColors } from 'style/colors'
 
 import { lightTheme } from '../style/materialUISetup'
 
-const { primary } = themeColors
+const { primary } = mainColors
 
 export default function AboutDialog() {
   const { t } = useTranslation()

web/src/components/DialogTorrentDetailsContent/TorrentCache/snakeSettings.js

@@ -1,4 +1,4 @@
-import { themeColors } from 'style/colors'
+import { mainColors } from 'style/colors'
 
 export const snakeSettings = {
   default: {
@@ -6,7 +6,7 @@ export const snakeSettings = {
     pieceSize: 14,
     gapBetweenPieces: 3,
     borderColor: '#dbf2e8',
-    completeColor: themeColors.primary,
+    completeColor: mainColors.primary,
     backgroundColor: '#fff',
     progressColor: '#b3dfc9',
     readerColor: '#000',

web/src/components/TorrentList/AddFirstTorrent.jsx

@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { themeColors } from 'style/colors'
+import { mainColors } from 'style/colors'
 
 import AddDialog from '../Add/AddDialog'
 import IconWrapper from './style'
@@ -17,7 +17,7 @@ export default function AddFirstTorrent() {
         <lord-icon
           src='https://cdn.lordicon.com/bbnkwdur.json'
           trigger='loop'
-          colors={`primary:#121331,secondary:${themeColors.primary}`}
+          colors={`primary:#121331,secondary:${mainColors.primary}`}
           stroke='26'
           scale='60'
         />

web/src/components/TorrentList/NoServerConnection.jsx

@@ -1,5 +1,5 @@
 import { useTranslation } from 'react-i18next'
-import { themeColors } from 'style/colors'
+import { mainColors } from 'style/colors'
 
 import IconWrapper from './style'
 
@@ -11,7 +11,7 @@ export default function NoServerConnection() {
       <lord-icon
         src='https://cdn.lordicon.com/wrprwmwt.json'
         trigger='loop'
-        colors={`primary:#121331,secondary:${themeColors.primary}`}
+        colors={`primary:#121331,secondary:${mainColors.primary}`}
         stroke='26'
         scale='60'
       />

web/src/style/materialUISetup.js

@@ -4,17 +4,24 @@ import { useMemo } from 'react'
 
 import { mainColors } from './colors'
 
+const primary = { main: mainColors.primary }
+const typography = { fontFamily: 'Open Sans, sans-serif' }
+
 // https://material-ui.com/ru/customization/default-theme/
 export const darkTheme = createMuiTheme({
+  typography,
   palette: {
     type: 'dark',
     background: { paper: '#575757' },
+    primary,
   },
 })
 export const lightTheme = createMuiTheme({
+  typography,
   palette: {
     type: 'light',
     background: { paper: '#f1f1f1' },
+    primary,
   },
 })
 
@@ -24,11 +31,11 @@ export const useMaterialUITheme = () => {
   const muiTheme = useMemo(
     () =>
       createMuiTheme({
+        typography,
         palette: {
           type: isDarkMode ? 'dark' : 'light',
-          primary: { main: mainColors.primary },
+          primary,
         },
-        typography: { fontFamily: 'Open Sans, sans-serif' },
       }),
     [isDarkMode],
   )