自定义 AstroPaper 主题颜色方案

本文将解释如何启用/禁用网站的浅色与深色模式。此外，你将学习如何自定义整个网站的颜色方案。

目录

启用/禁用浅色与深色模式

AstroPaper 主题默认包含浅色和深色模式。换句话说，将有两种颜色方案——一种用于浅色模式，另一种用于深色模式。此默认行为可以在 SITE 配置对象中禁用。

export const SITE = {
  website: "https://astro-paper.pages.dev/", // 替换为你的部署域名
  author: "Sat Naing",
  profile: "https://satnaing.dev/",
  desc: "一个简约、响应式且 SEO 友好的 Astro 博客主题。",
  title: "AstroPaper",
  ogImage: "astropaper-og.jpg",
  lightAndDarkMode: true,
  postPerIndex: 4,
  postPerPage: 4,
  scheduledPostMargin: 15 * 60 * 1000, // 15 分钟
  showArchives: true,
  showBackButton: true, // 在文章详情中显示返回按钮
  editPost: {
    enabled: true,
    text: "建议修改",
    url: "https://github.com/satnaing/astro-paper/edit/main/",
  },
  dynamicOgImage: true,
  lang: "en", // html lang 代码。设为空则默认为 "en"
  timezone: "Asia/Bangkok", // 默认全局时区（IANA 格式）https://en.wikipedia.org/wiki/List_of_tz_database_time_zones
} as const;src/config.ts

要禁用浅色与深色模式，将 SITE.lightAndDarkMode 设为 false。

选择初始颜色方案

默认情况下，如果我们禁用 SITE.lightAndDarkMode，我们将只获得系统的 prefers-color-scheme。

因此，要选择初始颜色方案而不是 prefers-color-scheme，我们需要在 theme.ts 中设置 initialColorScheme 变量。

// 初始颜色方案
// 可以是 "light"、"dark" 或空字符串（使用系统 prefers-color-scheme）
const initialColorScheme = ""; // "light" | "dark"

function getPreferTheme(): string {
  // 从本地存储获取主题数据（用户的明确选择）
  const currentTheme = localStorage.getItem("theme");
  if (currentTheme) return currentTheme;

  // 如果设置了初始颜色方案，则返回（站点默认）
  if (initialColorScheme) return initialColorScheme;

  // 返回用户设备的偏好颜色方案（系统后备）
  return window.matchMedia("(prefers-color-scheme: dark)").matches
    ? "dark"
    : "light";
}

// ...src/scripts/theme.ts

initialColorScheme 变量可以接受两个值："light"、"dark"。如果你不想指定初始颜色方案，可以保留空字符串（默认值）。

• "" - 系统的 prefers-color-scheme。（默认）
• "light" - 使用浅色模式作为初始颜色方案。
• "dark" - 使用深色模式作为初始颜色方案。

自定义颜色方案

AstroPaper 主题的浅色和深色颜色方案都可以在 global.css 文件中自定义。

@import "tailwindcss";
@import "./typography.css";

@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));

:root,
html[data-theme="light"] {
  --background: #fdfdfd;
  --foreground: #282728;
  --accent: #006cac;
  --muted: #e6e6e6;
  --border: #ece9e9;
}

html[data-theme="dark"] {
  --background: #212737;
  --foreground: #eaedf3;
  --accent: #ff6b01;
  --muted: #343f60bf;
  --border: #ab4b08;
}
/* ... */src/styles/global.css

在 AstroPaper 主题中，:root 和 html[data-theme="light"] 选择器定义浅色颜色方案，而 html[data-theme="dark"] 定义深色颜色方案。

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

以下是颜色属性的详细说明。

以下是更改浅色颜色方案的示例。

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

查看 AstroPaper 已经为你制作的一些预设颜色方案。