feat(theme): 全站配色迁移到 Catppuccin(Latte/Mocha)

亮色 Latte、暗色 Mocha。语义 token 重新映射:
- theme/entry 背景用 base/mantle
- primary/secondary/content 文字用 text/subtext1/subtext0
- tertiary 占位符用 overlay0
- code-block/code-bg 用 crust/surface0
- border 用 surface1
- 主强调 accent 改 Green(#40a02b / #a6e3a1)
- 次强调 accent-2 改 Teal(#179299 / #94e2d5)

同步修正组件层硬编码字面量:
- md-content 链接 hover 改用 accent-2(Teal)
- copy-code 按钮用 paper-tertiary/paper-theme/accent 语义色
- blur-img 灰底去掉 fallback,直接用 paper-code-bg 变量

破坏性变更,不兼容旧色。
This commit is contained in:
xfy 2026-07-03 14:11:07 +08:00
parent cb77d28a68
commit 385fb43516

View File

@ -5,19 +5,23 @@
@theme { @theme {
--font-serif: 'Source Serif 4', 'Noto Serif SC', 'Source Han Serif SC', 'Songti SC', Georgia, serif; --font-serif: 'Source Serif 4', 'Noto Serif SC', 'Source Han Serif SC', 'Songti SC', Georgia, serif;
--color-paper-theme: #faf9f6; /* Catppuccin Latte亮色语义 token 调色板角色
--color-paper-entry: #ffffff; theme=base entry=mantle primary=text secondary=subtext1
--color-paper-primary: #1c1917; tertiary=overlay0 content=subtext0 code-block=crust code-bg=surface0
--color-paper-secondary: #78716c; border=surface1 accent=green accent-2=teal/次强调色 */
--color-paper-tertiary: #d6d3d1; --color-paper-theme: #eff1f5;
--color-paper-content: #292524; --color-paper-entry: #e6e9ef;
--color-paper-code-block: #eff1f5; --color-paper-primary: #4c4f69;
--color-paper-code-bg: #f5f4f0; --color-paper-secondary: #5c5f77;
--color-paper-border: #e7e5e0; --color-paper-tertiary: #9ca0b0;
--color-paper-accent: #5c7a5e; --color-paper-content: #6c6f85;
--color-paper-accent-soft: #e8f0e8; --color-paper-code-block: #dce0e8;
--color-paper-accent-2: #83495b; --color-paper-code-bg: #ccd0da;
--color-paper-accent-2-soft: #f3e8eb; --color-paper-border: #bcc0cc;
--color-paper-accent: #40a02b;
--color-paper-accent-soft: #ccd0da;
--color-paper-accent-2: #179299;
--color-paper-accent-2-soft: #ccd0da;
--radius-paper: 8px; --radius-paper: 8px;
--gap-paper: 24px; --gap-paper: 24px;
@ -41,19 +45,21 @@
} }
.dark { .dark {
--color-paper-theme: #141416; /* Catppuccin Mocha暗色accent-soft 带绿调accent-2-soft teal
--color-paper-entry: #1e1f22; surface0 暗底上透出微弱主/次强调色 */
--color-paper-primary: #e7e5df; --color-paper-theme: #1e1e2e;
--color-paper-secondary: #8c8981; --color-paper-entry: #181825;
--color-paper-tertiary: #3a3a3d; --color-paper-primary: #cdd6f4;
--color-paper-content: #d4d2cc; --color-paper-secondary: #bac2de;
--color-paper-code-block: #1e1e2e; --color-paper-tertiary: #6c7086;
--color-paper-code-bg: #28292d; --color-paper-content: #a6adc8;
--color-paper-border: #2a2b2e; --color-paper-code-block: #313244;
--color-paper-accent: #7da97f; --color-paper-code-bg: #313244;
--color-paper-accent-soft: #1e2e1e; --color-paper-border: #45475a;
--color-paper-accent-2: #cca4b0; --color-paper-accent: #a6e3a1;
--color-paper-accent-2-soft: #331f25; --color-paper-accent-soft: #1e2e22;
--color-paper-accent-2: #94e2d5;
--color-paper-accent-2-soft: #1e2a28;
} }
} }
@ -263,7 +269,7 @@
} }
.md-content a:not(.anchor):hover { .md-content a:not(.anchor):hover {
color: #4a6249; color: var(--color-paper-accent-2);
} }
.md-content p { .md-content p {
@ -421,8 +427,8 @@
position: absolute; position: absolute;
top: 8px; top: 8px;
right: 8px; right: 8px;
color: rgba(255, 255, 255, 0.8); color: var(--color-paper-theme);
background: rgba(78, 78, 78, 0.8); background: var(--color-paper-tertiary);
border-radius: var(--radius-paper); border-radius: var(--radius-paper);
padding: 4px 8px; padding: 4px 8px;
font-size: 12px; font-size: 12px;
@ -434,7 +440,7 @@
} }
.copy-code:hover { .copy-code:hover {
background: rgba(92, 122, 94, 0.9); background: var(--color-paper-accent);
} }
pre:hover .copy-code, pre:hover .copy-code,
@ -620,7 +626,7 @@
overflow: hidden; overflow: hidden;
aspect-ratio: var(--ar); aspect-ratio: var(--ar);
/* 加载中灰底(占位图未加载完时) */ /* 加载中灰底(占位图未加载完时) */
background: var(--color-paper-code-bg, #f5f5f5); background: var(--color-paper-code-bg);
border-radius: 6px; border-radius: 6px;
margin: 1em 0; margin: 1em 0;
} }