relmio 0.2.6 → 0.2.8

package/src/ui/theme.js

@@ -0,0 +1,50 @@
+const colorModes = new Set(["system", "light", "dark"]);
+const storageKey = "relmio-color-mode";
+
+function applyMode(mode) {
+  if (mode === "light" || mode === "dark") {
+    document.documentElement.dataset.theme = mode;
+  } else {
+    delete document.documentElement.dataset.theme;
+  }
+
+  document
+    .querySelectorAll('input[name="color-theme"]')
+    .forEach((input) => {
+      input.checked = input.value === mode;
+    });
+}
+
+let initialMode = "system";
+
+try {
+  const savedMode = window.localStorage.getItem(storageKey);
+  if (colorModes.has(savedMode)) {
+    initialMode = savedMode;
+  }
+} catch {
+  // System mode remains available when browser storage is unavailable.
+}
+
+applyMode(initialMode);
+
+document
+  .querySelectorAll('input[name="color-theme"]')
+  .forEach((input) => {
+    input.addEventListener("change", () => {
+      if (!input.checked || !colorModes.has(input.value)) return;
+
+      applyMode(input.value);
+      try {
+        window.localStorage.setItem(storageKey, input.value);
+      } catch {
+        // The selection still applies for this page view.
+      }
+    });
+  });
+
+window.addEventListener("storage", (event) => {
+  if (event.key === storageKey) {
+    applyMode(colorModes.has(event.newValue) ? event.newValue : "system");
+  }
+});

package/src/web/server.js

@@ -179,17 +179,23 @@ async function loadDefaultUiFiles() {
   const files = await Promise.all([
     readFile(new URL("../ui/index.html", import.meta.url), "utf8"),
     readFile(new URL("../ui/app.js", import.meta.url), "utf8"),
+    readFile(new URL("../ui/theme.js", import.meta.url), "utf8"),
     readFile(new URL("../ui/time.js", import.meta.url), "utf8"),
     readFile(new URL("../ui/styles.css", import.meta.url), "utf8"),
-    readFile(new URL("../ui/geist-latin.woff2", import.meta.url)),
+    readFile(new URL("../ui/icons/monitor.svg", import.meta.url), "utf8"),
+    readFile(new URL("../ui/icons/sun.svg", import.meta.url), "utf8"),
+    readFile(new URL("../ui/icons/moon.svg", import.meta.url), "utf8"),
   ]);
 
   return {
     "/": files[0],
     "/app.js": files[1],
-    "/time.js": files[2],
-    "/styles.css": files[3],
-    "/geist-latin.woff2": files[4],
+    "/theme.js": files[2],
+    "/time.js": files[3],
+    "/styles.css": files[4],
+    "/icons/monitor.svg": files[5],
+    "/icons/sun.svg": files[6],
+    "/icons/moon.svg": files[7],
   };
 }
 
@@ -419,13 +425,13 @@ function createRequestHandler(state) {
       }
 
       const contentType =
-        path.endsWith(".woff2")
-          ? "font/woff2"
-          : path.endsWith(".js")
+        path.endsWith(".js")
           ? "text/javascript; charset=utf-8"
-          : path === "/styles.css"
-            ? "text/css; charset=utf-8"
-            : "text/html; charset=utf-8";
+          : path.endsWith(".svg")
+            ? "image/svg+xml; charset=utf-8"
+            : path === "/styles.css"
+              ? "text/css; charset=utf-8"
+              : "text/html; charset=utf-8";
       const contents = state.uiFiles[path];
       response.writeHead(200, {
         "Content-Type": contentType,