主題顏色設定

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

🔹 1. 基本設定（主題顏色）

在 mkdocs.yml 中加入：

theme:
  name: material
  palette:
    scheme: default  # 選擇主題模式（如 "default", "slate"）
    primary: indigo  # 主要顏色
    accent: pink  # 強調色（按鈕、選中項目等）

📌 primary 是主色，影響頂部導航欄、按鈕等。
📌 accent 是強調色，影響選中的標籤、按鈕等。

🔹 2. 切換深色模式（Dark Mode）

如果要讓 使用者可以切換深色模式，可以這樣設定：

theme:
  name: material
  palette:
    - media: "(prefers-color-scheme: light)"
      scheme: default
      primary: blue
      accent: deep-orange
    - media: "(prefers-color-scheme: dark)"
      scheme: slate
      primary: deep-purple
      accent: lime

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

🔹 3. 可選的顏色

MkDocs Material 支援的 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	🌫

✅ 4. 設定自訂顏色（進階）

如果你想使用 自訂顏色（Hex 代碼），可以在 extra.css 自行定義：

1️⃣ 在 mkdocs.yml 啟用自訂 CSS

extra_css:
  - assets/custom.css

2️⃣ 在 assets/custom.css 設定顏色

:root {
    --md-primary-fg-color: #ff5722;  /* 改變主色 */
    --md-accent-fg-color: #ffc107;   /* 改變強調色 */
}

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

🚀 總結

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

這樣你就可以輕鬆調整 MkDocs Material 的主題顏色 🎨🚀！