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