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:
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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')
|
||||
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}
|
||||
|
||||
Reference in New Issue
Block a user