【转载】自定义 AstroPaper 主题配色方案

本指南介绍如何启用或禁用亮色与暗色模式，以及如何为整个站点自定义配色方案。

目录

启用/禁用亮色与暗色模式

AstroPaper 主题默认包含亮色与暗色模式。这个默认行为可以在 astro-paper.config.ts 中禁用：

export default defineAstroPaperConfig({
  // ...
  features: {
    lightAndDarkMode: true,
    // ...
  },
});astro-paper.config.ts

要禁用 亮色与暗色模式，将 features.lightAndDarkMode 设置为 false。禁用后，站点将仅使用 src/styles/theme.css 中定义的亮色配色方案。

自定义配色方案

AstroPaper 主题的亮色和暗色配色方案都定义在 src/styles/theme.css 中。

/* Light theme values */
:root,
[data-theme="light"] {
  --background: #fdfdfd;
  --foreground: #282728;
  --accent: #006cac;
  --accent-foreground: #ffffff;
  --muted: #e6e6e6;
  --muted-foreground: #6b7280;
  --border: #ece9e9;
}

/* Dark theme values */
[data-theme="dark"] {
  --background: #212737;
  --foreground: #eaedf3;
  --accent: #ff6b01;
  --accent-foreground: #ffffff;
  --muted: #343f60;
  --muted-foreground: #afb9ca;
  --border: #ab4b08;
}src/styles/theme.css

:root 和 [data-theme="light"] 选择器定义亮色配色方案，[data-theme="dark"] 定义暗色配色方案。

要自定义你自己的配色方案，在 :root, [data-theme="light"] 中指定亮色颜色，在 [data-theme="dark"] 中指定暗色颜色。

以下是每个颜色属性的详细说明：

以下是修改亮色配色方案的示例：

/* ... */
:root,
[data-theme="light"] {
  --background: #f6eee1;
  --foreground: #012c56;
  --accent: #e14a39;
  --accent-foreground: #ffffff;
  --muted: #efd8b0;
  --muted-foreground: #6b7280;
  --border: #dc9891;
}
/* ... */src/styles/theme.css

查看 AstroPaper 为你准备的预定义配色方案。