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