Add button to toggle between light- and dark-mode

2 files changed, 71 insertions, 0 deletions

diff --git a/webui/src/components/Header/Header.tsx b/webui/src/components/Header/Header.tsx
index 3e39b5f3..3bdb252f 100644
--- a/webui/src/components/Header/Header.tsx
+++ b/webui/src/components/Header/Header.tsx
@@ -5,6 +5,7 @@ import AppBar from '@material-ui/core/AppBar';
 import Toolbar from '@material-ui/core/Toolbar';
 import { makeStyles } from '@material-ui/core/styles';
 
+import { LightSwitch } from '../../components/Themer';
 import CurrentIdentity from '../CurrentIdentity/CurrentIdentity';
 
 const useStyles = makeStyles((theme) => ({
@@ -21,6 +22,9 @@ const useStyles = makeStyles((theme) => ({
     display: 'flex',
     alignItems: 'center',
   },
+  lightSwitch: {
+    padding: '0 20px',
+  },
   logo: {
     height: '42px',
     marginRight: theme.spacing(2),
@@ -39,6 +43,9 @@ function Header() {
             git-bug
           </Link>
           <div className={classes.filler}></div>
+          <div className={classes.lightSwitch}>
+            <LightSwitch />
+          </div>
           <CurrentIdentity />
         </Toolbar>
       </AppBar>
diff --git a/webui/src/components/Themer.tsx b/webui/src/components/Themer.tsx
new file mode 100644
index 00000000..13d098da
--- /dev/null
+++ b/webui/src/components/Themer.tsx
@@ -0,0 +1,64 @@
+import React, { createContext, useCallback, useContext, useState } from 'react';
+
+import { ThemeProvider } from '@material-ui/core';
+import IconButton from '@material-ui/core/IconButton/IconButton';
+import Tooltip from '@material-ui/core/Tooltip/Tooltip';
+import { createMuiTheme, ThemeOptions } from '@material-ui/core/styles';
+import { NightsStayRounded, WbSunnyRounded } from '@material-ui/icons';
+
+const defaultTheme: ThemeOptions = {
+  palette: {
+    type: 'light',
+    primary: {
+      main: '#263238',
+    },
+  },
+};
+
+const ThemeContext = createContext({
+  toggleMode: () => {},
+  mode: '',
+});
+
+const LightSwitch = () => {
+  const { mode, toggleMode } = useContext(ThemeContext);
+
+  return (
+    <Tooltip title="Toggle Dark-/Lightmode">
+      <IconButton onClick={toggleMode} aria-label="Toggle Dark-/Lightmode">
+        {mode === 'light' ? (
+          <WbSunnyRounded color="secondary" />
+        ) : (
+          <NightsStayRounded color="secondary" />
+        )}
+      </IconButton>
+    </Tooltip>
+  );
+};
+
+type Props = { children: React.ReactNode };
+const Themer = ({ children }: Props) => {
+  const [theme, setTheme] = useState(defaultTheme);
+
+  const toggleMode = useCallback(() => {
+    const newMode = theme.palette?.type === 'dark' ? 'light' : 'dark';
+    const adjustedTheme: ThemeOptions = {
+      ...theme,
+      palette: {
+        ...theme.palette,
+        type: newMode,
+      },
+    };
+    setTheme(adjustedTheme);
+  }, [theme, setTheme]);
+
+  const newMode = theme.palette?.type === 'dark' ? 'light' : 'dark';
+
+  return (
+    <ThemeContext.Provider value={{ toggleMode: toggleMode, mode: newMode }}>
+      <ThemeProvider theme={createMuiTheme(theme)}> {children} </ThemeProvider>
+    </ThemeContext.Provider>
+  );
+};
+
+export { Themer as default, LightSwitch };