Add dark mode support

reminder-dashboard/src/components/UserPreferences/index.tsx

@@ -5,6 +5,12 @@ import { useRef, useState } from "preact/hooks";
 import { ICON_FLASH_TIME } from "../../consts";
 import { useFlash } from "../App/FlashContext";
 
+enum ColorScheme {
+    System = "system",
+    Dark = "dark",
+    Light = "light",
+}
+
 export const UserPreferences = () => {
     const [modalOpen, setModalOpen] = useState(false);
 
@@ -96,6 +102,40 @@ const PreferencesModal = ({ setModalOpen }) => {
                 </label>
             </div>
             <br></br>
+            <div style={{ display: "flex", flexDirection: "row", alignContent: "center" }}>
+                <label>
+                    <div class={"is-inline-block"} style={{ marginRight: "6px" }}>
+                        Dashboard Color Scheme:
+                    </div>
+                    <div class={"control"}>
+                        <div class={"is-inline-block select"}>
+                            {isLoading && <i class={"fa fa-spinner"} />}
+                            {isSuccess && (
+                                <select
+                                    class={"channel-selector"}
+                                    value={
+                                        updatedSettings.dashboard_color_scheme === undefined
+                                            ? data.preferences.dashboard_color_scheme
+                                            : updatedSettings.dashboard_color_scheme
+                                    }
+                                    onChange={(e) =>
+                                        setUpdatedSettings((s) => ({
+                                            ...s,
+                                            dashboard_color_scheme: (e.target as HTMLSelectElement)
+                                                .value as ColorScheme,
+                                        }))
+                                    }
+                                >
+                                    <option value={ColorScheme.System}>System default</option>
+                                    <option value={ColorScheme.Light}>Light</option>
+                                    <option value={ColorScheme.Dark}>Dark</option>
+                                </select>
+                            )}
+                        </div>
+                    </div>
+                </label>
+            </div>
+            <br></br>
             <div class="has-text-centered">
                 <button
                     class="button is-success is-outlined"