這篇文章將解釋如何為網站啟用/禁用淺色和深色模式。此外，您還將學習如何自訂整個網站的配色方案。
目錄
啟用/禁用淺色和深色模式
AstroPaper 主題預設包含淺色和深色模式。換句話說，會有兩種配色方案，一種是淺色模式，另一種是深色模式。可以在 src/config.ts 文件的 SITE 配置對象中禁用此預設行為。
// file: src/config.ts
export const SITE = {
website: "https://astro-paper.pages.dev/",
author: "Sat Naing",
desc: "A minimal, responsive and SEO-friendly Astro blog theme.",
title: "AstroPaper",
ogImage: "astropaper-og.jpg",
lightAndDarkMode: true, // 預設為 true
postPerPage: 3,
};
要禁用 light & dark mode，將 SITE.lightAndDarkMode 設置為 false。
選擇主要配色方案
預設情況下，如果我們禁用 SITE.lightAndDarkMode，我們將僅獲得系統的 prefers-color-scheme。
因此，要選擇主要配色方案而不是 prefers-color-scheme，我們必須在 public/toggle-theme.js 中的 primaryColorScheme 變量中設置配色方案。
/* file: public/toggle-theme.js */
const primaryColorScheme = ""; // "light" | "dark"
// 從本地存儲中獲取主題數據
const currentTheme = localStorage.getItem("theme");
// 其他代碼等...
primaryColorScheme 變量可以有兩個值 "light"，"dark"。如果您不想指定主要配色方案，可以保留空字符串（預設）。
""- 系統的 prefers-color-scheme。（預設）"light"- 使用淺色模式作為主要配色方案。"dark"- 使用深色模式作為主要配色方案。
為什麼 'primaryColorScheme' 不在 config.ts 中？
為了避免頁面重新加載時的顏色閃爍，我們必須在頁面加載時盡早放置切換開關的 JavaScript 代碼。這解決了閃爍問題，但作為權衡，我們不能再使用 ESM 導入。
點擊這裡 了解更多關於 Astro 的 is:inline 腳本。
自訂配色方案
AstroPaper 主題的淺色和深色配色方案都可以自訂。您可以在 src/styles/base.css 文件中進行此操作。
/* file: src/styles/base.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root,
html[data-theme="light"] {
--color-fill: 251, 254, 251;
--color-text-base: 40, 39, 40;
--color-accent: 0, 108, 172;
--color-card: 230, 230, 230;
--color-card-muted: 205, 205, 205;
--color-border: 236, 233, 233;
}
html[data-theme="dark"] {
--color-fill: 47, 55, 65;
--color-text-base: 230, 230, 230;
--color-accent: 26, 217, 217;
--color-card: 63, 75, 90;
--color-card-muted: 89, 107, 129;
--color-border: 59, 70, 85;
}
/* 其他樣式 */
}
在 AstroPaper 主題中，:root 和 html[data-theme="light"] 選擇器用作淺色配色方案，而 html[data-theme="dark"] 用作深色配色方案。如果您想自訂您的自訂配色方案，您必須在 :root、html[data-theme="light"] 中指定您的淺色配色方案，並在 html[data-theme="dark"] 中指定您的深色配色方案。
顏色以 CSS 自訂屬性（CSS 變量）表示。顏色屬性值以 rgb 值表示。（注意：而不是 rgb(40, 39, 40)，只需指定 40, 39, 40）
以下是顏色屬性的詳細說明。
| 顏色屬性 | 定義和用法 |
|---|---|
--color-fill | 網站的主要顏色。通常是主背景。 |
--color-text-base | 網站的次要顏色。通常是文字顏色。 |
--color-accent | 網站的強調色。鏈接顏色、懸停顏色等。 |
--color-card | 卡片、滾動條和代碼背景顏色（如 this）。 |
--color-card-muted | 卡片和滾動條的懸停狀態背景顏色等。 |
--color-border | 邊框顏色。特別用於水平線（hr） |
以下是更改淺色配色方案的示例。
@layer base {
/* 龍蝦配色方案 */
:root,
html[data-theme="light"] {
--color-fill: 246, 238, 225;
--color-text-base: 1, 44, 86;
--color-accent: 225, 74, 57;
--color-card: 220, 152, 145;
--color-card-muted: 233, 119, 106;
--color-border: 220, 152, 145;
}
}
查看一些 預定義配色方案 AstroPaper 已經為您製作的。