Improves dark mode by:

- initializing the theme with the OS setting
- adding toggle button in navigation bar
- introducing global state
- keeping user preference in local storage (if different to OS setting)

website/src/App.tsx

@@ -10,11 +10,6 @@ import { YourDevices } from './pages/YourDevices';
 import { AllDevices } from './pages/admin/AllDevices';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 
-const darkTheme = createTheme({
-  palette: {
-    mode: 'dark',
-  },
-});
 export const App = observer(class App extends React.Component {
   async componentDidMount() {
     AppState.info = await grpc.server.info({});
@@ -24,9 +19,16 @@ export const App = observer(class App extends React.Component {
     if (!AppState.info) {
       return <p>loading...</p>;
     }
+
+    const darkLightTheme = createTheme({
+      palette: {
+        mode: AppState.darkMode ? 'dark' : 'light',
+      },
+    });
+
     return (
       <Router>
-        <ThemeProvider theme={darkTheme}>
+        <ThemeProvider theme={darkLightTheme}>
           <CssBaseline />
           <Navigation />
           <Box component="div" m={2}>

website/src/AppState.ts

@@ -1,13 +1,24 @@
-import { observable, makeObservable } from 'mobx';
+import {observable, makeObservable, runInAction} from 'mobx';
 import { InfoRes } from './sdk/server_pb';
 
 class GlobalAppState {
   info?: InfoRes.AsObject;
+  darkMode: boolean;
 
   constructor() {
     makeObservable(this, {
-      info: observable
+      info: observable,
+      darkMode: observable
     });
+
+    this.darkMode = false;
+  }
+
+  setDarkMode(darkMode: boolean) {
+    runInAction(() => {
+      this.darkMode = darkMode;
+    })
+
   }
 }
 

website/src/components/Navigation.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useEffect} from 'react';
 import makeStyles from '@mui/styles/makeStyles';
 import { getCookie } from '../Cookies';
 import { AppState } from '../AppState';
@@ -10,6 +10,10 @@ import Link from '@mui/material/Link';
 import Button from '@mui/material/Button';
 import Chip from '@mui/material/Chip';
 import VpnKey from '@mui/icons-material/VpnKey';
+import IconButton from "@mui/material/IconButton";
+import Brightness4Icon from '@mui/icons-material/Brightness4';
+import Brightness7Icon from '@mui/icons-material/Brightness7';
+import {useMediaQuery} from "@mui/material";
 
 const useStyles = makeStyles((theme) => ({
   title: {
@@ -38,6 +42,8 @@ export default function Navigation() {
           )}
         </Typography>
 
+        <DarkModeToggle />
+
         {AppState.info?.isAdmin && (
           <Link to="/admin/all-devices" color="inherit" component={NavLink}>
             <Button color="inherit">All Devices</Button>
@@ -53,3 +59,39 @@ export default function Navigation() {
     </AppBar>
   );
 }
+
+function DarkModeToggle() {
+
+  const CUSTOM_DARK_MODE_KEY = "customDarkMode";
+  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
+
+  useEffect(()=>{
+    let customDarkMode = localStorage.getItem(CUSTOM_DARK_MODE_KEY);
+      if (customDarkMode) {
+        AppState.setDarkMode(JSON.parse(customDarkMode));
+      }
+      else {
+        AppState.setDarkMode(prefersDarkMode);
+      }
+
+    },[prefersDarkMode]);
+
+  function toggleDarkMode() {
+    AppState.setDarkMode(!AppState.darkMode);
+
+    // We only persist the preference in the local storage if it is different to the OS setting.
+    if (prefersDarkMode !== AppState.darkMode) {
+      localStorage.setItem(CUSTOM_DARK_MODE_KEY, JSON.stringify(AppState.darkMode));
+    }
+    else {
+      localStorage.removeItem(CUSTOM_DARK_MODE_KEY);
+    }
+  }
+
+  return (
+      <IconButton sx={{ ml: 1 }} onClick={toggleDarkMode} color="inherit" title={"Light / Dark"}>
+        {AppState.darkMode ? <Brightness7Icon /> : <Brightness4Icon />}
+      </IconButton>
+  );
+
+}