跳至內容
主題模式與主題顏色

主題模式與主題顏色

控制網站的預設色彩模式與預設主題種子色。主題支援跟隨系統設定、強制淺色/深色,以及設定預設強調色。

設定位置

在網站根目錄的 hugo.toml(或 config.toml)中設定:

[params.theme]
  # 注意:首次訪客的預設模式。
  # 選項:
  #   - 'auto'  (建議):跟隨系統/瀏覽器偏好。
  #   - 'light':強制淺色模式。
  #   - 'dark' :強制深色模式。
  defaultMode = 'auto'

  # 注意:預設主題種子色,格式為 #RRGGBB。
  # 若未設定,主題預設為 #1f2329。
  # 讀者可以透過設定面板覆蓋此值(外觀 → 主題顏色)。
  defaultSeed = '#1f2329'

defaultSeed 參數設定 Material Design 3 所使用的網站強調色。它接受 6 位數的十六進位顏色代碼;無效值會被靜默忽略,並回退到內建預設值。

設定面板控制項

外觀分頁提供:

  • 主題模式:自動 / 淺色 / 深色切換
  • 主題顏色:17 種 Material 500 色版,外加自訂 #RRGGBB 輸入

優先規則

  1. 使用者選擇:如果讀者在設定面板中變更模式或種子色,它會儲存在本機,並具有最高優先權。
  2. 網站設定:對於首次訪客,使用 defaultModedefaultSeed
  3. 回退:若未設定,模式預設為 auto,種子色預設為 #1f2329
最後更新於 • alexma233