fix(ui): ensure default theme is set correctly in incognito mode
This commit is contained in:
spinline
@@ -1,108 +1,128 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html>
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta
|
||||||
|
name="viewport"
|
||||||
|
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover"
|
||||||
|
/>
|
||||||
|
<title>VibeTorrent</title>
|
||||||
|
|
||||||
<head>
|
<!-- PWA & Mobile Capable -->
|
||||||
<meta charset="utf-8" />
|
<meta name="mobile-web-app-capable" content="yes" />
|
||||||
<meta name="viewport"
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||||
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover" />
|
<meta name="theme-color" content="#111827" />
|
||||||
<title>VibeTorrent</title>
|
<link rel="manifest" href="manifest.json" />
|
||||||
|
<link rel="apple-touch-icon" href="icon-192.png" />
|
||||||
|
|
||||||
<!-- PWA & Mobile Capable -->
|
<!-- Trunk Assets -->
|
||||||
<meta name="mobile-web-app-capable" content="yes" />
|
<link data-trunk rel="rust" href="Cargo.toml" data-wasm-opt="0" />
|
||||||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
<link data-trunk rel="css" href="public/tailwind.css" />
|
||||||
<meta name="theme-color" content="#111827" />
|
<link data-trunk rel="copy-file" href="manifest.json" />
|
||||||
<link rel="manifest" href="manifest.json" />
|
<link data-trunk rel="copy-file" href="icon-192.png" />
|
||||||
<link rel="apple-touch-icon" href="icon-192.png" />
|
<script>
|
||||||
|
(function () {
|
||||||
|
var localTheme = localStorage.getItem("vibetorrent_theme");
|
||||||
|
var t = localTheme || "dark";
|
||||||
|
if (t === "Amoled") t = "black";
|
||||||
|
if (t === "Light") t = "light";
|
||||||
|
if (t === "Dark" || t === "Midnight") t = "dark";
|
||||||
|
|
||||||
<!-- Trunk Assets -->
|
var theme = t.toLowerCase();
|
||||||
<link data-trunk rel="rust" href="Cargo.toml" data-wasm-opt="0" />
|
document.documentElement.setAttribute("data-theme", theme);
|
||||||
<link data-trunk rel="css" href="public/tailwind.css" />
|
if (!localTheme) {
|
||||||
<link data-trunk rel="copy-file" href="manifest.json" />
|
localStorage.setItem("vibetorrent_theme", "dark");
|
||||||
<link data-trunk rel="copy-file" href="icon-192.png" />
|
}
|
||||||
<script>
|
|
||||||
(function () {
|
|
||||||
var localTheme = localStorage.getItem("vibetorrent_theme");
|
|
||||||
var t = localTheme || "dark";
|
|
||||||
if (t === "Amoled") t = "black";
|
|
||||||
if (t === "Light") t = "light";
|
|
||||||
if (t === "Dark" || t === "Midnight") t = "dark";
|
|
||||||
|
|
||||||
var theme = t.toLowerCase();
|
var meta = document.querySelector('meta[name="theme-color"]');
|
||||||
document.documentElement.setAttribute("data-theme", theme);
|
if (meta) {
|
||||||
if (!localTheme) {
|
var colorMap = {
|
||||||
localStorage.setItem("vibetorrent_theme", "Dark");
|
light: "#ffffff",
|
||||||
}
|
cupcake: "#faf7f5",
|
||||||
|
bumblebee: "#ffffff",
|
||||||
|
emerald: "#ffffff",
|
||||||
|
corporate: "#ffffff",
|
||||||
|
synthwave: "#2d1b69",
|
||||||
|
retro: "#ece3ca",
|
||||||
|
cyberpunk: "#ffee00",
|
||||||
|
valentine: "#f0d6e8",
|
||||||
|
halloween: "#212121",
|
||||||
|
garden: "#e9e7e7",
|
||||||
|
forest: "#171212",
|
||||||
|
aqua: "#345da7",
|
||||||
|
lofi: "#ffffff",
|
||||||
|
pastel: "#ffffff",
|
||||||
|
fantasy: "#ffffff",
|
||||||
|
wireframe: "#ffffff",
|
||||||
|
black: "#000000",
|
||||||
|
luxury: "#09090b",
|
||||||
|
dracula: "#282a36",
|
||||||
|
cmyk: "#ffffff",
|
||||||
|
autumn: "#8C0327",
|
||||||
|
business: "#202020",
|
||||||
|
acid: "#fafafa",
|
||||||
|
lemonade: "#F1F8E8",
|
||||||
|
night: "#0f1729",
|
||||||
|
coffee: "#20161f",
|
||||||
|
winter: "#ffffff",
|
||||||
|
dark: "#1d232a",
|
||||||
|
};
|
||||||
|
var color = colorMap[theme] || "#1d232a";
|
||||||
|
meta.setAttribute("content", color);
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
|
||||||
var meta = document.querySelector('meta[name="theme-color"]');
|
<body>
|
||||||
if (meta) {
|
<div
|
||||||
var colorMap = {
|
id="app-loading"
|
||||||
"light": "#ffffff",
|
style="
|
||||||
"cupcake": "#faf7f5",
|
display: flex;
|
||||||
"bumblebee": "#ffffff",
|
justify-content: center;
|
||||||
"emerald": "#ffffff",
|
align-items: center;
|
||||||
"corporate": "#ffffff",
|
height: 100vh;
|
||||||
"synthwave": "#2d1b69",
|
"
|
||||||
"retro": "#ece3ca",
|
>
|
||||||
"cyberpunk": "#ffee00",
|
<div
|
||||||
"valentine": "#f0d6e8",
|
style="
|
||||||
"halloween": "#212121",
|
width: 40px;
|
||||||
"garden": "#e9e7e7",
|
height: 40px;
|
||||||
"forest": "#171212",
|
border: 3px solid currentColor;
|
||||||
"aqua": "#345da7",
|
border-top-color: transparent;
|
||||||
"lofi": "#ffffff",
|
border-radius: 50%;
|
||||||
"pastel": "#ffffff",
|
animation: spin 0.8s linear infinite;
|
||||||
"fantasy": "#ffffff",
|
opacity: 0.5;
|
||||||
"wireframe": "#ffffff",
|
"
|
||||||
"black": "#000000",
|
></div>
|
||||||
"luxury": "#09090b",
|
</div>
|
||||||
"dracula": "#282a36",
|
<style>
|
||||||
"cmyk": "#ffffff",
|
@keyframes spin {
|
||||||
"autumn": "#8C0327",
|
to {
|
||||||
"business": "#202020",
|
transform: rotate(360deg);
|
||||||
"acid": "#fafafa",
|
}
|
||||||
"lemonade": "#F1F8E8",
|
}
|
||||||
"night": "#0f1729",
|
|
||||||
"coffee": "#20161f",
|
|
||||||
"winter": "#ffffff",
|
|
||||||
"dark": "#1d232a"
|
|
||||||
};
|
|
||||||
var color = colorMap[theme] || "#1d232a";
|
|
||||||
meta.setAttribute("content", color);
|
|
||||||
}
|
|
||||||
})();
|
|
||||||
</script>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
body.app-loaded #app-loading {
|
||||||
<div id="app-loading" style="display: flex; justify-content: center; align-items: center; height: 100vh;">
|
display: none !important;
|
||||||
<div
|
}
|
||||||
style="width: 40px; height: 40px; border: 3px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: spin 0.8s linear infinite; opacity: 0.5;">
|
</style>
|
||||||
</div>
|
<script>
|
||||||
</div>
|
if ("serviceWorker" in navigator) {
|
||||||
<style>
|
window.addEventListener("load", () => {
|
||||||
@keyframes spin {
|
navigator.serviceWorker
|
||||||
to {
|
.register("/sw.js")
|
||||||
transform: rotate(360deg);
|
.then((registration) => {
|
||||||
}
|
console.log("SW registered: ", registration);
|
||||||
}
|
})
|
||||||
|
.catch((registrationError) => {
|
||||||
body.app-loaded #app-loading {
|
console.log(
|
||||||
display: none !important;
|
"SW registration failed: ",
|
||||||
}
|
registrationError,
|
||||||
</style>
|
);
|
||||||
<script>
|
});
|
||||||
if ('serviceWorker' in navigator) {
|
});
|
||||||
window.addEventListener('load', () => {
|
}
|
||||||
navigator.serviceWorker.register('/sw.js')
|
</script>
|
||||||
.then(registration => {
|
</body>
|
||||||
console.log('SW registered: ', registration);
|
</html>
|
||||||
})
|
|
||||||
.catch(registrationError => {
|
|
||||||
console.log('SW registration failed: ', registrationError);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
|
|||||||
@@ -27,18 +27,31 @@ pub fn StatusBar() -> impl IntoView {
|
|||||||
let store = use_context::<crate::store::TorrentStore>().expect("store not provided");
|
let store = use_context::<crate::store::TorrentStore>().expect("store not provided");
|
||||||
let stats = store.global_stats;
|
let stats = store.global_stats;
|
||||||
|
|
||||||
let (current_theme, set_current_theme) = create_signal("light".to_string());
|
let initial_theme = if let Some(win) = web_sys::window() {
|
||||||
|
if let Some(doc) = win.document() {
|
||||||
|
doc.document_element()
|
||||||
|
.and_then(|el| el.get_attribute("data-theme"))
|
||||||
|
.unwrap_or_else(|| "dark".to_string())
|
||||||
|
} else {
|
||||||
|
"dark".to_string()
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
"dark".to_string()
|
||||||
|
};
|
||||||
|
|
||||||
|
let (current_theme, set_current_theme) = create_signal(initial_theme);
|
||||||
|
|
||||||
create_effect(move |_| {
|
create_effect(move |_| {
|
||||||
if let Some(win) = web_sys::window() {
|
if let Some(win) = web_sys::window() {
|
||||||
if let Some(storage) = win.local_storage().ok().flatten() {
|
if let Some(storage) = win.local_storage().ok().flatten() {
|
||||||
if let Ok(Some(stored_theme)) = storage.get_item("vibetorrent_theme") {
|
if let Ok(Some(stored_theme)) = storage.get_item("vibetorrent_theme") {
|
||||||
set_current_theme.set(stored_theme.clone());
|
let theme = stored_theme.to_lowercase();
|
||||||
|
set_current_theme.set(theme.clone());
|
||||||
if let Some(doc) = win.document() {
|
if let Some(doc) = win.document() {
|
||||||
let _ = doc
|
let _ = doc
|
||||||
.document_element()
|
.document_element()
|
||||||
.unwrap()
|
.unwrap()
|
||||||
.set_attribute("data-theme", &stored_theme);
|
.set_attribute("data-theme", &theme);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user