From 1e0a36972d5043711c40553fe6be72ce4f40a771 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rafael=20L=C3=A1szl=C3=B3?= <rlacko99@gmail.com>
Date: Sat, 30 Jan 2021 15:10:47 +0100
Subject: [PATCH] add theme customization

---
 src/App.tsx                             |  2 +-
 src/components/Footer.tsx               | 16 +++++++++++++++-
 src/context/ThemeProvider.tsx           |  9 ++++-----
 src/{theme.ts => styles/darkTheme.ts}   | 25 ++++++-------------------
 src/styles/lightTheme.ts                | 24 ++++++++++++++++++++++++
 src/styles/material-ui.d.ts             | 10 ++++++++++
 src/{ => styles}/styled-components.d.ts |  0
 7 files changed, 60 insertions(+), 26 deletions(-)
 rename src/{theme.ts => styles/darkTheme.ts} (57%)
 create mode 100644 src/styles/lightTheme.ts
 create mode 100644 src/styles/material-ui.d.ts
 rename src/{ => styles}/styled-components.d.ts (100%)

diff --git a/src/App.tsx b/src/App.tsx
index 5279e89..85d6d60 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -4,7 +4,7 @@ import { ClientContextProvider } from './context';
 import ThemeProvider from './context/ThemeProvider';
 import { UserStateProvider } from './context/UserContext';
 import Routes from './Routes';
-import { darkTheme } from './theme';
+import darkTheme from './styles/darkTheme';
 
 function App(): React.ReactElement {
   return (
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 23bc3e2..ff9a53e 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -1,5 +1,19 @@
+import { Box, makeStyles } from '@material-ui/core';
 import React from 'react';
 
-const Footer: React.FC = () => <div>Footer</div>;
+const useStyles = makeStyles((theme) => ({
+  footer: {
+    background: theme.footer.background,
+  },
+}));
+
+const Footer: React.FC = () => {
+  const classes = useStyles();
+  return (
+    <Box component="footer" className={classes.footer}>
+      a
+    </Box>
+  );
+};
 
 export default Footer;
diff --git a/src/context/ThemeProvider.tsx b/src/context/ThemeProvider.tsx
index a32c224..49bdd30 100644
--- a/src/context/ThemeProvider.tsx
+++ b/src/context/ThemeProvider.tsx
@@ -6,17 +6,16 @@ import {
 } from '@material-ui/core/styles';
 import React, { useMemo } from 'react';
 import { ThemeProvider as SCThemeProvider } from 'styled-components';
-import { theme as defaultTheme } from '../theme';
+import lightTheme from '../styles/lightTheme';
 
 export interface ThemeProviderProps {
   theme?: Theme;
 }
 
 const ThemeProvider: React.FC<ThemeProviderProps> = ({ theme: themeProp, children }) => {
-  const theme = useMemo(
-    () => (themeProp ? createMuiTheme(defaultTheme, themeProp) : defaultTheme),
-    [themeProp],
-  );
+  const theme = useMemo(() => (themeProp ? createMuiTheme(lightTheme, themeProp) : lightTheme), [
+    themeProp,
+  ]);
   return (
     <StylesProvider injectFirst>
       <MUIThemeProvider theme={theme}>
diff --git a/src/theme.ts b/src/styles/darkTheme.ts
similarity index 57%
rename from src/theme.ts
rename to src/styles/darkTheme.ts
index b40cff6..be08ab4 100644
--- a/src/theme.ts
+++ b/src/styles/darkTheme.ts
@@ -1,25 +1,9 @@
 import { createMuiTheme } from '@material-ui/core';
 
-// eslint-disable-next-line import/prefer-default-export
-export const theme = createMuiTheme({
-  // TODO: Create default theme
-  /*   palette: {
-    primary: {},
-    secondary: {},
-    error: {},
-    success: {},
-    info: {},
-    warning: {},
-    grey: {},
-
-    text: {},
-  }, */
-  typography: {
-    fontFamily: 'Roboto',
+const darkTheme = createMuiTheme({
+  footer: {
+    background: '#222222',
   },
-});
-
-export const darkTheme = createMuiTheme({
   palette: {
     primary: {
       main: '#1A6B97',
@@ -36,6 +20,7 @@ export const darkTheme = createMuiTheme({
       default: '#2A2A28',
       paper: '#202020',
     },
+
     /* success: {},
     info: {},
     warning: {}, */
@@ -48,3 +33,5 @@ export const darkTheme = createMuiTheme({
     fontFamily: 'Roboto',
   },
 });
+
+export default darkTheme;
diff --git a/src/styles/lightTheme.ts b/src/styles/lightTheme.ts
new file mode 100644
index 0000000..157b6cf
--- /dev/null
+++ b/src/styles/lightTheme.ts
@@ -0,0 +1,24 @@
+import { createMuiTheme } from '@material-ui/core';
+
+const lightTheme = createMuiTheme({
+  // TODO: Create default theme
+  /*   palette: {
+      primary: {},
+      secondary: {},
+      error: {},
+      success: {},
+      info: {},
+      warning: {},
+      grey: {},
+  
+      text: {},
+    }, */
+  footer: {
+    background: '#E0E0E0',
+  },
+  typography: {
+    fontFamily: 'Roboto',
+  },
+});
+
+export default lightTheme;
diff --git a/src/styles/material-ui.d.ts b/src/styles/material-ui.d.ts
new file mode 100644
index 0000000..93c7b56
--- /dev/null
+++ b/src/styles/material-ui.d.ts
@@ -0,0 +1,10 @@
+import '@material-ui/core/styles/createMuiTheme';
+
+declare module '@material-ui/core/styles/createMuiTheme' {
+  interface Theme {
+    footer: {
+      background: React.CSSProperties['background'];
+    };
+  }
+  interface ThemeOptions extends Theme {}
+}
diff --git a/src/styled-components.d.ts b/src/styles/styled-components.d.ts
similarity index 100%
rename from src/styled-components.d.ts
rename to src/styles/styled-components.d.ts
-- 
GitLab