freefire/jiang13-forum
2
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 4 Wiki Activity

feat: 浅色/暗色主题并支持跟随系统

Browse Source 
顶栏循环切换，localStorage 记忆；head 内联脚本避免首屏闪烁。

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
姜十三
2026-08-30 04:54:15 +08:00
parent 1f777eebb1
commit 4a21d362d0
9 changed files with 353 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
web_src/css/site.css
View File

@@ -1,13 +1,66 @@
/* 姜十三论坛 SSR 骨架样式（web_src → public/assets） */
:root {
color-scheme: light;
--j13-bg: #f6f4ef;
--j13-surface: #fffdf8;
--j13-text: #1c1917;
--j13-muted: #78716c;
--j13-accent: #0f766e;
--j13-on-accent: #fff;
--j13-border: #e7e5e4;
--j13-radius: 8px;
--j13-font: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
--j13-danger: #b91c1c;
--j13-ok-bg: #ecfdf5;
--j13-ok-fg: #065f46;
--j13-warn-bg: #fff7ed;
--j13-warn-fg: #9a3412;
--j13-warn-border: #fed7aa;
--j13-err-bg: #fef2f2;
--j13-err-fg: #991b1b;
--j13-err-border: #fecaca;
--j13-pin-bg: #fef3c7;
--j13-pin-fg: #92400e;
--j13-feat-bg: #ede9fe;
--j13-feat-fg: #5b21b6;
--j13-neutral-bg: #f8fafc;
--j13-neutral-fg: #475569;
--j13-self-bg: #eff6ff;
--j13-self-border: #bfdbfe;
--j13-delta-pos: #15803d;
--j13-delta-neg: #b91c1c;
--j13-overlay: rgba(255, 255, 255, 0.85);
}
html[data-theme="dark"] {
color-scheme: dark;
--j13-bg: #1c1917;
--j13-surface: #292524;
--j13-text: #f5f5f4;
--j13-muted: #a8a29e;
--j13-accent: #2dd4bf;
--j13-on-accent: #134e4a;
--j13-border: #44403c;
--j13-danger: #f87171;
--j13-ok-bg: #064e3b;
--j13-ok-fg: #a7f3d0;
--j13-warn-bg: #7c2d12;
--j13-warn-fg: #fed7aa;
--j13-warn-border: #9a3412;
--j13-err-bg: #7f1d1d;
--j13-err-fg: #fecaca;
--j13-err-border: #991b1b;
--j13-pin-bg: #78350f;
--j13-pin-fg: #fde68a;
--j13-feat-bg: #4c1d95;
--j13-feat-fg: #ddd6fe;
--j13-neutral-bg: #334155;
--j13-neutral-fg: #e2e8f0;
--j13-self-bg: #1e3a5f;
--j13-self-border: #1d4ed8;
--j13-delta-pos: #4ade80;
--j13-delta-neg: #f87171;
--j13-overlay: rgba(28, 25, 23, 0.85);
}
* { box-sizing: border-box; }
@@ -62,9 +115,25 @@ body.j13-body {
.j13-brand__text { display: flex; flex-direction: column; }
.j13-brand__text strong { font-size: 1rem; }
.j13-brand__slogan { font-size: 0.75rem; color: var(--j13-muted); }
.j13-nav { display: flex; gap: 0.85rem; flex-wrap: wrap; }
.j13-nav { display: flex; gap: 0.85rem; flex-wrap: wrap; align-items: center; }
.j13-nav a { color: var(--j13-accent); text-decoration: none; font-size: 0.9rem; }
.j13-nav a:hover { text-decoration: underline; }
.j13-theme-toggle {
appearance: none;
border: 1px solid var(--j13-border);
background: var(--j13-surface);
color: var(--j13-muted);
border-radius: var(--j13-radius);
padding: 0.2rem 0.55rem;
font: inherit;
font-size: 0.8rem;
cursor: pointer;
line-height: 1.3;
}
.j13-theme-toggle:hover {
color: var(--j13-accent);
border-color: var(--j13-accent);
}
.j13-layout {
max-width: 1200px;
@@ -270,7 +339,7 @@ body.j13-body {
}
.j13-search__err {
margin: 0.5rem 0 0;
color: #b91c1c;
color: var(--j13-danger);
font-size: 0.875rem;
}
@@ -297,15 +366,15 @@ body.j13-body {
align-items: center;
}
.j13-tag {
background: #ecfdf5;
background: var(--j13-ok-bg);
color: var(--j13-accent);
padding: 0.1rem 0.4rem;
border-radius: 4px;
font-size: 0.75rem;
}
.j13-tag--pin { background: #fef3c7; color: #92400e; }
.j13-tag--pending { background: #fff7ed; color: #9a3412; }
.j13-tag--rejected { background: #fef2f2; color: #991b1b; }
.j13-tag--pin { background: var(--j13-pin-bg); color: var(--j13-pin-fg); }
.j13-tag--pending { background: var(--j13-warn-bg); color: var(--j13-warn-fg); }
.j13-tag--rejected { background: var(--j13-err-bg); color: var(--j13-err-fg); }
.j13-mod-banner {
margin: 0.5rem 0 0.75rem;
padding: 0.65rem 0.85rem;
@@ -314,18 +383,18 @@ body.j13-body {
line-height: 1.4;
}
.j13-mod-banner--pending {
background: #fff7ed;
color: #9a3412;
border: 1px solid #fed7aa;
background: var(--j13-warn-bg);
color: var(--j13-warn-fg);
border: 1px solid var(--j13-warn-border);
}
.j13-mod-banner--rejected {
background: #fef2f2;
color: #991b1b;
border: 1px solid #fecaca;
background: var(--j13-err-bg);
color: var(--j13-err-fg);
border: 1px solid var(--j13-err-border);
}
.j13-tag--feat { background: #ede9fe; color: #5b21b6; }
.j13-tag--resolved { background: #ecfdf5; color: #065f46; }
.j13-tag--unresolved { background: #f8fafc; color: #475569; }
.j13-tag--feat { background: var(--j13-feat-bg); color: var(--j13-feat-fg); }
.j13-tag--resolved { background: var(--j13-ok-bg); color: var(--j13-ok-fg); }
.j13-tag--unresolved { background: var(--j13-neutral-bg); color: var(--j13-neutral-fg); }
.j13-empty { color: var(--j13-muted); }
.j13-pager {
@@ -351,8 +420,8 @@ body.j13-body {
padding: 0.65rem 1rem;
border-radius: var(--j13-radius);
}
.j13-flash { background: #ecfdf5; color: #065f46; }
.j13-alert--error { background: #fef2f2; color: #991b1b; }
.j13-flash { background: var(--j13-ok-bg); color: var(--j13-ok-fg); }
.j13-alert--error { background: var(--j13-err-bg); color: var(--j13-err-fg); }
.j13-main--solo {
max-width: 480px;
@@ -372,6 +441,8 @@ body.j13-body {
border: 1px solid var(--j13-border);
border-radius: var(--j13-radius);
font: inherit;
background: var(--j13-surface);
color: var(--j13-text);
}
.j13-form button, .j13-post__actions button, .j13-comment-form button {
margin-top: 0.5rem;
@@ -379,7 +450,7 @@ body.j13-body {
border: 0;
border-radius: var(--j13-radius);
background: var(--j13-accent);
color: #fff;
color: var(--j13-on-accent);
cursor: pointer;
font: inherit;
}
@@ -478,7 +549,8 @@ body.j13-body {
border: 1px solid var(--j13-border);
border-radius: var(--j13-radius);
font: inherit;
background: #fff;
background: var(--j13-surface);
color: var(--j13-text);
}
.j13-form__row {
display: flex;
@@ -770,8 +842,8 @@ body.j13-body {
vertical-align: top;
}
.j13-profile__ledger th { color: var(--j13-muted); font-weight: 600; }
.j13-delta--pos { color: #15803d; }
.j13-delta--neg { color: #b91c1c; }
.j13-delta--pos { color: var(--j13-delta-pos); }
.j13-delta--neg { color: var(--j13-delta-neg); }
.j13-btn {
display: inline-block;
padding: 0.35rem 0.85rem;
@@ -862,8 +934,8 @@ body.j13-body {
}
.j13-msg-bubble.is-self {
align-self: flex-end;
background: #eff6ff;
border-color: #bfdbfe;
background: var(--j13-self-bg);
border-color: var(--j13-self-border);
}
.j13-msg-bubble.is-system { max-width: 100%; }
.j13-msg-bubble__subj { font-weight: 600; margin-bottom: 0.25rem; }
@@ -980,7 +1052,7 @@ points-only[data-locked="false"] {
height: 48px;
object-fit: contain;
border-radius: 6px;
background: #fff;
background: var(--j13-surface);
}
.j13-links__logo--sm {
width: 24px;
@@ -1211,7 +1283,7 @@ points-only[data-locked="false"] {
top: 0.4rem;
left: 0.4rem;
z-index: 1;
background: rgba(255,255,255,0.85);
background: var(--j13-overlay);
border-radius: 3px;
padding: 0.1rem 0.2rem;
}