From ca702271925513032706dce24736301a87055e4b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Chif=20Gerg=C5=91?= <chif.gergo@cloud.bme.hu>
Date: Sun, 24 Jan 2021 18:51:20 +0100
Subject: [PATCH] Add ThemeProvider and default theme
---
src/context/ThemeProvider.tsx | 29 +++++++++++++++++++++++++++++
src/styled-components.d.ts | 7 +++++++
src/theme.ts | 19 +++++++++++++++++++
3 files changed, 55 insertions(+)
create mode 100644 src/context/ThemeProvider.tsx
create mode 100644 src/styled-components.d.ts
create mode 100644 src/theme.ts
diff --git a/src/context/ThemeProvider.tsx b/src/context/ThemeProvider.tsx
new file mode 100644
index 0000000..a32c224
--- /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 0000000..38cc3fd
--- /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 0000000..4d700eb
--- /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',
+ },
+});
--
GitLab