跳转至

Custom primary color

1. 簡化 mkdocs.yml

首先，將 mkdocs.yml 設為中性，避免內建色彩邏輯與你的 CSS 發生「權重戰爭」。 

theme:
  name: material
  palette:
    - media: "(prefers-color-scheme: light)"
      scheme: default
      # 移除 primary 和 accent，改用 CSS 控制
    - media: "(prefers-color-scheme: dark)"
      scheme: slate
      # 移除 primary 和 accent


  # 調色板設定（支援切換深淺模式）
  palette:
    - media: "(prefers-color-scheme: light)"
      scheme: default  # 只保留底色邏輯
      toggle:
        icon: material/weather-sunny
        name: 切換到暗色模式
    - media: "(prefers-color-scheme: dark)"
      scheme: slate
      toggle:
        icon: material/weather-night
        name: 切換到淺色模式

2. 在 extra.css 中覆蓋變數

Material 主題的核心導航、連結、按鈕顏色都是由 --md-primary-fg-color 控制的。

/* 正確寫法：屬性選擇器與標籤之間沒有空格 */

/* --- 1. 定義亮色模式下的色彩 (Scheme: default) --- */
[data-md-color-scheme="default"] { 
  --md-primary-fg-color: #007f5f; 
}

/* --- 2. 定義暗色模式下的色彩 (Scheme: slate) --- */
[data-md-color-scheme="slate"] { 
  --md-primary-fg-color: #80b918; 
}

3. 快取

MkDocs 的本地開發伺服器 (mkdocs serve) 有時會因為瀏覽器快取而沒更新 CSS。

  • 請在瀏覽器按下 Ctrl + F5 (Windows)