PrimeEdge 主题教程

颜色主题

配置深色模式和主题色

颜色主题

PrimeEdge 支持深色模式和自定义主题色，你可以根据喜好调整博客的整体色调。

深色模式

自动切换

主题默认跟随系统深色模式设置，无需额外配置。当系统切换到深色模式时，博客会自动适配。

手动切换

在 hugo.toml 中配置默认模式：

[params.theme]
  defaultTheme = "auto"    # 可选：auto、light、dark
  toggle = true            # 是否显示切换按钮
  • auto — 跟随系统设置
  • light — 始终使用浅色模式
  • dark — 始终使用深色模式

切换按钮

当 toggle = true 时，页面右下角会显示一个主题切换按钮，读者可以手动切换深浅模式。

自定义主题色

主色调

修改 hugo.toml：

[params.style]
  primaryColor = "#3b82f6"    # 主题主色（蓝色）

主色调会影响以下元素：

  • 链接颜色
  • 按钮背景
  • 导航栏激活状态
  • 分类标签
  • 部分图标

CSS 变量覆盖

如需更精细地控制颜色，可在 assets/css/custom.css 中覆盖 CSS 变量：

:root {
  --primary: #3b82f6;          /* 主色 */
  --primary-rgb: 59, 130, 246; /* 主色 RGB */
  --text: #1f2937;             /* 正文颜色 */
  --text2: #6b7280;            /* 次要文字 */
  --bg-card: #ffffff;          /* 卡片背景 */
  --bg-solid: #f9fafb;         /* 纯色背景 */
  --border-light: #e5e7eb;     /* 边框颜色 */
}

[data-theme="dark"] {
  --text: #f3f4f6;
  --text2: #9ca3af;
  --bg-card: #1f2937;
  --bg-solid: #111827;
  --border-light: #374151;
}

玻璃拟态效果

PrimeEdge 在部分组件上使用了玻璃拟态（Glassmorphism）效果，可以通过 CSS 调整透明度：

.glass-effect {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
}

[data-theme="dark"] .glass-effect {
  background: rgba(31, 41, 55, 0.7);
}

配色建议

常用主色参考

风格 色值 效果
科技蓝 #3b82f6 默认，通用性强
活力橙 #f97316 温暖、活泼
自然绿 #10b981 清新、舒适
优雅紫 #8b5cf6 独特、有辨识度
中国红 #ef4444 醒目、有力

选择主色时建议考虑：

  1. 与博客整体风格一致
  2. 在深浅模式下都有良好的对比度
  3. 避免过于刺眼的颜色

下一步

评论

0%