primary color replaced to theme primary color

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;
+  }
+`

web/src/style/colors.js

@@ -0,0 +1,8 @@
+export const themeColors = {
+  light: {},
+  dark: {},
+}
+
+export const mainColors = {
+  primary: '#00a572',
+}

web/src/style/getStyledComponentsTheme.js

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

web/src/style/materialUISetup.js

@@ -0,0 +1,37 @@
+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: {
+    type: 'dark',
+    background: { paper: '#575757' },
+  },
+})
+export const lightTheme = createMuiTheme({
+  palette: {
+    type: 'light',
+    background: { paper: '#f1f1f1' },
+  },
+})
+
+export const useMaterialUITheme = () => {
+  const isDarkMode = useMediaQuery('(prefers-color-scheme: dark)')
+
+  const muiTheme = useMemo(
+    () =>
+      createMuiTheme({
+        palette: {
+          type: isDarkMode ? 'dark' : 'light',
+          primary: { main: mainColors.primary },
+        },
+        typography: { fontFamily: 'Open Sans, sans-serif' },
+      }),
+    [isDarkMode],
+  )
+
+  return [isDarkMode, muiTheme]
+}