From 7d5c445c7228d59b933d6dde7964ec74f788a3b6 Mon Sep 17 00:00:00 2001 From: guanjihuan Date: Mon, 2 Nov 2026 17:48:52 +0800 Subject: [PATCH] update --- .gitignore | 1 + website/static/site.js | 4 +- website/static/style.css | 135 ++++++++++++++---------------------- website/templates/base.html | 6 +- 4 files changed, 59 insertions(+), 87 deletions(-) diff --git a/.gitignore b/.gitignore index e37e385..8739e5e 100644 --- a/.gitignore +++ b/.gitignore @@ -2,3 +2,4 @@ dist/ __pycache__/ *.py[cod] *.egg-info/ +build/ diff --git a/website/static/site.js b/website/static/site.js index 70cb9a8..b9a4362 100644 --- a/website/static/site.js +++ b/website/static/site.js @@ -54,7 +54,7 @@ } /* ========================================================================== - 主题切换:默认跟随系统,用户点一次就固定下来 + 主题切换:默认暗色,用户点一次就固定下来 ========================================================================== */ (function theme() { @@ -64,7 +64,7 @@ function current() { var explicit = root.getAttribute("data-theme"); if (explicit === "light" || explicit === "dark") return explicit; - return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; + return "dark"; } function apply(mode) { diff --git a/website/static/style.css b/website/static/style.css index 7a8d396..badfd36 100644 --- a/website/static/style.css +++ b/website/static/style.css @@ -1,32 +1,33 @@ /* ========================================================================== GUAN 软件包官网 —— 样式表 设计要点: - * 浅色 / 深色两套配色,跟随系统,也可手动切换(html[data-theme]) + * 深色 / 浅色两套配色:默认深色,浅色需手动切换(html[data-theme="light"]) * 版心宽屏铺满,两侧留白随视口伸缩 * 所有可交互元素都有明显的悬停与键盘焦点态 ========================================================================== */ :root { - color-scheme: light; - --bg: #f5f7f8; - --bg-grad: radial-gradient(1200px 600px at 15% -10%, #eaf2ee 0%, transparent 60%), - radial-gradient(900px 500px at 95% 0%, #eef1f7 0%, transparent 55%); - --panel: #ffffff; - --panel-2: #fafbfc; - --border: #e3e7ea; - --border-strong: #cfd6db; - --text: #16191d; - --text-soft: #3c434b; - --muted: #69727c; - --accent: #2f6f4f; - --on-accent: #ffffff; - --accent-hover: #265c41; - --accent-soft: #e7f1eb; - --accent-line: #bcd8c9; - --warn: #9a5518; - --warn-soft: #fdf0e2; - --code-bg: #f1f4f6; - --code-head: #e9edf0; + /* 默认暗色:浅色需要用户显式切换(html[data-theme="light"]) */ + color-scheme: dark; + --bg: #101315; + --bg-grad: radial-gradient(1200px 600px at 15% -10%, #16241d 0%, transparent 60%), + radial-gradient(900px 500px at 95% 0%, #17202b 0%, transparent 55%); + --panel: #191d21; + --panel-2: #1e2327; + --border: #2a3035; + --border-strong: #394147; + --text: #e7eaec; + --text-soft: #c3cad0; + --muted: #98a1ab; + --accent: #7fc9a3; + --on-accent: #0e1a14; + --accent-hover: #97d8b6; + --accent-soft: #1c2a23; + --accent-line: #35543f; + --warn: #e0a86a; + --warn-soft: #2d2318; + --code-bg: #1d2226; + --code-head: #23282d; /* ---- 字号阶梯:全站统一,字号只从这里取值 ---- */ --fs-2xs: .75rem; /* 12 徽标 / 键盘提示 */ --fs-xs: .8125rem; /* 13 小标签 / 次要说明 */ @@ -63,66 +64,38 @@ "SF Mono", Menlo, Consolas, "JetBrains Mono", "Sarasa Mono SC", "Noto Sans Mono CJK SC", "Source Code Pro", "Liberation Mono", monospace; --wrap-max: 1680px; - --shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 8px 24px rgba(16, 24, 40, .06); - --shadow-lg: 0 2px 6px rgba(16, 24, 40, .07), 0 18px 44px rgba(16, 24, 40, .10); - --focus: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); -} - -/* 深色配色:手动切换时优先,其次跟随系统 */ -@media (prefers-color-scheme: dark) { - :root:not([data-theme="light"]) { - color-scheme: dark; - --bg: #101315; - --bg-grad: radial-gradient(1200px 600px at 15% -10%, #16241d 0%, transparent 60%), - radial-gradient(900px 500px at 95% 0%, #17202b 0%, transparent 55%); - --panel: #191d21; - --panel-2: #1e2327; - --border: #2a3035; - --border-strong: #394147; - --text: #e7eaec; - --text-soft: #c3cad0; - --muted: #98a1ab; - --accent: #7fc9a3; - --on-accent: #0e1a14; - --accent-hover: #97d8b6; - --accent-soft: #1c2a23; - --accent-line: #35543f; - --warn: #e0a86a; - --warn-soft: #2d2318; - --code-bg: #1d2226; - --code-head: #23282d; - --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 24px rgba(0, 0, 0, .30); - --shadow-lg: 0 2px 8px rgba(0, 0, 0, .40), 0 18px 44px rgba(0, 0, 0, .45); - --focus: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); - } -} - -:root[data-theme="dark"] { - color-scheme: dark; - --bg: #101315; - --bg-grad: radial-gradient(1200px 600px at 15% -10%, #16241d 0%, transparent 60%), - radial-gradient(900px 500px at 95% 0%, #17202b 0%, transparent 55%); - --panel: #191d21; - --panel-2: #1e2327; - --border: #2a3035; - --border-strong: #394147; - --text: #e7eaec; - --text-soft: #c3cad0; - --muted: #98a1ab; - --accent: #7fc9a3; - --on-accent: #0e1a14; - --accent-hover: #97d8b6; - --accent-soft: #1c2a23; - --accent-line: #35543f; - --warn: #e0a86a; - --warn-soft: #2d2318; - --code-bg: #1d2226; - --code-head: #23282d; --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 24px rgba(0, 0, 0, .30); --shadow-lg: 0 2px 8px rgba(0, 0, 0, .40), 0 18px 44px rgba(0, 0, 0, .45); --focus: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); } +/* 浅色配色:只有在 html[data-theme="light"] 时才启用(默认是上面的深色) */ +:root[data-theme="light"] { + color-scheme: light; + --bg: #f5f7f8; + --bg-grad: radial-gradient(1200px 600px at 15% -10%, #eaf2ee 0%, transparent 60%), + radial-gradient(900px 500px at 95% 0%, #eef1f7 0%, transparent 55%); + --panel: #ffffff; + --panel-2: #fafbfc; + --border: #e3e7ea; + --border-strong: #cfd6db; + --text: #16191d; + --text-soft: #3c434b; + --muted: #69727c; + --accent: #2f6f4f; + --on-accent: #ffffff; + --accent-hover: #265c41; + --accent-soft: #e7f1eb; + --accent-line: #bcd8c9; + --warn: #9a5518; + --warn-soft: #fdf0e2; + --code-bg: #f1f4f6; + --code-head: #e9edf0; + --shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 8px 24px rgba(16, 24, 40, .06); + --shadow-lg: 0 2px 6px rgba(16, 24, 40, .07), 0 18px 44px rgba(16, 24, 40, .10); + --focus: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); +} + * { box-sizing: border-box; } /* 细一点的滚动条,页面更干净 */ @@ -268,14 +241,10 @@ p { text-wrap: pretty; } } .lang-switch:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); } -/* 主题切换:三个状态用 data-theme 属性控制,图标由 JS 切换 */ +/* 主题切换:默认深色,浅色时显示月亮图标,图标由 CSS 跟随 data-theme */ .theme-toggle .icon-sun { display: none; } -:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; } -:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; } -@media (prefers-color-scheme: dark) { - :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; } - :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; } -} +:root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; } +:root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; } /* 窄屏的菜单按钮(宽屏隐藏) */ .nav-toggle { diff --git a/website/templates/base.html b/website/templates/base.html index 1a15da7..fbb1aef 100644 --- a/website/templates/base.html +++ b/website/templates/base.html @@ -5,7 +5,7 @@ {{title}} - + @@ -13,11 +13,13 @@ +