主題顏色設定

在 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 = "切換淺色模式"

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

可選的顏色

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;
}

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

總結

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

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

參考資料

Colors - Zensical