feat(web): persist darkmode preference

web/package-lock.json

@@ -421,6 +421,17 @@
         "typed-colors": "^1.0.0",
         "typed-figures": "^1.0.0",
         "yargs": "^16.2.0"
+      },
+      "dependencies": {
+        "enhanced-resolve": {
+          "version": "5.7.0",
+          "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.7.0.tgz",
+          "integrity": "sha512-6njwt/NsZFUKhM6j9U8hzVyD4E4r0x7NQzhTCbcWOJ0IQjNSAoalWmb0AE51Wn+fwan5qVESWi7t2ToBxs9vrw==",
+          "requires": {
+            "graceful-fs": "^4.2.4",
+            "tapable": "^2.2.0"
+          }
+        }
       }
     },
     "@typed/fp": {
@@ -444,6 +455,13 @@
         "newtype-ts": "^0.3.4",
         "ts-toolbelt": "^8.0.7",
         "tslib": "^2.0.3"
+      },
+      "dependencies": {
+        "json-schema": {
+          "version": "0.2.5",
+          "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.2.5.tgz",
+          "integrity": "sha512-gWJOWYFrhQ8j7pVm0EM8Slr+EPVq1Phf6lvzvD/WCeqkrx/f2xBI0xOsRRS9xCn3I4vKtP519dvs3TP09r24wQ=="
+        }
       }
     },
     "@types/json-schema": {
@@ -836,15 +854,6 @@
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
       "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
     },
-    "enhanced-resolve": {
-      "version": "5.7.0",
-      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.7.0.tgz",
-      "integrity": "sha512-6njwt/NsZFUKhM6j9U8hzVyD4E4r0x7NQzhTCbcWOJ0IQjNSAoalWmb0AE51Wn+fwan5qVESWi7t2ToBxs9vrw==",
-      "requires": {
-        "graceful-fs": "^4.2.4",
-        "tapable": "^2.2.0"
-      }
-    },
     "error-ex": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
@@ -1047,6 +1056,11 @@
       "resolved": "https://registry.npmjs.org/hyperhtml-style/-/hyperhtml-style-0.1.2.tgz",
       "integrity": "sha512-ZDRYNClEaqUS0a8RAED0nQRqWmZk7ctdyij3Iw/PqUUef6xhYO87nx9vJNuxg7Yc6J2FdJjXRKbB0iud2ZyzwQ=="
     },
+    "idb-keyval": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/idb-keyval/-/idb-keyval-5.0.2.tgz",
+      "integrity": "sha512-1DYjY/nX2U9pkTkwFoAmKcK1ZWmkNgO32Oon9tp/9+HURizxUQ4fZRxMJZs093SldP7q6dotVj03kIkiqOILyA=="
+    },
     "ignore": {
       "version": "5.1.8",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.1.8.tgz",
@@ -1201,11 +1215,6 @@
       "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
       "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w=="
     },
-    "json-schema": {
-      "version": "0.2.5",
-      "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.2.5.tgz",
-      "integrity": "sha512-gWJOWYFrhQ8j7pVm0EM8Slr+EPVq1Phf6lvzvD/WCeqkrx/f2xBI0xOsRRS9xCn3I4vKtP519dvs3TP09r24wQ=="
-    },
     "json5": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/json5/-/json5-2.1.3.tgz",

web/package.json

@@ -11,6 +11,7 @@
     "@snowpack/plugin-postcss": "^1.1.0",
     "autoprefixer": "^10.2.1",
     "cross-env": "^7.0.3",
+    "idb-keyval": "^5.0.2",
     "immer": "^8.0.1",
     "postcss": "^8.2.2",
     "postcss-cli": "^8.3.1",

web/src/App.jsx

@@ -4,6 +4,7 @@ import AppBar from './components/AppBar';
 import Camera from './Camera';
 import CameraMap from './CameraMap';
 import Cameras from './Cameras';
+import { DarkModeProvider } from './context';
 import Debug from './Debug';
 import Event from './Event';
 import Events from './Events';
@@ -15,28 +16,30 @@ import Api, { FetchStatus, useConfig } from './api';
 export default function App() {
   const { data, status } = useConfig();
   return (
-    <div class="w-full">
-      <AppBar title="Frigate" />
-      {status !== FetchStatus.LOADED ? (
-        <div className="flex flex-grow-1 min-h-screen justify-center items-center">
-          <ActivityIndicator />
-        </div>
-      ) : (
-        <div className="md:flex flex-col md:flex-row md:min-h-screen w-full bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
-          <Sidebar />
-          <div className="w-full flex-auto p-2 mt-20 md:p-4 lg:pl-8 lg:pr-8 min-w-0">
-            <Router>
-              <CameraMap path="/cameras/:camera/editor" />
-              <Camera path="/cameras/:camera" />
-              <Event path="/events/:eventId" />
-              <Events path="/events" />
-              <Debug path="/debug" />
-              {import.meta.env.SNOWPACK_MODE !== 'development' ? <StyleGuide path="/styleguide" /> : null}
-              <Cameras default path="/" />
-            </Router>
+    <DarkModeProvider>
+      <div class="w-full">
+        <AppBar title="Frigate" />
+        {status !== FetchStatus.LOADED ? (
+          <div className="flex flex-grow-1 min-h-screen justify-center items-center">
+            <ActivityIndicator />
           </div>
-        </div>
-      )}
-    </div>
+        ) : (
+          <div className="flex flex-row min-h-screen w-full bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
+            <Sidebar />
+            <div className="w-full flex-auto p-2 mt-20 md:p-4 lg:pl-8 lg:pr-8 min-w-0">
+              <Router>
+                <CameraMap path="/cameras/:camera/editor" />
+                <Camera path="/cameras/:camera" />
+                <Event path="/events/:eventId" />
+                <Events path="/events" />
+                <Debug path="/debug" />
+                {import.meta.env.SNOWPACK_MODE !== 'development' ? <StyleGuide path="/styleguide" /> : null}
+                <Cameras default path="/" />
+              </Router>
+            </div>
+          </div>
+        )}
+      </div>
+    </DarkModeProvider>
   );
 }

web/src/Settings.jsx

@@ -0,0 +1,34 @@
+import { h } from 'preact';
+import { useDarkMode } from './context';
+import { useCallback } from 'preact/hooks';
+
+export default function Settings() {
+  const { currentMode, persistedMode, setDarkMode } = useDarkMode();
+
+  const handleSelect = useCallback(
+    (event) => {
+      const mode = event.target.value;
+      setDarkMode(mode);
+    },
+    [setDarkMode]
+  );
+
+  return (
+    <div>
+      <label>
+        <span className="block uppercase text-sm">Dark mode</span>
+        <select className="border-solid border border-gray-500 rounded dark:text-gray-900" onChange={handleSelect}>
+          <option selected={persistedMode === 'media'} value="media">
+            Auto
+          </option>
+          <option selected={persistedMode === 'light'} value="light">
+            Light
+          </option>
+          <option selected={persistedMode === 'dark'} value="dark">
+            Dark
+          </option>
+        </select>
+      </label>
+    </div>
+  );
+}

web/src/Sidebar.jsx

@@ -4,30 +4,6 @@ import LinkedLogo from './components/LinkedLogo';
 import { Link as RouterLink } from 'preact-router/match';
 import { useCallback, useState } from 'preact/hooks';
 
-function HamburgerIcon() {
-  return (
-    <svg fill="currentColor" viewBox="0 0 20 20" className="w-6 h-6">
-      <path
-        fill-rule="evenodd"
-        d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z"
-        clip-rule="evenodd"
-      ></path>
-    </svg>
-  );
-}
-
-function CloseIcon() {
-  return (
-    <svg fill="currentColor" viewBox="0 0 20 20" className="w-6 h-6">
-      <path
-        fill-rule="evenodd"
-        d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
-        clip-rule="evenodd"
-      ></path>
-    </svg>
-  );
-}
-
 function NavLink({ className = '', href, text }) {
   const external = href.startsWith('http');
   const El = external ? Link : RouterLink;
@@ -45,30 +21,14 @@ function NavLink({ className = '', href, text }) {
 }
 
 export default function Sidebar() {
-  const [open, setOpen] = useState(false);
-
-  const handleToggle = useCallback(() => {
-    setOpen(!open);
-  }, [open, setOpen]);
-
   return (
-    <div className="sticky top-0 max-h-screen flex flex-col w-full md:w-64 text-gray-700 bg-white dark:text-gray-200 dark:bg-gray-700 flex-shrink-0 border-r border-gray-200 shadow lg:shadow-none z-20 lg:z-0">
+    <div className="sticky top-0 max-h-screen flex flex-col w-full md:w-64 text-gray-700 bg-white dark:text-gray-200 dark:bg-gray-900 flex-shrink-0 border-r border-gray-200 dark:border-gray-700 shadow lg:shadow-none z-20 lg:z-0">
       <div className="flex-shrink-0 p-4 flex flex-row items-center justify-between">
         <div class="text-gray-500">
           <LinkedLogo />
         </div>
-        <button
-          className="rounded-lg md:hidden rounded-lg focus:outline-none focus:shadow-outline"
-          onClick={handleToggle}
-        >
-          {open ? <CloseIcon /> : <HamburgerIcon />}
-        </button>
       </div>
-      <nav
-        className={`flex-col flex-grow md:block overflow-hidden px-4 pb-4 md:pb-0 md:overflow-y-auto ${
-          !open ? 'md:h-0 hidden' : ''
-        }`}
-      >
+      <nav className="flex-col flex-grow md:block overflow-hidden px-4 pb-4 md:pb-0 md:overflow-y-auto">
         <NavLink href="/" text="Cameras" />
         <NavLink href="/events" text="Events" />
         <NavLink href="/debug" text="Debug" />

web/src/components/AppBar.jsx

@@ -1,8 +1,11 @@
 import { h } from 'preact';
 import Button from './Button';
 import LinkedLogo from './LinkedLogo';
+import Menu, { MenuItem } from './Menu';
 import MenuIcon from '../icons/Menu';
-import { useLayoutEffect, useCallback, useState } from 'preact/hooks';
+import MoreIcon from '../icons/More';
+import { useDarkMode } from '../context';
+import { useLayoutEffect, useCallback, useRef, useState } from 'preact/hooks';
 
 // We would typically preserve these in component state
 // But need to avoid too many re-renders
@@ -13,6 +16,18 @@ export default function AppBar({ title }) {
   const [show, setShow] = useState(true);
   const [atZero, setAtZero] = useState(window.scrollY === 0);
   const [sidebarVisible, setSidebarVisible] = useState(true);
+  const [showMoreMenu, setShowMoreMenu] = useState(false);
+  const { currentMode, persistedMode, setDarkMode } = useDarkMode();
+
+  const handleSelectDarkMode = useCallback(
+    (value, label) => {
+      setDarkMode(value);
+      setShowMoreMenu(false);
+    },
+    [setDarkMode, setShowMoreMenu]
+  );
+
+  const moreRef = useRef(null);
 
   const scrollListener = useCallback(
     (event) => {
@@ -38,9 +53,17 @@ export default function AppBar({ title }) {
     };
   }, []);
 
+  const handleShowMenu = useCallback(() => {
+    setShowMoreMenu(true);
+  }, [setShowMoreMenu]);
+
+  const handleDismissMoreMenu = useCallback(() => {
+    setShowMoreMenu(false);
+  }, [setShowMoreMenu]);
+
   return (
     <div
-      className={`w-full border-b border-color-gray-100 flex items-center align-middle p-4 space-x-2 fixed left-0 right-0 z-10 bg-white dark:bg-gray-800 transform transition-all duration-200 translate-y-0 ${
+      className={`w-full border-b border-gray-100 dark:border-gray-700 flex items-center align-middle p-4 space-x-2 fixed left-0 right-0 z-10 bg-white dark:bg-gray-900 transform transition-all duration-200 translate-y-0 ${
         !show ? '-translate-y-full' : ''
       } ${!atZero ? 'shadow' : ''}`}
     >
@@ -50,6 +73,20 @@ export default function AppBar({ title }) {
         </Button>
       </div>
       <LinkedLogo />
+      <div className="flex-grow-1 flex justify-end w-full">
+        <div ref={moreRef}>
+          <Button className="rounded-full w-12 h-12" onClick={handleShowMenu} type="text">
+            <MoreIcon />
+          </Button>
+        </div>
+      </div>
+      {showMoreMenu ? (
+        <Menu onDismiss={handleDismissMoreMenu} relativeTo={moreRef}>
+          <MenuItem label="Auto" value="media" onSelect={handleSelectDarkMode} />
+          <MenuItem label="Light" value="light" onSelect={handleSelectDarkMode} />
+          <MenuItem label="Dark" value="dark" onSelect={handleSelectDarkMode} />
+        </Menu>
+      ) : null}
     </div>
   );
 }

web/src/components/RelativeModal.jsx

@@ -76,13 +76,15 @@ export default function RelativeModal({ className, role = 'dialog', children, on
     <Fragment>
       <div className="absolute inset-0" onClick={handleDismiss} />
       <div
-        className={`bg-white dark:bg-gray-700 dark:text-white absolute shadow-lg rounded w-auto max-h-48 transition-all duration-75 transform scale-90 opacity-0 ${
+        className={`z-10 bg-white dark:bg-gray-700 dark:text-white absolute shadow-lg rounded w-auto max-h-48 transition-all duration-75 transform scale-90 opacity-0 ${
           show ? 'scale-100 opacity-100' : ''
         } ${className}`}
         onkeydown={handleKeydown}
         role={role}
         ref={ref}
-        style={position.width > 0 ? `width: ${position.width}px; top: ${position.top}px; left: ${position.left}px` : ''}
+        style={
+          position.width > 0 ? `min-width: ${position.width}px; top: ${position.top}px; left: ${position.left}px` : ''
+        }
       >
         {children}
       </div>

web/src/context/index.jsx

@@ -0,0 +1,66 @@
+import { h, createContext } from 'preact';
+import { get as getData, set as setData } from 'idb-keyval';
+import produce from 'immer';
+import { useCallback, useContext, useEffect, useState } from 'preact/hooks';
+
+const DarkMode = createContext(null);
+
+export function DarkModeProvider({ children }) {
+  const [persistedMode, setPersistedMode] = useState(null);
+  const [currentMode, setCurrentMode] = useState(persistedMode !== 'media' ? persistedMode : null);
+
+  const setDarkMode = useCallback(
+    (value) => {
+      setPersistedMode(value);
+      setData('darkmode', value);
+      if (value !== 'media') {
+        setCurrentMode(value);
+      }
+    },
+    [setPersistedMode]
+  );
+
+  useEffect(() => {
+    async function load() {
+      const darkmode = await getData('darkmode');
+      setDarkMode(darkmode || 'media');
+    }
+
+    load();
+  }, []);
+
+  if (persistedMode === null) {
+    return null;
+  }
+
+  const handleMediaMatch = useCallback(
+    ({ matches }) => {
+      if (matches) {
+        setCurrentMode('dark');
+      } else {
+        setCurrentMode('light');
+      }
+    },
+    [setCurrentMode]
+  );
+
+  useEffect(() => {
+    if (persistedMode !== 'media') {
+      return;
+    }
+
+    const query = window.matchMedia('(prefers-color-scheme: dark)');
+    query.addEventListener('change', handleMediaMatch);
+    handleMediaMatch(query);
+  }, [persistedMode]);
+
+  return (
+    <DarkMode.Provider value={{ currentMode, persistedMode, setDarkMode }}>
+      <div className={`${currentMode === 'dark' ? 'dark' : ''}`}>{children}</div>
+    </DarkMode.Provider>
+  );
+}
+
+export function useDarkMode() {
+  return useContext(DarkMode);
+}

web/tailwind.config.js

@@ -2,7 +2,7 @@
 
 module.exports = {
   purge: ['./public/**/*.html', './src/**/*.jsx'],
-  darkMode: 'media',
+  darkMode: 'class',
   theme: {
     extend: {},
   },