added dark theme

web/src/style/colors.js

@@ -1,8 +1,105 @@
+import { rgba } from 'polished'
+
 export const themeColors = {
-  light: {},
-  dark: {},
+  light: {
+    app: {
+      headerToggleColor: '#4db380',
+      appSecondaryColor: '#f1eff3',
+      sidebarBGColor: '#575757',
+      sidebarFillColor: '#dee3e5',
+    },
+    torrentCard: {
+      accentCardColor: '#337a57',
+      buttonBGColor: rgba('#337a57', 0.5),
+      cardPrimaryColor: '#00a572',
+      cardSecondaryColor: '#74c39c',
+    },
+    dialogTorrentDetailsContent: {
+      posterBGColor: '#74c39c',
+      gradientStartColor: '#e4f6ed',
+      gradientEndColor: '#b5dec9',
+      chacheSectionBGColor: '#88cdaa',
+      fontColor: '#000',
+      subNameFontColor: '#7c7b7c',
+      torrentFilesSectionBGColor: '#f1eff3',
+    },
+    detailedView: {
+      gradientStartColor: '#e4f6ed',
+      gradientEndColor: '#b5dec9',
+      cacheSectionBGColor: '#fff',
+    },
+    addDialog: {
+      gradientStartColor: '#e4f6ed',
+      gradientEndColor: '#b5dec9',
+      fontColor: '#000',
+      notificationErrorBGColor: '#cda184',
+      notificationSuccessBGColor: '#88cdaa',
+      languageSwitchBGColor: '#74c39c',
+      languageSwitchFontColor: '#e4f6ed',
+      posterBGColor: '#74c39c',
+    },
+    torrentFunctions: {
+      fontColor: '#000',
+    },
+    table: {
+      defaultPrimaryColor: '#009879',
+      defaultSecondaryColor: '#00a383',
+      defaultTertiaryColor: '#03aa89',
+    },
+  },
+  dark: {
+    app: {
+      headerToggleColor: '#545a5e',
+      appSecondaryColor: '#545a5e',
+      sidebarBGColor: '#323637',
+      sidebarFillColor: '#dee3e5',
+    },
+    torrentCard: {
+      accentCardColor: '#323637',
+      buttonBGColor: rgba('#323637', 0.5),
+      cardPrimaryColor: '#545a5e',
+      cardSecondaryColor: rgba('#dee3e5', 0.4),
+    },
+    dialogTorrentDetailsContent: {
+      posterBGColor: rgba('#dee3e5', 0.4),
+      gradientStartColor: '#656f76',
+      gradientEndColor: '#545a5e',
+      chacheSectionBGColor: '#3c4244',
+      fontColor: '#f1eff3',
+      subNameFontColor: '#dee3e5',
+      torrentFilesSectionBGColor: rgba('#545a5e', 0.9),
+    },
+    detailedView: {
+      gradientStartColor: '#656f76',
+      gradientEndColor: '#545a5e',
+      cacheSectionBGColor: rgba('#545a5e', 0.7),
+    },
+    addDialog: {
+      gradientStartColor: '#656f76',
+      gradientEndColor: '#545a5e',
+      fontColor: '#fff',
+      notificationErrorBGColor: '#c82e3f',
+      notificationSuccessBGColor: '#323637',
+      languageSwitchBGColor: '#545a5e',
+      languageSwitchFontColor: '#dee3e5',
+      posterBGColor: '#dee3e5',
+    },
+    torrentFunctions: {
+      fontColor: '#f1eff3',
+    },
+    table: {
+      defaultPrimaryColor: '#323637',
+      defaultSecondaryColor: rgba('#545a5e', 0.9),
+      defaultTertiaryColor: '#545a5e',
+    },
+  },
 }
 
 export const mainColors = {
-  primary: '#00a572',
+  light: {
+    primary: '#00a572',
+  },
+  dark: {
+    primary: '#323637',
+  },
 }

web/src/style/getStyledComponentsTheme.js

@@ -1,3 +1,3 @@
 import { mainColors, themeColors } from './colors'
 
-export default type => ({ ...themeColors[type], ...mainColors })
+export default type => ({ ...themeColors[type], ...mainColors[type] })

web/src/style/materialUISetup.js

@@ -1,45 +1,51 @@
-import useMediaQuery from '@material-ui/core/useMediaQuery'
-import { createMuiTheme } from '@material-ui/core'
-import { useMemo } from 'react'
+import { createMuiTheme, useMediaQuery } from '@material-ui/core'
+import { useEffect, useMemo, useState } 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,
+    primary: { main: mainColors.dark.primary },
   },
 })
 export const lightTheme = createMuiTheme({
   typography,
   palette: {
     type: 'light',
-    background: { paper: '#f1f1f1' },
-    primary,
+    primary: { main: mainColors.light.primary },
   },
 })
 
+export const THEME_MODES = { LIGHT: 'light', DARK: 'dark', AUTO: 'auto' }
+
 export const useMaterialUITheme = () => {
-  const isDarkMode = useMediaQuery('(prefers-color-scheme: dark)')
+  const currentModeState = useMediaQuery('(prefers-color-scheme: dark)')
+  const [isDarkMode, setIsDarkMode] = useState(currentModeState)
+  const [currentThemeMode, setCurrentThemeMode] = useState(THEME_MODES.LIGHT)
+
+  useEffect(() => {
+    currentThemeMode === THEME_MODES.LIGHT && setIsDarkMode(false)
+    currentThemeMode === THEME_MODES.DARK && setIsDarkMode(true)
+    currentThemeMode === THEME_MODES.AUTO && setIsDarkMode(currentModeState)
+  }, [currentModeState, currentThemeMode])
+
+  const theme = isDarkMode ? THEME_MODES.DARK : THEME_MODES.LIGHT
 
   const muiTheme = useMemo(
     () =>
       createMuiTheme({
         typography,
         palette: {
-          // type: isDarkMode ? 'dark' : 'light',
-          type: 'light',
-          primary,
+          type: theme,
+          primary: { main: mainColors[theme].primary },
         },
       }),
-    [],
+    [theme],
   )
 
-  return [isDarkMode, muiTheme]
+  return [isDarkMode, currentThemeMode, setCurrentThemeMode, muiTheme]
 }