原文章：Customizing AstroPaper theme color schemes
这篇文章将解释如何为网站启用或禁用明亮和黑暗模式。此外，你还将学习如何自定义整个网站的配色方案。
Table of contents
Open Table of contents
- 启用/禁用明亮和黑暗模式
- 选择主题配色方案
- 自定义配色方案
启用/禁用明亮和黑暗模式
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: "Suggest Changes",
url: "https://github.com/satnaing/astro-paper/edit/main/",
},
dynamicOgImage: true,
lang: "en", // html语言代码。留空则默认是"en"
timezone: "Asia/Bangkok",
} as const;
src/config.ts要禁用明亮和黑暗模式，将 SITE.lightAndDarkMode 设置为 false。
选择主题配色方案
默认情况下，如果我们禁用 SITE.lightAndDarkMode，系统将只根据用户的首选配色方案来设置。
因此，要选择主要的配色方案而不是使用首选配色方案，我们需要在 toggle-theme.js 文件中的 primaryColorScheme 变量中设置配色方案。
const primaryColorScheme = ""; // "light" | "dark"
// Get theme data from local storage
const currentTheme = localStorage.getItem("theme");
// ...public/toggle-theme.jsprimaryColorScheme 变量可以有两个值："light" 或 "dark"。如果你不想指定主要配色方案，可以将其留空（默认）。
""- 系统的首选配色方案（默认）"light"- 使用明亮模式作为主要配色方案"dark"- 使用黑暗模式作为主要配色方案
为什么 'primaryColorScheme' 不在 config.ts 文件中？
为了避免页面重新加载时出现颜色闪烁，我们必须在页面加载时尽早放置切换开关的JavaScript代码。这解决了闪烁问题，但作为权衡，我们不能再使用ESM导入自定义配色方案
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"] 中指定黑暗的颜色。
以下是颜色属性的详细说明。
| 颜色属性 | 定义和用法 |
|---|---|
--background | 网站的主要颜色，通常是背景色 |
--foreground | 网站的次要颜色，通常是文本颜色 |
--accent | 网站的强调色，用于链接颜色、悬停颜色等 |
--muted | 卡片和滚动条的背景颜色，用于悬停状态等 |
--border | 边框颜色，用于边框工具和视觉分隔 |
以下是改变明亮配色方案的示例。
/* ... */
:root,
html[data-theme="light"] {
--background: #f6eee1;
--foreground: #012c56;
--accent: #e14a39;
--muted: #efd8b0;
--border: #dc9891;
}
/* ... */src/styles/global.css查看一些 预定义的配色方案 ，AstroPaper已经为你准备好了。
（完）
如果这篇文章刚好帮到了你，欢迎请我喝杯咖啡！