feat(ui): implement dark/light theme switch
This commit is contained in:
kairee committed
1 parent
1b76fdeda1
commit
0b92e10317
4 files changed
+140
-31
No files matched your search
@@ -9,6 +9,7 @@
|
||||
<title>咻咻满 Reaction 看板</title>
|
||||
<link rel="icon" href="/static/favicon.svg" type="image/svg+xml">
|
||||
<link rel="stylesheet" href="/static/style.css">
|
||||
<script src="/static/theme.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="app" id="app">
|
||||
@@ -23,6 +24,7 @@
|
||||
<div class="topbar-actions">
|
||||
<a class="topbar-hint topbar-auth" href="/login" hidden>登录</a>
|
||||
<span class="topbar-links" data-topbar-links hidden></span>
|
||||
<button class="theme-toggle" type="button" data-theme-toggle aria-label="切换主题"></button>
|
||||
</div>
|
||||
</header>
|
||||
<div class="preview-banner" id="preview-banner" hidden>预览数据 · 不影响真实数据库</div>
|
||||
@@ -41,6 +43,7 @@
|
||||
<div class="topbar-actions">
|
||||
<a class="topbar-hint topbar-auth" href="/login" hidden>登录</a>
|
||||
<span class="topbar-links" data-topbar-links hidden></span>
|
||||
<button class="theme-toggle" type="button" data-theme-toggle aria-label="切换主题"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-items" id="nav-items"></div>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
color-scheme: light;
|
||||
--bg: #f7f2ea;
|
||||
--bg-deep: #efe7db;
|
||||
--surface: #fffdf9;
|
||||
@@ -29,32 +29,32 @@
|
||||
--nav-height: 64px;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--bg: #1b1411;
|
||||
--bg-deep: #140f0c;
|
||||
--surface: #221a15;
|
||||
--surface-2: #2a201a;
|
||||
--surface-3: #342820;
|
||||
--text: #f3e9dc;
|
||||
--muted: #c9b6a0;
|
||||
--faint: #9c8976;
|
||||
--border: #3a2c22;
|
||||
--grid: #3a2c22;
|
||||
--accent: #e9b97c;
|
||||
--accent-strong: #f6d9ae;
|
||||
--accent-soft: #e9b97c29;
|
||||
--accent-contrast: #2a1a10;
|
||||
--blue: #a8bccc;
|
||||
--blue-soft: #a8bccc1f;
|
||||
--pink: #e3958c;
|
||||
--warning: #e9b97c;
|
||||
--warning-soft: #e9b97c1f;
|
||||
--danger: #e3958c;
|
||||
--success: #a7b98f;
|
||||
--shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
|
||||
--shadow-float: 0 16px 40px rgba(0, 0, 0, 0.55);
|
||||
}
|
||||
/* 深色配色由 data-theme 决定；该属性在首屏绘制前由 /static/theme.js 写入。 */
|
||||
:root[data-theme="dark"] {
|
||||
color-scheme: dark;
|
||||
--bg: #1b1411;
|
||||
--bg-deep: #140f0c;
|
||||
--surface: #221a15;
|
||||
--surface-2: #2a201a;
|
||||
--surface-3: #342820;
|
||||
--text: #f3e9dc;
|
||||
--muted: #c9b6a0;
|
||||
--faint: #9c8976;
|
||||
--border: #3a2c22;
|
||||
--grid: #3a2c22;
|
||||
--accent: #e9b97c;
|
||||
--accent-strong: #f6d9ae;
|
||||
--accent-soft: #e9b97c29;
|
||||
--accent-contrast: #2a1a10;
|
||||
--blue: #a8bccc;
|
||||
--blue-soft: #a8bccc1f;
|
||||
--pink: #e3958c;
|
||||
--warning: #e9b97c;
|
||||
--warning-soft: #e9b97c1f;
|
||||
--danger: #e3958c;
|
||||
--success: #a7b98f;
|
||||
--shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
|
||||
--shadow-float: 0 16px 40px rgba(0, 0, 0, 0.55);
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
@@ -127,6 +127,25 @@ h1, h2, h3, strong, b { font-weight: 600; }
|
||||
font-size: 11px;
|
||||
}
|
||||
.topbar-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
|
||||
/* 主题切换：图标表示当前主题，提示文案说明将要切换到的主题。 */
|
||||
.theme-toggle {
|
||||
flex: 0 0 auto;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
padding: 0;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
background: var(--surface);
|
||||
color: var(--muted);
|
||||
cursor: pointer;
|
||||
}
|
||||
.theme-toggle:hover {
|
||||
color: var(--accent);
|
||||
border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
|
||||
}
|
||||
.theme-toggle svg { width: 16px; height: 16px; }
|
||||
.topbar-links { display: flex; align-items: center; gap: 6px; }
|
||||
.topbar-links a {
|
||||
padding: 4px 10px;
|
||||
@@ -167,9 +186,6 @@ h1, h2, h3, strong, b { font-weight: 600; }
|
||||
color: var(--accent-contrast);
|
||||
background: var(--accent);
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.preview-banner { color: var(--accent-contrast); background: var(--accent); }
|
||||
}
|
||||
|
||||
.main-shell {
|
||||
padding: 12px 12px calc(var(--nav-height) + 28px + env(safe-area-inset-bottom));
|
||||
|
||||
@@ -0,0 +1,90 @@
|
||||
// 主题偏好：默认跟随系统；手动切换后写入 localStorage 并固定。
|
||||
// 在 <head> 中同步执行，因此在首屏绘制前就写好了 data-theme，不会闪白或闪黑。
|
||||
// 服务端 CSP 为 script-src 'self'，不允许内联脚本，所以单独成文件。
|
||||
(function () {
|
||||
const KEY = "reaction-board:theme";
|
||||
const root = document.documentElement;
|
||||
const system = window.matchMedia("(prefers-color-scheme: dark)");
|
||||
const ICONS = {
|
||||
light:
|
||||
'<circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4' +
|
||||
'M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/>',
|
||||
dark: '<path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/>',
|
||||
};
|
||||
|
||||
function stored() {
|
||||
try {
|
||||
const value = window.localStorage.getItem(KEY);
|
||||
return value === "dark" || value === "light" ? value : null;
|
||||
} catch (error) {
|
||||
return null; // 隐私模式等禁用 localStorage 时按跟随系统处理
|
||||
}
|
||||
}
|
||||
|
||||
function resolve() {
|
||||
return stored() || (system.matches ? "dark" : "light");
|
||||
}
|
||||
|
||||
function syncMeta(theme) {
|
||||
// 无 media 的 theme-color 位于最前，优先于 index.html 里按系统匹配的两条，
|
||||
// 这样手动切换后浏览器界面颜色也会跟着变。
|
||||
const fallback = theme === "dark" ? "#1b1411" : "#f7f2ea";
|
||||
const value = getComputedStyle(root).getPropertyValue("--bg").trim() || fallback;
|
||||
let meta = document.querySelector('meta[name="theme-color"]:not([media])');
|
||||
if (!meta) {
|
||||
meta = document.createElement("meta");
|
||||
meta.name = "theme-color";
|
||||
document.head.prepend(meta);
|
||||
}
|
||||
meta.content = value;
|
||||
}
|
||||
|
||||
function syncButtons(theme) {
|
||||
const target = theme === "dark" ? "浅色" : "深色";
|
||||
document.querySelectorAll("[data-theme-toggle]").forEach((button) => {
|
||||
button.innerHTML =
|
||||
'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" ' +
|
||||
`stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${ICONS[theme]}</svg>`;
|
||||
button.setAttribute("aria-label", `切换到${target}主题`);
|
||||
button.title = `切换到${target}主题`;
|
||||
});
|
||||
}
|
||||
|
||||
function apply() {
|
||||
const theme = resolve();
|
||||
root.dataset.theme = theme;
|
||||
syncMeta(theme);
|
||||
syncButtons(theme);
|
||||
}
|
||||
|
||||
function toggle() {
|
||||
const next = resolve() === "dark" ? "light" : "dark";
|
||||
try {
|
||||
window.localStorage.setItem(KEY, next);
|
||||
} catch (error) {
|
||||
// 无法持久化时仍切换当前页面，下次进入回到跟随系统
|
||||
}
|
||||
apply();
|
||||
}
|
||||
|
||||
// 此时按钮还没解析出来，先锁定首屏配色。
|
||||
apply();
|
||||
|
||||
function bind() {
|
||||
document.querySelectorAll("[data-theme-toggle]").forEach((button) => {
|
||||
button.addEventListener("click", toggle);
|
||||
});
|
||||
apply();
|
||||
}
|
||||
|
||||
if (document.readyState === "loading") {
|
||||
document.addEventListener("DOMContentLoaded", bind, { once: true });
|
||||
} else {
|
||||
bind();
|
||||
}
|
||||
|
||||
// 未手动选择时跟随系统主题变化实时切换。
|
||||
system.addEventListener("change", () => {
|
||||
if (!stored()) apply();
|
||||
});
|
||||
})();
|
||||
Reference in new issue
Block a user