Buriburizaemon/nezha-dash-v1
1
0
Fork 0
mirror of https://github.com/Buriburizaem0n/nezha-dash-v1.git synced 2026-09-20 18:20:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: improve theme management and styling for better user experience

Browse Source
This commit is contained in:
hamster1963
2026-06-04 11:11:49 +08:00
parent c8b7dcc8a8
commit 70532eb44d
4 changed files with 77 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ThemeProvider.tsx
+34 -21
View File
@@ -30,37 +30,50 @@ export function ThemeProvider({
useEffect(() => {
const root = window.document.documentElement;
const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
root.classList.add("disable-transitions");
root.classList.remove("light", "dark");
if (theme === "system") {
const systemTheme = window.matchMedia("(prefers-color-scheme: dark)")
.matches
? "dark"
: "light";
root.classList.add(systemTheme);
const updateThemeColor = (nextTheme: "light" | "dark") => {
const themeColor =
systemTheme === "dark" ? "hsl(30 15% 8%)" : "hsl(0 0% 98%)";
nextTheme === "dark" ? "hsl(30 15% 8%)" : "hsl(0 0% 98%)";
document
.querySelector('meta[name="theme-color"]')
?.setAttribute("content", themeColor);
const timeoutId = window.setTimeout(() => {
root.classList.remove("disable-transitions");
}, 0);
return () => window.clearTimeout(timeoutId);
};
const applyTheme = (nextTheme: "light" | "dark") => {
root.classList.remove("light", "dark");
root.classList.add(nextTheme);
root.style.colorScheme = nextTheme;
root.style.backgroundColor =
nextTheme === "dark" ? "hsl(30 15% 8%)" : "hsl(0 0% 98%)";
updateThemeColor(nextTheme);
};
root.classList.add("disable-transitions");
let cleanupMediaListener: (() => void) | undefined;
if (theme === "system") {
const applySystemTheme = () => {
applyTheme(mediaQuery.matches ? "dark" : "light");
};
applySystemTheme();
mediaQuery.addEventListener("change", applySystemTheme);
cleanupMediaListener = () =>
mediaQuery.removeEventListener("change", applySystemTheme);
} else {
applyTheme(theme);
}
root.classList.add(theme);
const themeColor = theme === "dark" ? "hsl(30 15% 8%)" : "hsl(0 0% 98%)";
document
.querySelector('meta[name="theme-color"]')
?.setAttribute("content", themeColor);
const timeoutId = window.setTimeout(() => {
root.classList.remove("disable-transitions");
}, 0);
return () => window.clearTimeout(timeoutId);
return () => {
window.clearTimeout(timeoutId);
cleanupMediaListener?.();
};
}, [theme]);
const value = {