跳至主要內容

主题颜色

五六零网校小于 1 分钟

提示

vuepress允许你自定义主题颜色,也可以在导航栏增加多颜色选项

颜色配置

你应该在 .vuepress/styles/palette.scss 中通过 $theme-color 设置站点的默认主题颜色:

全局默认颜色

定义知识库的默认颜色应该在 .vuepress/styles/palette.scss 中通过 $theme-color设置站点的默认颜色

.vuepress/styles/palette.scss 的配置示例

// 主题颜色变量
$theme-color: #27ae60; 

在导航栏增加多颜色选项

.vuepress/styles/conig.scss 中通过$theme-colors:设置站点的多颜色选项

.vuepress/styles/conig.scss 的配置示例

// 定义主题颜色列表
$theme-colors: 
  #c0392b, // 红色
  #d35400, // 橙色
  #f39c12, // 黄色
  #27ae60, // 绿色
  #16a085, // 青色
  #2980b9, // 蓝色
  #8e44ad, // 紫色
  #7f8c8d; // 灰色

效果演示

全局颜色:

导航栏颜色选项:

A
A