主題顏色設定

在 Zensical 中，你可以透過 zensical.toml 設定 主題顏色，這可以改變網站的 主要 UI 配色（如頂部導航欄、按鈕、連結）。

基本設定（主題顏色）

Zensical 有兩種配色方案：淺色 default、深色 slate。

[project.theme.palette]
scheme = "default"
primary = "indigo"
accent = "pink"

📌 primary 是主色，影響文字連結；在 classic 主題也會影響頂部導航欄、側邊欄。
📌 accent 是強調色，影響滑過的連結、按鈕、捲軸等。

讓使用者切換深色模式

如果要讓 使用者可以切換深色模式，把 palette 改成陣列：

[[project.theme.palette]]
scheme = "default"
toggle.icon = "lucide/sun"
toggle.name = "切換深色模式"

[[project.theme.palette]]
scheme = "slate"
toggle.icon = "lucide/moon"
toggle.name = "切換淺色模式"

也可以依系統偏好自動選擇：

[[project.theme.palette]]
media = "(prefers-color-scheme: light)"
scheme = "default"
primary = "blue"
accent = "deep-orange"
toggle.icon = "lucide/sun"
toggle.name = "切換深色模式"

[[project.theme.palette]]
media = "(prefers-color-scheme: dark)"
scheme = "slate"
primary = "deep-purple"
accent = "lime"
toggle.icon = "lucide/moon"
toggle.name = "切換淺色模式"

📌 這樣會根據使用者的系統設定（淺色或深色）自動切換顏色！

自動模式（跟隨系統）

如果想讓讀者可以選擇「自動（跟隨作業系統）」，再多加一組只有 media = "(prefers-color-scheme)" 的設定，變成三段式切換：

# 自動模式
[[project.theme.palette]]
media = "(prefers-color-scheme)"
toggle.icon = "lucide/sun-moon"
toggle.name = "切換到淺色模式"

# 淺色模式
[[project.theme.palette]]
media = "(prefers-color-scheme: light)"
scheme = "default"
toggle.icon = "lucide/sun"
toggle.name = "切換到深色模式"

# 深色模式
[[project.theme.palette]]
media = "(prefers-color-scheme: dark)"
scheme = "slate"
toggle.icon = "lucide/moon"
toggle.name = "切換到系統偏好"

使用者第一次造訪時，會依序判斷各組的 media，第一個符合的就是預設。之後即使不重新整理，只要作業系統切換淺色／深色，網站也會跟著改變。

可選的顏色

Zensical 支援的 primary & accent 顏色：

顏色名稱	示例
`red`	🔴
`pink`	🌸
`purple`	🟣
`deep-purple`	🟪
`indigo`	🔵
`blue`	🟦
`light-blue`	🔷
`cyan`	🌊
`teal`	🦚
`green`	🟢
`light-green`	🍏
`lime`	🟡
`yellow`	🟨
`amber`	🟠
`orange`	🧡
`deep-orange`	🟧
`brown`	🟤
`grey`	⚪
`blue-grey`	🌫

設定自訂顏色（進階）

如果你想使用 自訂顏色（Hex 代碼），先把 primary 設成 custom，再在 extra.css 定義：

1️⃣ 在 zensical.toml 啟用自訂 CSS

[project.theme.palette]
primary = "custom"

[project]
extra_css = [
  "css/extra.css",
]

2️⃣ 在 docs/css/extra.css 設定顏色

:root > * {
    --md-primary-fg-color:        #ff5722;
    --md-primary-fg-color--light:  #ffccbc;
    --md-primary-fg-color--dark:  #e64a19;
    --md-accent-fg-color:         #ffc107;
}

📌 這樣就可以使用自訂顏色了！

自訂配色名稱與 slate 的色相

除了覆寫單一顏色，也可以把整組顏色包在 [data-md-color-scheme="..."] 選擇器裡，取一個自己的配色名稱，再用 scheme 指定：

[data-md-color-scheme="youtube"] {
  --md-primary-fg-color:        #EE0F0F;
  --md-primary-fg-color--light: #ECB7B7;
  --md-primary-fg-color--dark:  #90030C;
}

[project.theme.palette]
scheme = "youtube"

深色的 slate 配色是用 hsla 由 --md-hue 推導出來的，所以只要改色相（0～360）就能調整整體色調：

[data-md-color-scheme="slate"] {
  --md-hue: 210;
}

總結

設定	方法
改變主題顏色	`primary = "indigo"`，`accent = "pink"`
支援深色模式	`scheme = "default"` / `"slate"`
讓網站自動切換主題	`media = "(prefers-color-scheme: dark)"`
使用自訂顏色	`primary = "custom"` + `--md-primary-fg-color`

這樣你就可以輕鬆調整 Zensical 的主題顏色！

參考資料

Colors - Zensical