wood/nezha-dash-v1
1
0
Fork 0
mirror of https://github.com/woodchen-ink/nezha-dash-v1.git synced 2025-07-18 09:31:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: safari dark mode flash

Browse Source
This commit is contained in:
hamster1963 2024-12-09 00:04:42 +08:00
parent 74e6e38f16
commit 2be0abcded
1 changed files with 95 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

108
index.html
View File

@ -1,14 +1,69 @@
<!doctype html> <!doctype html>
<html> <html>
<head> <head>
<meta charset="UTF-8" /> <script>
<link rel="icon" type="image/png" href="/apple-touch-icon.png" /> // 在页面渲染前就执行主题初始化
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> try {
<meta name="mobile-web-app-capable" content="yes" /> const storageKey = "vite-ui-theme";
<meta name="apple-mobile-web-app-title" content="NEZHA" /> let theme = localStorage.getItem(storageKey);
<meta name="apple-mobile-web-app-status-bar-style" content="default" /> if (theme === "system" || !theme) {
<meta name="theme-color" content="#242424" /> theme = window.matchMedia("(prefers-color-scheme: dark)").matches
<title>NEZHA</title> ? "dark"
: "light";
}
document.documentElement.classList.add(theme);
} catch (e) {
document.documentElement.classList.add("light");
}
</script>
<style>
/* Prevent FOUC in Safari */
html:not(.dark):not(.light) * {
visibility: hidden;
}
:root {
color-scheme: light;
--bg: #ffffff;
}
html.dark {
color-scheme: dark;
--bg: #242424;
}
html.light {
color-scheme: light;
--bg: #ffffff;
}
html {
background-color: var(--bg) !important;
}
body {
background-color: var(--bg) !important;
}
#root {
background-color: var(--bg) !important;
visibility: hidden;
}
#root.loaded {
visibility: visible;
animation: fadein 0.2s;
}
@keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
</style>
<script> <script>
(function () { (function () {
const storageKey = "vite-ui-theme"; const storageKey = "vite-ui-theme";
@ -19,7 +74,13 @@
const themeColor = isDark ? "#242424" : "#fafafa"; const themeColor = isDark ? "#242424" : "#fafafa";
document document
.querySelector('meta[name="theme-color"]') .querySelector('meta[name="theme-color"]')
.setAttribute("content", themeColor); ?.setAttribute("content", themeColor);
}
function setTheme(newTheme) {
root.classList.remove("light", "dark");
root.classList.add(newTheme);
updateThemeColor(newTheme === "dark");
} }
if (theme === "system") { if (theme === "system") {
@ -27,14 +88,35 @@
.matches .matches
? "dark" ? "dark"
: "light"; : "light";
root.classList.add(systemTheme); setTheme(systemTheme);
updateThemeColor(systemTheme === "dark");
window
.matchMedia("(prefers-color-scheme: dark)")
.addEventListener("change", (e) => {
setTheme(e.matches ? "dark" : "light");
});
} else { } else {
root.classList.add(theme); setTheme(theme);
updateThemeColor(theme === "dark");
} }
// Add loaded class after React has mounted
window.addEventListener("load", () => {
const root = document.getElementById("root");
if (root) {
// 使用 RAF 确保在下一帧渲染
requestAnimationFrame(() => {
requestAnimationFrame(() => {
root.classList.add("loaded");
});
});
}
});
})(); })();
</script> </script>
<meta charset="UTF-8" />
<link rel="icon" type="image/png" href="/apple-touch-icon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>NEZHA</title>
<link <link
rel="stylesheet" rel="stylesheet"
href="https://fastly.jsdelivr.net/gh/lipis/flag-icons@7.0.0/css/flag-icons.min.css" href="https://fastly.jsdelivr.net/gh/lipis/flag-icons@7.0.0/css/flag-icons.min.css"