aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorSascha <GlancingMind@outlook.com>2021-03-01 17:47:57 +0100
committerSascha <GlancingMind@outlook.com>2021-03-04 20:53:28 +0100
commit9cac03652c410f943abe1e3a6b55dce0d79e48d6 (patch)
tree0f235e6e5cc9731923bee2620ac22fe2f778b7b2
parent9280e437b06c1812d9b4a62f18686878f9b7a769 (diff)
downloadgit-bug-9cac03652c410f943abe1e3a6b55dce0d79e48d6.tar.gz
Inject theme instead of defining it in Themer.tsx
-rw-r--r--webui/src/components/Themer.tsx57
-rw-r--r--webui/src/theme.ts13
2 files changed, 30 insertions, 40 deletions
diff --git a/webui/src/components/Themer.tsx b/webui/src/components/Themer.tsx
index 78e20564..d831fca9 100644
--- a/webui/src/components/Themer.tsx
+++ b/webui/src/components/Themer.tsx
@@ -1,20 +1,11 @@
import React, { createContext, useContext, useState } from 'react';
-import { PaletteType, ThemeProvider, useMediaQuery } from '@material-ui/core';
+import { ThemeProvider, useMediaQuery } from '@material-ui/core';
import IconButton from '@material-ui/core/IconButton/IconButton';
import Tooltip from '@material-ui/core/Tooltip/Tooltip';
-import { createMuiTheme } from '@material-ui/core/styles';
+import { Theme } from '@material-ui/core/styles';
import { NightsStayRounded, WbSunnyRounded } from '@material-ui/icons';
-const defaultTheme = {
- palette: {
- type: 'light',
- primary: {
- main: '#263238',
- },
- },
-};
-
const ThemeContext = createContext({
toggleMode: () => {},
mode: '',
@@ -22,10 +13,11 @@ const ThemeContext = createContext({
const LightSwitch = () => {
const { mode, toggleMode } = useContext(ThemeContext);
+ const description = `Switch to ${mode === 'light' ? 'dark' : 'light'} theme`;
return (
- <Tooltip title="Toggle Dark-/Lightmode">
- <IconButton onClick={toggleMode} aria-label="Toggle Dark-/Lightmode">
+ <Tooltip title={description}>
+ <IconButton onClick={toggleMode} aria-label={description}>
{mode === 'light' ? (
<WbSunnyRounded color="secondary" />
) : (
@@ -36,40 +28,29 @@ const LightSwitch = () => {
);
};
-type Props = { children: React.ReactNode };
-const Themer = ({ children }: Props) => {
- const [theme, setTheme] = useState(defaultTheme);
+type Props = {
+ children: React.ReactNode;
+ lightTheme: Theme;
+ darkTheme: Theme;
+};
+const Themer = ({ children, lightTheme, darkTheme }: Props) => {
const preferseDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
const browserMode = preferseDarkMode ? 'dark' : 'light';
- const preferedMode = localStorage.getItem('themeMode');
- const curMode = preferedMode != null ? preferedMode : browserMode;
-
- const adjustedTheme = {
- ...theme,
- palette: {
- ...theme.palette,
- type: (curMode === 'dark' ? 'dark' : 'light') as PaletteType,
- },
- };
+ const savedMode = localStorage.getItem('themeMode');
+ const preferedMode = savedMode != null ? savedMode : browserMode;
+ const [curMode, setMode] = useState(preferedMode);
const toggleMode = () => {
- const preferedMode = curMode === 'dark' ? 'light' : 'dark';
+ const preferedMode = curMode === 'light' ? 'dark' : 'light';
localStorage.setItem('themeMode', preferedMode);
- const adjustedTheme = {
- ...theme,
- palette: {
- ...theme.palette,
- type: preferedMode as PaletteType,
- },
- };
- setTheme(adjustedTheme);
+ setMode(preferedMode);
};
+ const preferedTheme = preferedMode === 'dark' ? darkTheme : lightTheme;
+
return (
<ThemeContext.Provider value={{ toggleMode: toggleMode, mode: curMode }}>
- <ThemeProvider theme={createMuiTheme(adjustedTheme)}>
- {children}
- </ThemeProvider>
+ <ThemeProvider theme={preferedTheme}>{children}</ThemeProvider>
</ThemeContext.Provider>
);
};
diff --git a/webui/src/theme.ts b/webui/src/theme.ts
index 3d536941..67c24526 100644
--- a/webui/src/theme.ts
+++ b/webui/src/theme.ts
@@ -1,6 +1,15 @@
import { createMuiTheme } from '@material-ui/core/styles';
-const theme = createMuiTheme({
+const defaultLightTheme = createMuiTheme({
+ palette: {
+ type: 'light',
+ primary: {
+ main: '#263238',
+ },
+ },
+});
+
+const defaultDarkTheme = createMuiTheme({
palette: {
type: 'dark',
primary: {
@@ -9,4 +18,4 @@ const theme = createMuiTheme({
},
});
-export default theme;
+export { defaultLightTheme, defaultDarkTheme };