From a026f05205d601607a60066799d0e447c388db9c Mon Sep 17 00:00:00 2001 From: Daniel Shleifman Date: Sun, 20 Jun 2021 21:52:38 +0300 Subject: [PATCH 1/2] refactor --- web/src/components/About.jsx | 3 +- web/src/components/Add/AddDialog.jsx | 2 +- web/src/components/App/index.jsx | 42 ++++------------------- web/src/components/App/materialUISetup.js | 35 +++++++++++++++++++ web/src/components/CloseServer.jsx | 3 +- web/src/components/RemoveAll.jsx | 3 +- web/src/components/Settings.jsx | 3 +- 7 files changed, 50 insertions(+), 41 deletions(-) create mode 100644 web/src/components/App/materialUISetup.js diff --git a/web/src/components/About.jsx b/web/src/components/About.jsx index 2b6b0aa..5b2ca47 100644 --- a/web/src/components/About.jsx +++ b/web/src/components/About.jsx @@ -12,7 +12,8 @@ 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 { lightTheme } from 'components/App' + +import { lightTheme } from './App/materialUISetup' export default function AboutDialog() { const { t } = useTranslation() diff --git a/web/src/components/Add/AddDialog.jsx b/web/src/components/Add/AddDialog.jsx index ad6ba9a..5bcd83c 100644 --- a/web/src/components/Add/AddDialog.jsx +++ b/web/src/components/Add/AddDialog.jsx @@ -13,7 +13,7 @@ import { useQuery } from 'react-query' import { getTorrents } from 'utils/Utils' import parseTorrent from 'parse-torrent' import { ThemeProvider } from '@material-ui/core/styles' -import { lightTheme } from 'components/App' +import { lightTheme } from 'components/App/materialUISetup' import { checkImageURL, getMoviePosters, chechTorrentSource, parseTorrentTitle } from './helpers' import { ButtonWrapper, Content, Header } from './style' diff --git a/web/src/components/App/index.jsx b/web/src/components/App/index.jsx index 8cb3f56..a7ffab5 100644 --- a/web/src/components/App/index.jsx +++ b/web/src/components/App/index.jsx @@ -1,7 +1,6 @@ -import useMediaQuery from '@material-ui/core/useMediaQuery' -import { createMuiTheme, MuiThemeProvider } from '@material-ui/core' +import { MuiThemeProvider } from '@material-ui/core' import CssBaseline from '@material-ui/core/CssBaseline' -import { useEffect, useMemo, useState } from 'react' +import { useEffect, 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' @@ -18,44 +17,15 @@ import { getTorrents } from 'utils/Utils' 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' }, - }, - typography: { fontFamily: 'Open Sans, sans-serif' }, -}) -export const lightTheme = createMuiTheme({ - palette: { - type: 'light', - primary: { main: '#00a572' }, - background: { paper: '#f1f1f1' }, - }, - typography: { fontFamily: 'Open Sans, sans-serif' }, -}) +import { darkTheme, lightTheme, useMaterialUITheme } from './materialUISetup' 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({ - palette: { - type: prefersDarkMode ? 'dark' : 'light', - primary: { main: '#00a572' }, - secondary: { main: '#ffa724' }, - tonalOffset: 0.2, - }, - typography: { fontFamily: 'Open Sans, sans-serif' }, - }), - [prefersDarkMode], - ) + const materialUITheme = useMaterialUITheme() const [currentLang, changeLang] = useChangeLanguage() const [isOffline, setIsOffline] = useState(false) const { data: torrents, isLoading } = useQuery('torrents', getTorrents, { @@ -70,7 +40,7 @@ export default function App() { }, []) return ( - + {/* Div100vh - iOS WebKit fix */} diff --git a/web/src/components/App/materialUISetup.js b/web/src/components/App/materialUISetup.js new file mode 100644 index 0000000..230d942 --- /dev/null +++ b/web/src/components/App/materialUISetup.js @@ -0,0 +1,35 @@ +import useMediaQuery from '@material-ui/core/useMediaQuery' +import { createMuiTheme } from '@material-ui/core' +import { useMemo } from 'react' + +// https://material-ui.com/ru/customization/default-theme/ +export const darkTheme = createMuiTheme({ + palette: { + type: 'dark', + background: { paper: '#575757' }, + }, +}) +export const lightTheme = createMuiTheme({ + palette: { + type: 'light', + background: { paper: '#f1f1f1' }, + }, +}) + +export const useMaterialUITheme = () => { + const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)') + + const materialUITheme = useMemo( + () => + createMuiTheme({ + palette: { + type: prefersDarkMode ? 'dark' : 'light', + primary: { main: '#00a572' }, + }, + typography: { fontFamily: 'Open Sans, sans-serif' }, + }), + [prefersDarkMode], + ) + + return materialUITheme +} diff --git a/web/src/components/CloseServer.jsx b/web/src/components/CloseServer.jsx index f68541b..4704188 100644 --- a/web/src/components/CloseServer.jsx +++ b/web/src/components/CloseServer.jsx @@ -4,7 +4,8 @@ import { PowerSettingsNew as PowerSettingsNewIcon } from '@material-ui/icons' import { shutdownHost } from 'utils/Hosts' import { useTranslation } from 'react-i18next' import { ThemeProvider } from '@material-ui/core/styles' -import { lightTheme } from 'components/App' + +import { lightTheme } from './App/materialUISetup' export default function CloseServer({ isOffline, isLoading }) { const { t } = useTranslation() diff --git a/web/src/components/RemoveAll.jsx b/web/src/components/RemoveAll.jsx index eab4dc4..b14f006 100644 --- a/web/src/components/RemoveAll.jsx +++ b/web/src/components/RemoveAll.jsx @@ -7,7 +7,8 @@ import { useState } from 'react' import { torrentsHost } from 'utils/Hosts' import { useTranslation } from 'react-i18next' import { ThemeProvider } from '@material-ui/core/styles' -import { lightTheme } from 'components/App' + +import { lightTheme } from './App/materialUISetup' const fnRemoveAll = () => { fetch(torrentsHost(), { diff --git a/web/src/components/Settings.jsx b/web/src/components/Settings.jsx index d84a0aa..e0f8507 100644 --- a/web/src/components/Settings.jsx +++ b/web/src/components/Settings.jsx @@ -14,7 +14,8 @@ import { FormControlLabel, InputLabel, Select, Switch } from '@material-ui/core' import { settingsHost, setTorrServerHost, getTorrServerHost } from 'utils/Hosts' import { useTranslation } from 'react-i18next' import { ThemeProvider } from '@material-ui/core/styles' -import { lightTheme } from 'components/App' + +import { lightTheme } from './App/materialUISetup' export default function SettingsDialog() { const { t } = useTranslation() From 033aa3153fb0a58f13d224d711325620e629ef3d Mon Sep 17 00:00:00 2001 From: Daniel Shleifman Date: Sun, 20 Jun 2021 22:43:21 +0300 Subject: [PATCH 2/2] primary color replaced to theme primary color --- web/src/components/About.jsx | 15 +-- web/src/components/Add/AddDialog.jsx | 2 +- web/src/components/Add/style.js | 18 ++-- web/src/components/App/index.jsx | 94 ++++++++++--------- web/src/components/App/style.js | 22 +++-- web/src/components/CloseServer.jsx | 2 +- .../TorrentCache/snakeSettings.js | 4 +- web/src/components/RemoveAll.jsx | 2 +- web/src/components/Settings.jsx | 2 +- web/src/components/TorrentCard/style.js | 42 +++++---- .../TorrentList/AddFirstTorrent.jsx | 3 +- .../TorrentList/NoServerConnection.jsx | 3 +- web/src/index.css | 20 ---- web/src/index.jsx | 2 - web/src/style/GlobalStyle.js | 24 +++++ web/src/style/colors.js | 8 ++ web/src/style/getStyledComponentsTheme.js | 3 + .../App => style}/materialUISetup.js | 14 +-- 18 files changed, 158 insertions(+), 122 deletions(-) delete mode 100644 web/src/index.css create mode 100755 web/src/style/GlobalStyle.js create mode 100644 web/src/style/colors.js create mode 100644 web/src/style/getStyledComponentsTheme.js rename web/src/{components/App => style}/materialUISetup.js (69%) diff --git a/web/src/components/About.jsx b/web/src/components/About.jsx index 5b2ca47..ed1b4b1 100644 --- a/web/src/components/About.jsx +++ b/web/src/components/About.jsx @@ -12,8 +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 { lightTheme } from './App/materialUISetup' +import { lightTheme } from '../style/materialUISetup' + +const { primary } = themeColors export default function AboutDialog() { const { t } = useTranslation() @@ -39,7 +42,7 @@ export default function AboutDialog() {

TorrServer {torrServerVersion}

- + https://github.com/YouROK/TorrServer
@@ -50,22 +53,22 @@ export default function AboutDialog() {

{t('SpecialThanks')}

anacrolix Matt Joiner  - + github.com/anacrolix
nikk  - + github.com/tsynik
dancheskus  - + github.com/dancheskus
tw1cker Руслан Пахнев  - + github.com/Nemiroff
diff --git a/web/src/components/Add/AddDialog.jsx b/web/src/components/Add/AddDialog.jsx index 5bcd83c..73a2d2c 100644 --- a/web/src/components/Add/AddDialog.jsx +++ b/web/src/components/Add/AddDialog.jsx @@ -13,7 +13,7 @@ import { useQuery } from 'react-query' import { getTorrents } from 'utils/Utils' import parseTorrent from 'parse-torrent' import { ThemeProvider } from '@material-ui/core/styles' -import { lightTheme } from 'components/App/materialUISetup' +import { lightTheme } from 'style/materialUISetup' import { checkImageURL, getMoviePosters, chechTorrentSource, parseTorrentTitle } from './helpers' import { ButtonWrapper, Content, Header } from './style' diff --git a/web/src/components/Add/style.js b/web/src/components/Add/style.js index c81803a..a1ffc6f 100644 --- a/web/src/components/Add/style.js +++ b/web/src/components/Add/style.js @@ -2,14 +2,16 @@ import { Button } from '@material-ui/core' import styled, { css } from 'styled-components' export const Header = styled.div` - background: #00a572; - color: rgba(0, 0, 0, 0.87); - font-size: 20px; - color: #fff; - font-weight: 600; - box-shadow: 0px 2px 4px -1px rgb(0 0 0 / 20%), 0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%); - padding: 15px 24px; - position: relative; + ${({ theme: { primary } }) => css` + background: ${primary}; + color: rgba(0, 0, 0, 0.87); + font-size: 20px; + color: #fff; + font-weight: 600; + box-shadow: 0px 2px 4px -1px rgb(0 0 0 / 20%), 0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%); + padding: 15px 24px; + position: relative; + `} ` export const Content = styled.div` diff --git a/web/src/components/App/index.jsx b/web/src/components/App/index.jsx index a7ffab5..d835286 100644 --- a/web/src/components/App/index.jsx +++ b/web/src/components/App/index.jsx @@ -1,4 +1,3 @@ -import { MuiThemeProvider } from '@material-ui/core' import CssBaseline from '@material-ui/core/CssBaseline' import { useEffect, useState } from 'react' import Typography from '@material-ui/core/Typography' @@ -11,13 +10,16 @@ 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 { ThemeProvider as MuiThemeProvider } from '@material-ui/core/styles' +import { ThemeProvider as StyledComponentsThemeProvider } from 'styled-components' import { useQuery } from 'react-query' import { getTorrents } from 'utils/Utils' +import GlobalStyle from 'style/GlobalStyle' import { AppWrapper, AppHeader, LanguageSwitch } from './style' import Sidebar from './Sidebar' -import { darkTheme, lightTheme, useMaterialUITheme } from './materialUISetup' +import { darkTheme, lightTheme, useMaterialUITheme } from '../../style/materialUISetup' +import getStyledComponentsTheme from '../../style/getStyledComponentsTheme' export default function App() { const [isDrawerOpen, setIsDrawerOpen] = useState(false) @@ -25,7 +27,7 @@ export default function App() { const [torrServerVersion, setTorrServerVersion] = useState('') // https://material-ui.com/ru/customization/palette/ - const materialUITheme = useMaterialUITheme() + const [isDarkMode, muiTheme] = useMaterialUITheme() const [currentLang, changeLang] = useChangeLanguage() const [isOffline, setIsOffline] = useState(false) const { data: torrents, isLoading } = useQuery('torrents', getTorrents, { @@ -40,51 +42,57 @@ export default function App() { }, []) return ( - - + <> + - {/* Div100vh - iOS WebKit fix */} - - - - setIsDrawerOpen(!isDrawerOpen)} - edge='start' - > - {isDrawerOpen ? : } - + + + - - TorrServer {torrServerVersion} - + {/* Div100vh - iOS WebKit fix */} + + + + setIsDrawerOpen(!isDrawerOpen)} + edge='start' + > + {isDrawerOpen ? : } + -
- (currentLang === 'en' ? changeLang('ru') : changeLang('en'))}> - {currentLang === 'en' ? 'RU' : 'EN'} - -
- + + TorrServer {torrServerVersion} + - - - +
+ (currentLang === 'en' ? changeLang('ru') : changeLang('en'))}> + {currentLang === 'en' ? 'RU' : 'EN'} + +
+ - + + + - - {isDonationDialogOpen && setIsDonationDialogOpen(false)} />} - + - {!JSON.parse(localStorage.getItem('snackbarIsClosed')) && } - - - + + {isDonationDialogOpen && setIsDonationDialogOpen(false)} />} + + + {!JSON.parse(localStorage.getItem('snackbarIsClosed')) && } + + + + + ) } diff --git a/web/src/components/App/style.js b/web/src/components/App/style.js index 6e31860..2cfb19c 100644 --- a/web/src/components/App/style.js +++ b/web/src/components/App/style.js @@ -18,16 +18,18 @@ export const CenteredGrid = styled.div` ` export const AppHeader = styled.div` - background: #00a572; - color: #fff; - grid-area: head; - display: grid; - grid-auto-flow: column; - align-items: center; - grid-template-columns: repeat(2, max-content) 1fr; - box-shadow: 0px 2px 4px -1px rgb(0 0 0 / 20%), 0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%); - padding: 0 16px; - z-index: 3; + ${({ theme: { primary } }) => css` + background: ${primary}; + color: #fff; + grid-area: head; + display: grid; + grid-auto-flow: column; + align-items: center; + grid-template-columns: repeat(2, max-content) 1fr; + box-shadow: 0px 2px 4px -1px rgb(0 0 0 / 20%), 0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%); + padding: 0 16px; + z-index: 3; + `} ` export const AppSidebarStyle = styled.div` ${({ isDrawerOpen }) => css` diff --git a/web/src/components/CloseServer.jsx b/web/src/components/CloseServer.jsx index 4704188..d4dab5d 100644 --- a/web/src/components/CloseServer.jsx +++ b/web/src/components/CloseServer.jsx @@ -5,7 +5,7 @@ import { shutdownHost } from 'utils/Hosts' import { useTranslation } from 'react-i18next' import { ThemeProvider } from '@material-ui/core/styles' -import { lightTheme } from './App/materialUISetup' +import { lightTheme } from '../style/materialUISetup' export default function CloseServer({ isOffline, isLoading }) { const { t } = useTranslation() diff --git a/web/src/components/DialogTorrentDetailsContent/TorrentCache/snakeSettings.js b/web/src/components/DialogTorrentDetailsContent/TorrentCache/snakeSettings.js index 3fdaf09..a45f514 100644 --- a/web/src/components/DialogTorrentDetailsContent/TorrentCache/snakeSettings.js +++ b/web/src/components/DialogTorrentDetailsContent/TorrentCache/snakeSettings.js @@ -1,10 +1,12 @@ +import { themeColors } from 'style/colors' + export const snakeSettings = { default: { borderWidth: 1, pieceSize: 14, gapBetweenPieces: 3, borderColor: '#dbf2e8', - completeColor: '#00a572', + completeColor: themeColors.primary, backgroundColor: '#fff', progressColor: '#b3dfc9', readerColor: '#000', diff --git a/web/src/components/RemoveAll.jsx b/web/src/components/RemoveAll.jsx index b14f006..257b73a 100644 --- a/web/src/components/RemoveAll.jsx +++ b/web/src/components/RemoveAll.jsx @@ -8,7 +8,7 @@ import { torrentsHost } from 'utils/Hosts' import { useTranslation } from 'react-i18next' import { ThemeProvider } from '@material-ui/core/styles' -import { lightTheme } from './App/materialUISetup' +import { lightTheme } from '../style/materialUISetup' const fnRemoveAll = () => { fetch(torrentsHost(), { diff --git a/web/src/components/Settings.jsx b/web/src/components/Settings.jsx index e0f8507..55d4c91 100644 --- a/web/src/components/Settings.jsx +++ b/web/src/components/Settings.jsx @@ -15,7 +15,7 @@ import { settingsHost, setTorrServerHost, getTorrServerHost } from 'utils/Hosts' import { useTranslation } from 'react-i18next' import { ThemeProvider } from '@material-ui/core/styles' -import { lightTheme } from './App/materialUISetup' +import { lightTheme } from '../style/materialUISetup' export default function SettingsDialog() { const { t } = useTranslation() diff --git a/web/src/components/TorrentCard/style.js b/web/src/components/TorrentCard/style.js index 1e8e874..25c3fd1 100644 --- a/web/src/components/TorrentCard/style.js +++ b/web/src/components/TorrentCard/style.js @@ -1,29 +1,31 @@ import styled, { css } from 'styled-components' export const TorrentCard = styled.div` - border-radius: 5px; - display: grid; - grid-template-columns: 120px 260px 1fr; - grid-template-rows: 180px; - grid-template-areas: 'poster description buttons'; - gap: 10px; - padding: 10px; - background: #00a572; - box-shadow: 0px 2px 4px -1px rgb(0 0 0 / 20%), 0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%); + ${({ theme: { primary } }) => css` + border-radius: 5px; + display: grid; + grid-template-columns: 120px 260px 1fr; + grid-template-rows: 180px; + grid-template-areas: 'poster description buttons'; + gap: 10px; + padding: 10px; + background: ${primary}; + box-shadow: 0px 2px 4px -1px rgb(0 0 0 / 20%), 0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%); - @media (max-width: 1260px), (max-height: 500px) { - grid-template-areas: - 'poster description' - 'buttons buttons'; + @media (max-width: 1260px), (max-height: 500px) { + grid-template-areas: + 'poster description' + 'buttons buttons'; - grid-template-columns: 70px 1fr; - grid-template-rows: 110px max-content; - } + grid-template-columns: 70px 1fr; + grid-template-rows: 110px max-content; + } - @media (max-width: 770px) { - grid-template-columns: 60px 1fr; - grid-template-rows: 90px max-content; - } + @media (max-width: 770px) { + grid-template-columns: 60px 1fr; + grid-template-rows: 90px max-content; + } + `} ` export const TorrentCardPoster = styled.div` diff --git a/web/src/components/TorrentList/AddFirstTorrent.jsx b/web/src/components/TorrentList/AddFirstTorrent.jsx index 7d81d57..296f91b 100644 --- a/web/src/components/TorrentList/AddFirstTorrent.jsx +++ b/web/src/components/TorrentList/AddFirstTorrent.jsx @@ -1,5 +1,6 @@ import { useState } from 'react' import { useTranslation } from 'react-i18next' +import { themeColors } from 'style/colors' import AddDialog from '../Add/AddDialog' import IconWrapper from './style' @@ -16,7 +17,7 @@ export default function AddFirstTorrent() { diff --git a/web/src/components/TorrentList/NoServerConnection.jsx b/web/src/components/TorrentList/NoServerConnection.jsx index d54c198..89a2090 100644 --- a/web/src/components/TorrentList/NoServerConnection.jsx +++ b/web/src/components/TorrentList/NoServerConnection.jsx @@ -1,4 +1,5 @@ import { useTranslation } from 'react-i18next' +import { themeColors } from 'style/colors' import IconWrapper from './style' @@ -10,7 +11,7 @@ export default function NoServerConnection() { diff --git a/web/src/index.css b/web/src/index.css deleted file mode 100644 index d45520b..0000000 --- a/web/src/index.css +++ /dev/null @@ -1,20 +0,0 @@ -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: inherit; -} - -body { - font-family: "Open Sans", sans-serif; - box-sizing: border-box; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - letter-spacing: -0.1px; -} - -button { - font-family: "Open Sans", sans-serif; - letter-spacing: -0.1px; -} \ No newline at end of file diff --git a/web/src/index.jsx b/web/src/index.jsx index d9e88e1..ac8c027 100644 --- a/web/src/index.jsx +++ b/web/src/index.jsx @@ -5,8 +5,6 @@ import { QueryClientProvider, QueryClient } from 'react-query' import App from './components/App' import 'i18n' -import './index.css' - const queryClient = new QueryClient() ReactDOM.render( diff --git a/web/src/style/GlobalStyle.js b/web/src/style/GlobalStyle.js new file mode 100755 index 0000000..d3bc618 --- /dev/null +++ b/web/src/style/GlobalStyle.js @@ -0,0 +1,24 @@ +import { createGlobalStyle } from 'styled-components' + +export default createGlobalStyle` + *, + *::before, + *::after { + margin: 0; + padding: 0; + box-sizing: inherit; + } + + body { + font-family: "Open Sans", sans-serif; + box-sizing: border-box; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + letter-spacing: -0.1px; + } + + button { + font-family: "Open Sans", sans-serif; + letter-spacing: -0.1px; + } +` diff --git a/web/src/style/colors.js b/web/src/style/colors.js new file mode 100644 index 0000000..7ea161b --- /dev/null +++ b/web/src/style/colors.js @@ -0,0 +1,8 @@ +export const themeColors = { + light: {}, + dark: {}, +} + +export const mainColors = { + primary: '#00a572', +} diff --git a/web/src/style/getStyledComponentsTheme.js b/web/src/style/getStyledComponentsTheme.js new file mode 100644 index 0000000..f9a019e --- /dev/null +++ b/web/src/style/getStyledComponentsTheme.js @@ -0,0 +1,3 @@ +import { mainColors, themeColors } from './colors' + +export default type => ({ ...themeColors[type], ...mainColors }) diff --git a/web/src/components/App/materialUISetup.js b/web/src/style/materialUISetup.js similarity index 69% rename from web/src/components/App/materialUISetup.js rename to web/src/style/materialUISetup.js index 230d942..d365ec4 100644 --- a/web/src/components/App/materialUISetup.js +++ b/web/src/style/materialUISetup.js @@ -2,6 +2,8 @@ import useMediaQuery from '@material-ui/core/useMediaQuery' import { createMuiTheme } from '@material-ui/core' import { useMemo } from 'react' +import { mainColors } from './colors' + // https://material-ui.com/ru/customization/default-theme/ export const darkTheme = createMuiTheme({ palette: { @@ -17,19 +19,19 @@ export const lightTheme = createMuiTheme({ }) export const useMaterialUITheme = () => { - const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)') + const isDarkMode = useMediaQuery('(prefers-color-scheme: dark)') - const materialUITheme = useMemo( + const muiTheme = useMemo( () => createMuiTheme({ palette: { - type: prefersDarkMode ? 'dark' : 'light', - primary: { main: '#00a572' }, + type: isDarkMode ? 'dark' : 'light', + primary: { main: mainColors.primary }, }, typography: { fontFamily: 'Open Sans, sans-serif' }, }), - [prefersDarkMode], + [isDarkMode], ) - return materialUITheme + return [isDarkMode, muiTheme] }