From 9f38313e59989832466075ada7a76fd8ebe7d5ee Mon Sep 17 00:00:00 2001
From: Zakaria <zbenmo1@wgu.edu>
Date: Fri, 23 Oct 2026 12:00:10 -0400
Subject: [PATCH] fix(frontend): share one theme setting between the login page
 and console

The login page stored its theme under thecloud-theme while the console read floci-theme, so a choice made at sign-in was lost. Both now use floci-theme (falling back to the old key once), and useTheme tolerates unavailable storage.
---
 packages/api/public/login.js          |  6 ++++--
 packages/frontend/src/lib/useTheme.ts | 18 +++++++++++++++---
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/packages/api/public/login.js b/packages/api/public/login.js
index 133a980..4cb190c 100644
--- a/packages/api/public/login.js
+++ b/packages/api/public/login.js
@@ -1,4 +1,6 @@
 (() => {
+    // Shared with the console (useTheme.ts, index.html) so one choice applies everywhere.
+    const THEME_KEY = 'floci-theme';
     const root = document.documentElement;
     const buttons = document.querySelectorAll('.tg button');
     const reducedMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
@@ -6,7 +8,7 @@
     function setTheme(theme) {
         root.setAttribute('data-theme', theme);
         try {
-            localStorage.setItem('thecloud-theme', theme);
+            localStorage.setItem(THEME_KEY, theme);
         } catch (ignored) {
             // Theme persistence is optional when browser storage is unavailable.
         }
@@ -15,7 +17,7 @@
 
     let initialTheme = matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
     try {
-        const savedTheme = localStorage.getItem('thecloud-theme');
+        const savedTheme = localStorage.getItem(THEME_KEY) ?? localStorage.getItem('thecloud-theme');
         if (savedTheme === 'dark' || savedTheme === 'light' || savedTheme === 'cyber') {
             initialTheme = savedTheme;
         }
diff --git a/packages/frontend/src/lib/useTheme.ts b/packages/frontend/src/lib/useTheme.ts
index c487811..a57158a 100644
--- a/packages/frontend/src/lib/useTheme.ts
+++ b/packages/frontend/src/lib/useTheme.ts
@@ -2,9 +2,17 @@ import {useEffect, useState} from 'react'
 
 export type Theme = 'dark' | 'light' | 'cyber'
 
+/** Shared with the login page (public/login.js) and index.html. */
+const THEME_KEY = 'floci-theme'
+
 function getStored(): Theme {
-    const v = localStorage.getItem('floci-theme')
-    return v === 'light' || v === 'cyber' ? v : 'dark'
+    try {
+        const v = localStorage.getItem(THEME_KEY)
+        return v === 'light' || v === 'cyber' ? v : 'dark'
+    } catch {
+        // localStorage unavailable (private mode) — fall back to the default theme.
+        return 'dark'
+    }
 }
 
 export function useTheme() {
@@ -12,7 +20,11 @@ export function useTheme() {
 
     useEffect(() => {
         document.documentElement.setAttribute('data-theme', theme)
-        localStorage.setItem('floci-theme', theme)
+        try {
+            localStorage.setItem(THEME_KEY, theme)
+        } catch {
+            // Persisting the choice is optional when storage is unavailable.
+        }
     }, [theme])
 
     return {theme, setTheme}