Review changes

src/Pages/Layout.tsx

@@ -6,7 +6,7 @@ import { faBell, faMessage } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { RootState } from "State/Store";
-import { init, UserPreferences } from "State/Login";
+import { init, setPreferences, UserPreferences } from "State/Login";
 import { HexKey, RawEvent, TaggedRawEvent } from "Nostr";
 import { RelaySettings } from "Nostr/Connection";
 import { System } from "Nostr/System"
@@ -39,14 +39,26 @@ export default function Layout() {
         }
     }, [relays]);
 
-    useEffect(() => {
+    function setTheme(theme: "light" | "dark") {
         const elm = document.documentElement;
-        if (prefs.theme === "light") {
+        if (theme === "light" && !elm.classList.contains("light")) {
             elm.classList.add("light");
-        } else {
+        } else if (theme === "dark" && elm.classList.contains("light")) {
             elm.classList.remove("light");
         }
-    }, [prefs]);
+    }
+
+    useEffect(() => {
+        let osTheme = window.matchMedia("(prefers-color-scheme: light)");
+        setTheme(prefs.theme === "system" && osTheme.matches ? "light" : prefs.theme === "light" ? "light" : "dark");
+
+        osTheme.onchange = (e) => {
+            if (prefs.theme === "system") {
+                setTheme(e.matches ? "light" : "dark");
+            }
+        }
+        return () => { osTheme.onchange = null; }
+    }, [prefs.theme]);
 
     useEffect(() => {
         dispatch(init());

src/Pages/SettingsPage.tsx

@@ -8,10 +8,10 @@ export default function SettingsPage() {
     const navigate = useNavigate();
 
     return (
-        <div className="settings-page">
-            <h2 onClick={() => navigate("/settings")}>Settings</h2>
+        <>
+            <h2 onClick={() => navigate("/settings")} className="pointer">Settings</h2>
             <Outlet />
-        </div>
+        </>
     );
 }
 

src/Pages/settings/Index.css

@@ -1,3 +1,3 @@
-.settings-nav h3 {
-    background-color: var(--note-bg);
+.settings-nav .card {
+    cursor: pointer;
 }

src/Pages/settings/Preferences.tsx

@@ -16,7 +16,8 @@ const PreferencesPage = () => {
                     <div>Theme</div>
                 </div>
                 <div>
-                    <select value={perf.theme} onChange={e => dispatch(setPreferences({ ...perf, theme: "light" === e.target.value ? "light" : "dark" }))}>
+                    <select value={perf.theme} onChange={e => dispatch(setPreferences({ ...perf, theme: e.target.value} as UserPreferences))}>
+                        <option value="system">System (Default)</option>
                         <option value="light">Light</option>
                         <option value="dark">Dark</option>
                     </select>

src/State/Login.ts

@@ -24,7 +24,7 @@ export interface UserPreferences {
     /**
      * Select between light/dark theme
      */
-    theme: "light" | "dark",
+    theme: "system" | "light" | "dark",
 
     /**
      * Ask for confirmation when reposting notes
@@ -103,7 +103,7 @@ const InitState = {
     preferences: {
         enableReactions: true,
         autoLoadMedia: true,
-        theme: "dark",
+        theme: "system",
         confirmReposts: false
     }
 } as LoginStore;
@@ -146,10 +146,6 @@ const LoginSlice = createSlice({
             let pref = window.localStorage.getItem(UserPreferencesKey);
             if (pref) {
                 state.preferences = JSON.parse(pref);
-            } else {
-                // get os defaults
-                const osTheme = window.matchMedia("(prefers-color-scheme: light)");
-                state.preferences.theme = osTheme.matches ? "light" : "dark";
             }
         },
         setPrivateKey: (state, action: PayloadAction<HexKey>) => {

src/index.css

@@ -92,22 +92,16 @@ code {
 }
 
 @media (min-width: 720px) {
-  <<<<<<< HEAD .card {
+  .card {
     margin-bottom: 24px;
     padding: 12px 24px;
   }
 }
 
-@media (prefers-color-scheme: light) {
-  .card {
+html.light .card {
   box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.05);
+}
 
-    =======.card {
-      margin-bottom: 24px;
-      padding: 24px;
-      >>>>>>>3e41614 (feat: user preferences)
-    }
-  }
 
 .card .header {
   display: flex;