Fix theme flash on navigation
Persist last applied theme in session storage to avoid light-mode flash and toggle flicker when navigating between pages (notably player.html). Also revert README preview back to preview.png for now.
This commit is contained in:
@@ -5,7 +5,7 @@ Little nodejs + mongodb app that I hack together with ChatGPT and Cursor to keep
|
|||||||
|
|
||||||
**Disclaimer:** This was a fun, experimental project built with “AI slop” (Cursor), so it may have security issues. For example, `python_video_server` uses the default token‑in‑URL approach to serve video files, which can leave user tokens in logs or browser history. There are ways to improve this, but at this point I’m blinder than Ray Charles.
|
**Disclaimer:** This was a fun, experimental project built with “AI slop” (Cursor), so it may have security issues. For example, `python_video_server` uses the default token‑in‑URL approach to serve video files, which can leave user tokens in logs or browser history. There are ways to improve this, but at this point I’m blinder than Ray Charles.
|
||||||
|
|
||||||

|

|
||||||
|
|
||||||
## Features
|
## Features
|
||||||
|
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 446 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 524 KiB |
+18
-2
@@ -1,6 +1,7 @@
|
|||||||
// Theme toggle with system preference fallback.
|
// Theme toggle with system preference fallback.
|
||||||
(function () {
|
(function () {
|
||||||
const STORAGE_KEY = 'theme_preference';
|
const STORAGE_KEY = 'theme_preference';
|
||||||
|
const LAST_KEY = 'theme_last_applied';
|
||||||
const THEME_ATTR = 'data-theme';
|
const THEME_ATTR = 'data-theme';
|
||||||
const SOURCE_ATTR = 'data-theme-source';
|
const SOURCE_ATTR = 'data-theme-source';
|
||||||
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
|
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
|
||||||
@@ -17,6 +18,11 @@
|
|||||||
function setTheme(theme, source) {
|
function setTheme(theme, source) {
|
||||||
document.documentElement.setAttribute(THEME_ATTR, theme);
|
document.documentElement.setAttribute(THEME_ATTR, theme);
|
||||||
document.documentElement.setAttribute(SOURCE_ATTR, source);
|
document.documentElement.setAttribute(SOURCE_ATTR, source);
|
||||||
|
try {
|
||||||
|
sessionStorage.setItem(LAST_KEY, theme);
|
||||||
|
} catch (_) {
|
||||||
|
// Ignore storage errors.
|
||||||
|
}
|
||||||
updateToggleUi(theme, source);
|
updateToggleUi(theme, source);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -56,12 +62,16 @@
|
|||||||
if (!res.ok) return;
|
if (!res.ok) return;
|
||||||
const data = await res.json();
|
const data = await res.json();
|
||||||
const pref = normalizeTheme(data?.themePreference);
|
const pref = normalizeTheme(data?.themePreference);
|
||||||
|
const currentPref = normalizeTheme(localStorage.getItem(STORAGE_KEY));
|
||||||
|
const changed = pref !== currentPref;
|
||||||
|
if (changed) {
|
||||||
if (pref) {
|
if (pref) {
|
||||||
localStorage.setItem(STORAGE_KEY, pref);
|
localStorage.setItem(STORAGE_KEY, pref);
|
||||||
} else {
|
} else {
|
||||||
localStorage.removeItem(STORAGE_KEY);
|
localStorage.removeItem(STORAGE_KEY);
|
||||||
}
|
}
|
||||||
applyStoredOrSystem();
|
applyStoredOrSystem();
|
||||||
|
}
|
||||||
} catch (_) {
|
} catch (_) {
|
||||||
// Ignore fetch errors.
|
// Ignore fetch errors.
|
||||||
}
|
}
|
||||||
@@ -69,8 +79,14 @@
|
|||||||
|
|
||||||
function applyStoredOrSystem() {
|
function applyStoredOrSystem() {
|
||||||
const stored = normalizeTheme(localStorage.getItem(STORAGE_KEY));
|
const stored = normalizeTheme(localStorage.getItem(STORAGE_KEY));
|
||||||
const theme = stored || getSystemTheme();
|
let last = null;
|
||||||
const source = stored ? 'user' : 'system';
|
try {
|
||||||
|
last = normalizeTheme(sessionStorage.getItem(LAST_KEY));
|
||||||
|
} catch (_) {
|
||||||
|
last = null;
|
||||||
|
}
|
||||||
|
const theme = stored || last || getSystemTheme();
|
||||||
|
const source = stored ? 'user' : (last ? 'session' : 'system');
|
||||||
setTheme(theme, source);
|
setTheme(theme, source);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user