diff --git a/src/context/ThemeProvider.tsx b/src/context/ThemeProvider.tsx new file mode 100644 index 0000000000000000000000000000000000000000..a32c2249373bd7826f228c0c1251a6631e180453 --- /dev/null +++ b/src/context/ThemeProvider.tsx @@ -0,0 +1,29 @@ +import { + createMuiTheme, + StylesProvider, + Theme, + ThemeProvider as MUIThemeProvider, +} from '@material-ui/core/styles'; +import React, { useMemo } from 'react'; +import { ThemeProvider as SCThemeProvider } from 'styled-components'; +import { theme as defaultTheme } from '../theme'; + +export interface ThemeProviderProps { + theme?: Theme; +} + +const ThemeProvider: React.FC<ThemeProviderProps> = ({ theme: themeProp, children }) => { + const theme = useMemo( + () => (themeProp ? createMuiTheme(defaultTheme, themeProp) : defaultTheme), + [themeProp], + ); + return ( + <StylesProvider injectFirst> + <MUIThemeProvider theme={theme}> + <SCThemeProvider theme={theme}>{children}</SCThemeProvider> + </MUIThemeProvider> + </StylesProvider> + ); +}; + +export default ThemeProvider; diff --git a/src/styled-components.d.ts b/src/styled-components.d.ts new file mode 100644 index 0000000000000000000000000000000000000000..38cc3fd77826cef9386713bf741b22a5323152b0 --- /dev/null +++ b/src/styled-components.d.ts @@ -0,0 +1,7 @@ +import { Theme } from '@material-ui/core/styles'; +import 'styled-components'; + +declare module 'styled-components' { + // eslint-disable-next-line @typescript-eslint/no-empty-interface + export interface DefaultTheme extends Theme {} +} diff --git a/src/theme.ts b/src/theme.ts new file mode 100644 index 0000000000000000000000000000000000000000..4d700eb2e1d0ac53c2ac3b34bacccefe203d0059 --- /dev/null +++ b/src/theme.ts @@ -0,0 +1,19 @@ +import { createMuiTheme } from '@material-ui/core'; + +// eslint-disable-next-line import/prefer-default-export +export const theme = createMuiTheme({ + palette: { + primary: {}, + secondary: {}, + error: {}, + success: {}, + info: {}, + warning: {}, + grey: {}, + + text: {}, + }, + typography: { + fontFamily: 'Roboto', + }, +});