style(frontend): sync remaining glass UI theme files and cyberpunk theme

This commit is contained in:
sagitchu
2026-04-21 12:40:00 +08:00
parent 29407c90b6
commit ea156c33bc
35 changed files with 2634 additions and 1555 deletions
+32 -6
View File
@@ -1,4 +1,10 @@
import { Route, Routes, useLocation, useNavigate, Navigate } from "react-router-dom";
import {
Route,
Routes,
useLocation,
useNavigate,
Navigate,
} from "react-router-dom";
import { useEffect } from "react";
import { AnimatePresence } from "framer-motion";
@@ -85,21 +91,39 @@ function App() {
useEffect(() => {
const updateBg = () => {
const customBg = siteConfig.app_bg_image;
if (customBg) {
if (customBg === "theme") {
document.documentElement.style.removeProperty("--custom-bg-image");
document.documentElement.style.removeProperty("--custom-bg-color");
document.documentElement.classList.add("has-theme-bg");
document.documentElement.classList.remove("has-custom-bg");
} else if (customBg.startsWith("http") || customBg.startsWith("data:") || customBg.startsWith("/") || customBg.startsWith("blob:")) {
document.documentElement.style.setProperty("--custom-bg-image", `url(${customBg})`);
document.documentElement.style.setProperty("--custom-bg-color", "transparent");
} else if (
customBg.startsWith("http") ||
customBg.startsWith("data:") ||
customBg.startsWith("/") ||
customBg.startsWith("blob:")
) {
document.documentElement.style.setProperty(
"--custom-bg-image",
`url(${customBg})`,
);
document.documentElement.style.setProperty(
"--custom-bg-color",
"transparent",
);
document.documentElement.classList.add("has-custom-bg");
document.documentElement.classList.remove("has-theme-bg");
} else {
// Assume solid color like "#ffffff", "white", etc.
document.documentElement.style.setProperty("--custom-bg-image", "none");
document.documentElement.style.setProperty("--custom-bg-color", customBg);
document.documentElement.style.setProperty(
"--custom-bg-image",
"none",
);
document.documentElement.style.setProperty(
"--custom-bg-color",
customBg,
);
document.documentElement.classList.add("has-custom-bg");
document.documentElement.classList.remove("has-theme-bg");
}
@@ -110,8 +134,10 @@ function App() {
document.documentElement.classList.remove("has-theme-bg");
}
};
updateBg();
window.addEventListener("site-config-updated", updateBg);
return () => {
window.removeEventListener("site-config-updated", updateBg);
};