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.
This commit is contained in:
Zakaria
2026-10-23 12:00:10 -04:00
parent ece36e4a34
commit 9f38313e59
2 changed files with 19 additions and 5 deletions
+4 -2
View File
@@ -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 root = document.documentElement;
const buttons = document.querySelectorAll('.tg button'); const buttons = document.querySelectorAll('.tg button');
const reducedMotion = matchMedia('(prefers-reduced-motion: reduce)').matches; const reducedMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
@@ -6,7 +8,7 @@
function setTheme(theme) { function setTheme(theme) {
root.setAttribute('data-theme', theme); root.setAttribute('data-theme', theme);
try { try {
localStorage.setItem('thecloud-theme', theme); localStorage.setItem(THEME_KEY, theme);
} catch (ignored) { } catch (ignored) {
// Theme persistence is optional when browser storage is unavailable. // Theme persistence is optional when browser storage is unavailable.
} }
@@ -15,7 +17,7 @@
let initialTheme = matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark'; let initialTheme = matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
try { try {
const savedTheme = localStorage.getItem('thecloud-theme'); const savedTheme = localStorage.getItem(THEME_KEY) ?? localStorage.getItem('thecloud-theme');
if (savedTheme === 'dark' || savedTheme === 'light' || savedTheme === 'cyber') { if (savedTheme === 'dark' || savedTheme === 'light' || savedTheme === 'cyber') {
initialTheme = savedTheme; initialTheme = savedTheme;
} }
+14 -2
View File
@@ -2,9 +2,17 @@ import {useEffect, useState} from 'react'
export type Theme = 'dark' | 'light' | 'cyber' 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 { function getStored(): Theme {
const v = localStorage.getItem('floci-theme') try {
const v = localStorage.getItem(THEME_KEY)
return v === 'light' || v === 'cyber' ? v : 'dark' return v === 'light' || v === 'cyber' ? v : 'dark'
} catch {
// localStorage unavailable (private mode) — fall back to the default theme.
return 'dark'
}
} }
export function useTheme() { export function useTheme() {
@@ -12,7 +20,11 @@ export function useTheme() {
useEffect(() => { useEffect(() => {
document.documentElement.setAttribute('data-theme', theme) 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]) }, [theme])
return {theme, setTheme} return {theme, setTheme}