From b0a2dcbc210a06ec3a7bd98f4be5c43249f9945a Mon Sep 17 00:00:00 2001
From: Niels Mokkenstorm <niels@mokkenstorm.dev>
Date: Mon, 10 Aug 2026 12:04:01 +0200
Subject: [PATCH] fix: migrate the at-record theme key and split meta
 theme-color for dark mode

---
 web/priv/static/index.html           | 23 +++++++++++++++++++++--
 web/priv/static/manifest.webmanifest |  4 ++--
 web/src/crate_web.gleam              |  2 +-
 web/src/crate_web/ffi.ts             |  8 ++++++++
 web/src/crate_web/prefs.gleam        | 25 +++++++++++++++++++++++++
 5 files changed, 57 insertions(+), 5 deletions(-)
diff --git a/web/priv/static/index.html b/web/priv/static/index.html
index 14bcf6a..5748841 100644
--- a/web/priv/static/index.html
+++ b/web/priv/static/index.html
@@ -3,12 +3,31 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#f1e7d2" />
+    <meta
+      name="theme-color"
+      content="#f1e7d2"
+      media="(prefers-color-scheme: light)"
+    />
+    <meta
+      name="theme-color"
+      content="#191008"
+      media="(prefers-color-scheme: dark)"
+    />
     <script>
       // Runs before app.css/the bundle so there's no flash of the wrong theme.
       (function () {
         try {
-          var t = localStorage.getItem("crate:theme");
+          var NEW_KEY = "crate:theme";
+          var OLD_KEY = "at-record:theme";
+          var t = localStorage.getItem(NEW_KEY);
+          if (t === null) {
+            var legacy = localStorage.getItem(OLD_KEY);
+            if (legacy !== null) {
+              localStorage.setItem(NEW_KEY, legacy);
+              localStorage.removeItem(OLD_KEY);
+              t = legacy;
+            }
+          }
           if (t === "light" || t === "dark") {
             document.documentElement.setAttribute("data-theme", t);
           }
diff --git a/web/priv/static/manifest.webmanifest b/web/priv/static/manifest.webmanifest
index 45737db..3cc4f1a 100644
--- a/web/priv/static/manifest.webmanifest
+++ b/web/priv/static/manifest.webmanifest
@@ -4,7 +4,7 @@
   "description": "Your record crate, stored on your atproto PDS.",
   "start_url": "/",
   "display": "standalone",
-  "background_color": "#0f0d0b",
-  "theme_color": "#0f0d0b",
+  "background_color": "#191008",
+  "theme_color": "#191008",
   "icons": []
 }
diff --git a/web/src/crate_web.gleam b/web/src/crate_web.gleam
index aaf3e02..5cf3410 100644
--- a/web/src/crate_web.gleam
+++ b/web/src/crate_web.gleam
@@ -137,7 +137,7 @@ fn initial_display() -> model.Display {
 }
 
 fn initial_theme() -> model.Theme {
-  prefs.get(prefs.theme_key)
+  prefs.get_theme()
   |> result.map(model.theme_from_string)
   |> result.unwrap(model.System)
 }
diff --git a/web/src/crate_web/ffi.ts b/web/src/crate_web/ffi.ts
index a71f156..bc8a2d3 100644
--- a/web/src/crate_web/ffi.ts
+++ b/web/src/crate_web/ffi.ts
@@ -157,6 +157,14 @@ export function prefsSet(key: string, value: string): void {
   }
 }
 
+export function prefsRemove(key: string): void {
+  try {
+    globalThis.localStorage?.removeItem(key);
+  } catch {
+    // best-effort
+  }
+}
+
 // The page origin, so a relative BFF path can be made absolute for the
 // gleam_http request the async xrpc transport builds (fetch resolves relative
 // urls itself, but request.to() needs an absolute one).
diff --git a/web/src/crate_web/prefs.gleam b/web/src/crate_web/prefs.gleam
index ea983e3..925b4f1 100644
--- a/web/src/crate_web/prefs.gleam
+++ b/web/src/crate_web/prefs.gleam
@@ -16,11 +16,18 @@ fn ffi_get(key: String) -> Dynamic
 @external(javascript, "./ffi.ts", "prefsSet")
 fn ffi_set(key: String, value: String) -> Nil
 
+@external(javascript, "./ffi.ts", "prefsRemove")
+fn ffi_remove(key: String) -> Nil
+
 /// The crate page's grid/rows toggle.
 pub const display_key = "display"
 
 pub const theme_key = "theme"
 
+/// Every key not-theme started fresh under "crate:"; theme is the only one
+/// that shipped real user data under the pre-rename "at-record:" namespace.
+const legacy_theme_key = "at-record:theme"
+
 /// Locally-ignored `catalog.edit` proposal uri+cid pairs, capped and JSON-encoded.
 pub const ignored_proposals_key = "ignored-proposals"
 
@@ -44,6 +51,24 @@ pub fn set(key: String, value: String) -> Nil {
   ffi_set(namespaced(key), value)
 }
 
+/// Reads the theme, migrating a value left under the pre-rename key on first
+/// read: adopt it under the new key, then drop the old one so this only
+/// costs a lookup once per user.
+pub fn get_theme() -> Result(String, Nil) {
+  case get(theme_key) {
+    Ok(value) -> Ok(value)
+    Error(Nil) ->
+      ffi_get(legacy_theme_key)
+      |> decode.run(decode.string)
+      |> result.map(fn(value) {
+        set(theme_key, value)
+        ffi_remove(legacy_theme_key)
+        value
+      })
+      |> result.replace_error(Nil)
+  }
+}
+
 pub fn encode_ignored_proposals(ignored: List(#(String, String))) -> String {
   ignored
   |> json.array(fn(pair) {
-- 
2.51.2

