• 简体中文

      • 暗色模式

      ModernDuang 内置完整的暗色模式支持，通过 CSS 自定义属性（CSS Variables）实现平滑的主题切换。用户可在亮色/暗色之间自由切换，主题偏好会被浏览器记住。

      基本配置

      暗色模式配置在 _config.modernduang.yml 的 dark_mode 字段下：

      dark_mode:
  enable: true
  default: light
      属性类型默认值描述
      enablebooleantrue是否启用暗色模式切换按钮
      defaultstring'light'初始配色方案：'light' 或 'dark'

      切换方式

      手动切换

      当 enable: true 时，页面顶部导航栏中会显示一个主题切换按钮。点击即可在亮色与暗色模式之间切换。

      切换按钮在不同状态下显示不同图标：

      • 当前为亮色模式：显示月亮图标，提示可切换到暗色。
      • 当前为暗色模式：显示太阳图标，提示可切换到亮色。

      自动跟随系统

      若用户从未手动切换过主题（即 localStorage 中无记录），主题会尝试匹配操作系统的配色偏好（prefers-color-scheme 媒体查询）。一旦用户手动切换，则以用户选择为准。

      localStorage 持久化

      主题偏好使用 localStorage 持久化存储：

      • 键名：theme
      • 值：'light' 或 'dark'
      • 生命周期：永久保存，除非用户清除浏览器数据

      工作流程：

      1. 页面加载时，检查 localStorage 中是否有 theme 记录。
      2. 若有记录，使用该记录的值。
      3. 若无记录，使用配置中 default 的值作为初始主题。
      4. 用户每次手动切换后，立即更新 localStorage。

      CSS 变量方案

      主题的所有颜色通过 CSS 自定义属性定义在 :root（亮色）和 [data-theme="dark"]（暗色）选择器下。切换主题时只需修改 <html> 元素的 data-theme 属性，所有颜色自动响应。

      亮色模式变量（默认 :root）

      CSS 变量典型值（亮色）用途
      --bg-main#EEF2FF主背景色
      --bg-card#FFFFFF卡片背景色
      --text-primary#1E1B4B主文字色
      --text-secondary#4B5563次文字色
      --primary#4F46E5主题色
      --pastel-pink#FDBCB4粉色
      --pastel-blue#ADD8E6蓝色
      --pastel-mint#98FF98绿色
      --pastel-lilac#E6E6FA紫色

      暗色模式变量（[data-theme="dark"]）

      CSS 变量典型值（暗色）用途
      --bg-main#0f172a主背景色
      --bg-card#1e293b卡片背景色
      --text-primary#f1f5f9主文字色
      --text-secondary#cbd5e1次文字色

      过渡动画

      主题切换时使用 CSS transition 实现平滑的颜色过渡：

      * {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

      这确保了从亮色切换到暗色（或反之）时，所有元素平滑过渡而非瞬间跳变。

      覆盖 CSS 变量

      如果你需要自定义某些颜色，可以在 source/css/ 目录下创建自定义样式文件，通过 CSS 选择器覆盖变量值：

      :root {
  --primary: #e84393;
  --cta: #FF6B6B;
}

[data-theme="dark"] {
  --bg-main: #1a1a2e;
  --bg-card: #16213e;
}

      然后在主题配置中通过 inject 或在模板中引入该样式文件。

      禁用暗色模式

      若你希望博客始终以亮色模式显示，可以将 enable 设为 false：

      dark_mode:
  enable: false

      此时主题切换按钮将被隐藏，页面始终使用亮色模式。default 字段在禁用状态下无效。

      相关页面