admin/vibetorrent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 6 Wiki Activity

fix(ui): ensure default theme is set correctly in incognito mode

Browse Source
This commit is contained in:
spinline
2026-02-05 00:10:14 +03:00
parent 76195584a3
commit ebd6d55468
2 changed files with 137 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
frontend/index.html
View File

@@ -1,10 +1,11 @@
<!DOCTYPE html> <!doctype html>
<html> <html>
<head>
<head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" <meta
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover" /> name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover"
/>
<title>VibeTorrent</title> <title>VibeTorrent</title>
<!-- PWA & Mobile Capable --> <!-- PWA & Mobile Capable -->
@@ -30,54 +31,70 @@
var theme = t.toLowerCase(); var theme = t.toLowerCase();
document.documentElement.setAttribute("data-theme", theme); document.documentElement.setAttribute("data-theme", theme);
if (!localTheme) { if (!localTheme) {
localStorage.setItem("vibetorrent_theme", "Dark"); localStorage.setItem("vibetorrent_theme", "dark");
} }
var meta = document.querySelector('meta[name="theme-color"]'); var meta = document.querySelector('meta[name="theme-color"]');
if (meta) { if (meta) {
var colorMap = { var colorMap = {
"light": "#ffffff", light: "#ffffff",
"cupcake": "#faf7f5", cupcake: "#faf7f5",
"bumblebee": "#ffffff", bumblebee: "#ffffff",
"emerald": "#ffffff", emerald: "#ffffff",
"corporate": "#ffffff", corporate: "#ffffff",
"synthwave": "#2d1b69", synthwave: "#2d1b69",
"retro": "#ece3ca", retro: "#ece3ca",
"cyberpunk": "#ffee00", cyberpunk: "#ffee00",
"valentine": "#f0d6e8", valentine: "#f0d6e8",
"halloween": "#212121", halloween: "#212121",
"garden": "#e9e7e7", garden: "#e9e7e7",
"forest": "#171212", forest: "#171212",
"aqua": "#345da7", aqua: "#345da7",
"lofi": "#ffffff", lofi: "#ffffff",
"pastel": "#ffffff", pastel: "#ffffff",
"fantasy": "#ffffff", fantasy: "#ffffff",
"wireframe": "#ffffff", wireframe: "#ffffff",
"black": "#000000", black: "#000000",
"luxury": "#09090b", luxury: "#09090b",
"dracula": "#282a36", dracula: "#282a36",
"cmyk": "#ffffff", cmyk: "#ffffff",
"autumn": "#8C0327", autumn: "#8C0327",
"business": "#202020", business: "#202020",
"acid": "#fafafa", acid: "#fafafa",
"lemonade": "#F1F8E8", lemonade: "#F1F8E8",
"night": "#0f1729", night: "#0f1729",
"coffee": "#20161f", coffee: "#20161f",
"winter": "#ffffff", winter: "#ffffff",
"dark": "#1d232a" dark: "#1d232a",
}; };
var color = colorMap[theme] || "#1d232a"; var color = colorMap[theme] || "#1d232a";
meta.setAttribute("content", color); meta.setAttribute("content", color);
} }
})(); })();
</script> </script>
</head> </head>
<body> <body>
<div id="app-loading" style="display: flex; justify-content: center; align-items: center; height: 100vh;">
<div <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;"> id="app-loading"
</div> style="
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
"
>
<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;
"
></div>
</div> </div>
<style> <style>
@keyframes spin { @keyframes spin {
@@ -91,18 +108,21 @@
} }
</style> </style>
<script> <script>
if ('serviceWorker' in navigator) { if ("serviceWorker" in navigator) {
window.addEventListener('load', () => { window.addEventListener("load", () => {
navigator.serviceWorker.register('/sw.js') navigator.serviceWorker
.then(registration => { .register("/sw.js")
console.log('SW registered: ', registration); .then((registration) => {
console.log("SW registered: ", registration);
}) })
.catch(registrationError => { .catch((registrationError) => {
console.log('SW registration failed: ', registrationError); console.log(
"SW registration failed: ",
registrationError,
);
}); });
}); });
} }
</script> </script>
</body> </body>
</html> </html>

19
frontend/src/components/layout/statusbar.rs
View File

@@ -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);
} }
} }
} }