跳至内容
外观模式与主题色

外观模式与主题色

控制站点的默认色彩模式与默认主题色。主题支持随系统自动切换、锁定为浅色或深色,以及设置默认强调色。

配置位置

在站点根目录的 hugo.toml(或 config.toml)中设置:

[params.theme]
  # 说明:设置首次访问时的默认模式。
  # 可选值:
  #   - 'auto'  (推荐):跟随用户系统/浏览器的明暗设置。
  #   - 'light':强制默认使用浅色模式。
  #   - 'dark' :强制默认使用深色模式。
  defaultMode = 'auto'

  # 说明:设置默认主题色,格式为 #RRGGBB。
  # 不设置时主题默认为 #1f2329。
  # 读者可通过设置面板(外观 → 主题色)覆盖。
  defaultSeed = '#1f2329'

defaultSeed 参数设置站点的 Material Design 3 强调色。仅接受 6 位十六进制颜色码;非法值将被静默忽略并回退到内置默认值。

设置面板控件

外观标签页提供:

  • 外观模式:auto / light / dark 切换
  • 主题色:17 色 Material 500 色盘,以及自定义 #RRGGBB 输入

优先级规则

  1. 用户手动选择:如果用户调整了模式或主题色,该选择会保存在浏览器的本地存储中,优先级最高。
  2. 站点配置:如果用户是首次访问,使用你在 hugo.toml 中设置的 defaultModedefaultSeed
  3. 系统默认:模式未配置时默认使用 auto;主题色未配置时默认 #1f2329
最后更新于 • alexma233