深色模式与主题色

Mr.Hope ... Feature
大约 1 分钟

# 深色模式与主题色

# 深色模式

在深色模式下,页面会使用深色背景以保护你的眼睛。

深色模式

深色模式支持选项:

  • 'auto-switch': "关闭 | 自动 | 打开" 的三段式开关 (默认)
  • 'switch': "关闭 | 打开" 的切换式开关
  • 'auto': 自动根据用户设备主题或当前时间决定是否应用深色模式
  • 'disable': 禁用深色模式

# 主题色

这是一个开箱即用的功能,除了你的主题色之外,还提供 “红、蓝、绿、橙、紫” 五种颜色主题。

# 禁用功能

你可以将 themeConfigthemeColor 设置为 false 来禁用它。

# 自定义颜色

你需要按照 { 颜色名1: 颜色值, 颜色名2: 颜色值, ... } 的格式来配置 themeConfig.themeColor

例子




 
 
 
 
 
 


// .vuepress/config.js
module.exports = {
  themeConfig: {
    themeColor: {
      blue: "#2196f3",
      red: "#f26d6d",
      green: "#3eaf7c",
      orange: "#fb9b5f",
    },
  },
};
1
2
3
4
5
6
7
8
9
10
11

同时为了使 stylus 编译器正常工作,你还需要将颜色变量赋值给 $colorPicker 写入 .vuepress/styles/palette.styl 中:

例子
// .vuepress/styles/palette.styl
$colorPicker = {
  red: #f26d6d,
  blue: #2196f3,
  green: #3eaf7c,
  orange: #fb9b5f
}
1
2
3
4
5
6
7

# 全屏按钮

默认启用,可在主题配置中将 fullscreen 设置为 false 将其取消。

提示

如果当前浏览器不支持全屏,则全屏按钮会自动隐藏。




 



// .vuepress/config.js
module.exports = {
  themeConfig: {
    fullscreen: false, // 默认启用,设置 false 将其关闭
  },
};
1
2
3
4
5
6