Add button to toggle between light- and dark-mode

1 files changed, 64 insertions, 0 deletions

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 };