预设配色方案

本文整理了几组 AstroPaper 可直接套用的配色。你可以把这些变量替换到 global.css，快速验证视觉方向。

目录

亮色方案

亮色方案写在 :root 与 html[data-theme=“light”]。

Lobster

:root,
html[data-theme="light"] {
  --background: #f6eee1;
  --foreground: #012c56;
  --accent: #e14a39;
  --muted: #efd8b0;
  --border: #dc9891;
}

Leaf Blue

:root,
html[data-theme="light"] {
  --background: #f2f5ec;
  --foreground: #353538;
  --accent: #1158d1;
  --muted: #bbc789;
  --border: #7cadff;
}

暗色方案

暗色方案写在 html[data-theme=“dark”]。

Deep Oyster

html[data-theme="dark"] {
  --background: #21233d;
  --foreground: #f4f7f5;
  --accent: #ff5256;
  --muted: #4a4e86;
  --border: #b12f32;
}

Astro Dark（高对比）

html[data-theme="dark"] {
  --background: #212737;
  --foreground: #eaedf3;
  --accent: #ff6b01;
  --muted: #8a3302;
  --border: #ab4b08;
}

Astro v4 Special

html[data-theme="dark"] {
  --background: #000123;
  --accent: #617bff;
  --foreground: #eaedf3;
  --muted: #0c0e4f;
  --border: #303f8a;
}

选型建议

如果你更看重中文阅读舒适度，优先保证 background 与 foreground 的对比度，再考虑 accent 的品牌风格。这样不会因为“好看”牺牲可读性。