自定义 AstroPaper 的配色方案

本文介绍 AstroPaper 的配色配置方式，包括亮暗模式开关、初始主题设置以及全局颜色变量定义。

目录

开启或关闭亮暗模式

在 src/config.ts 的 SITE 对象中，通过 lightAndDarkMode 控制是否启用亮暗模式切换。

• true：启用亮暗模式切换
• false：禁用切换，使用单一主题策略

设置初始主题

如果关闭了自动切换，你可能希望指定初始主题（light 或 dark）。

可在 src/scripts/theme.ts 中设置 initialColorScheme：

• 空字符串：跟随系统 prefers-color-scheme
• light：默认亮色
• dark：默认暗色

为什么初始主题不放在 config.ts

主题初始化必须尽早执行，以减少刷新时闪烁（FOUC）。因此主题脚本通常拆分为：

• head 内极简内联脚本：立即设置主题
• 完整脚本：后续异步加载

自定义颜色变量

在 src/styles/global.css 中可定义两套颜色：

• :root 与 html[data-theme=“light”]：亮色方案
• html[data-theme=“dark”]：暗色方案

核心变量如下：

• —background：背景色
• —foreground：正文色
• —accent：强调色（链接、按钮状态）
• —muted：弱化背景色
• —border：边框分隔色

示例

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

实践建议

先确定品牌主色，再扩展亮暗两套变量；优先保证正文与背景对比度，最后再调整强调色，以获得稳定的可读性与统一视觉。