mikkel/nexus
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(07-01): update index.html flash-prevention script for three themes

Browse source 
- Update theme-color meta tag default from #18181b to #1e1e2e (Catppuccin Mocha)
- Replace binary dark/light script with three-theme handler
- Toggles .dark and .theme-tokyo-night classes before React mounts
- Falls back to catppuccin-mocha for unknown/old localStorage values
- Removes old #18181b hardcoded color constant
This commit is contained in:
Mikkel Georgsen 2026-03-31 14:16:03 +02:00 • committed by Nexus Dev
parent d9d86e29dd
commit 2866522c2b
1 changed files with 9 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
ui/index.html
View file

@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
<meta name="theme-color" content="#18181b" />
<meta name="theme-color" content="#1e1e2e" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
@ -22,17 +22,18 @@
<script>
(() => {
const key = "paperclip.theme";
const darkThemeColor = "#18181b";
const lightThemeColor = "#ffffff";
const VALID = ["catppuccin-mocha", "tokyo-night", "catppuccin-latte"];
try {
const stored = window.localStorage.getItem(key);
const theme = stored === "light" || stored === "dark" ? stored : "dark";
const isDark = theme === "dark";
const theme = VALID.includes(stored) ? stored : "catppuccin-mocha";
const isDark = theme !== "catppuccin-latte";
document.documentElement.classList.toggle("dark", isDark);
document.documentElement.classList.toggle("theme-tokyo-night", theme === "tokyo-night");
document.documentElement.style.colorScheme = isDark ? "dark" : "light";
const themeColorMeta = document.querySelector('meta[name="theme-color"]');
if (themeColorMeta) {
themeColorMeta.setAttribute("content", isDark ? darkThemeColor : lightThemeColor);
const meta = document.querySelector('meta[name="theme-color"]');
if (meta) {
const bg = { "catppuccin-mocha": "#1e1e2e", "tokyo-night": "#1a1b26", "catppuccin-latte": "#eff1f5" };
meta.setAttribute("content", bg[theme] || "#1e1e2e");
}
} catch {
document.documentElement.classList.add("dark");