From cf0cc4dc0fc684c6b4da271da632da669b1aa184 Mon Sep 17 00:00:00 2001
From: Sunny <sunnylnyc@gmail.com>
Date: Fri, 24 Jul 2026 12:42:10 -0400
Subject: [PATCH] fix(login): render the profile's active theme on the login
 page

The pre-auth login page cannot call /api/prefs/theme (401) and a freshly
opened device has nothing in localStorage, so it always fell back to the
built-in default palette instead of the theme the user set in-app.

Inject the profile's active theme into the login page at render time so it
matches the in-app theme on any device, including a first visit. Scoped to
single-user instances (no way to know whose theme to show before sign-in);
localStorage and the default :root remain fallbacks. The injected JSON is
escaped so it cannot break out of the surrounding <script>.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/app_helpers.py | 36 ++++++++++++++++++++++++++++++++++++
 static/login.html  |  7 ++++++-
 2 files changed, 42 insertions(+), 1 deletion(-)

diff --git a/src/app_helpers.py b/src/app_helpers.py
index 1b915a5a2..d3c831d47 100644
--- a/src/app_helpers.py
+++ b/src/app_helpers.py
@@ -1,5 +1,6 @@
 # src/app_helpers.py
 import base64
+import json
 import logging
 import os
 
@@ -9,6 +10,37 @@ from starlette.requests import Request
 
 logger = logging.getLogger(__name__)
 
+
+def _login_theme_json() -> str:
+    """Active profile theme as a script-safe JSON literal for the login page.
+
+    The pre-auth login page can't fetch /api/prefs/theme (401) and a fresh
+    device has nothing in localStorage, so without this it always renders the
+    built-in default. We inject the profile's active theme so login matches
+    the theme set in-app. Only a single-user instance is handled — with more
+    than one user there's no way to know whose theme to show before sign-in,
+    so we return "null" and let the client fall back to localStorage/default.
+    Returns the string "null" (a valid JS literal) on any miss or error.
+    """
+    try:
+        from src.constants import USER_PREFS_FILE
+        with open(USER_PREFS_FILE, "r", encoding="utf-8") as f:
+            users = (json.load(f) or {}).get("_users", {})
+        if len(users) != 1:
+            return "null"
+        theme = next(iter(users.values())).get("theme")
+        if not isinstance(theme, dict) or not theme.get("colors"):
+            return "null"
+        # Escape so the JSON can't break out of the surrounding <script>.
+        return (
+            json.dumps(theme)
+            .replace("<", "\\u003c")
+            .replace(">", "\\u003e")
+            .replace("&", "\\u0026")
+        )
+    except Exception:
+        return "null"
+
 def read_if_exists(path: str) -> str:
     """Read file if it exists, return empty string otherwise."""
     try:
@@ -46,6 +78,10 @@ def serve_html_with_nonce(request: Request, file_path: str) -> HTMLResponse:
         raise HTTPException(500, "Internal server error")
     nonce = getattr(request.state, "csp_nonce", "")
     html = html.replace("{{CSP_NONCE}}", nonce)
+    # Only the login page carries this placeholder; skip the prefs read for
+    # every other template (index, backgrounds) that doesn't need it.
+    if "{{LOGIN_THEME}}" in html:
+        html = html.replace("{{LOGIN_THEME}}", _login_theme_json())
     return HTMLResponse(html)
 
 
diff --git a/static/login.html b/static/login.html
index eeece7cc3..d31b0e8b8 100644
--- a/static/login.html
+++ b/static/login.html
@@ -23,7 +23,12 @@
   };
   var THEME_DEFAULT_INTENSITY = { midnight:0.5, terminal:0.8, organs:0.65 };
   try {
-    var t = JSON.parse(localStorage.getItem('odysseus-theme'));
+    // Prefer the profile's active theme injected by the server (so the login
+    // page matches the in-app theme on ANY device, even a first visit with an
+    // empty localStorage). Falls back to this device's localStorage, then to
+    // the default :root palette below. The server substitutes a theme object
+    // or the literal null in the parenthesized slot on the next line.
+    var t = ({{LOGIN_THEME}}) || JSON.parse(localStorage.getItem('odysseus-theme'));
     var s = document.documentElement.style;
     if (t && t.colors) {
       var c = t.colors;