暗色模式适配

主题从 1.2.0 之后，适配系统的暗色主题模式，如果你有一些关于本主题的插件或者自定义的组件的话，你需要对暗色模式进行适配。

初始化 1.3.0+

暗色模式默认开启，为 auto 模式，显示模式调节按钮，你也可以自定义初始化配置：

// .vuepress/config.js
module.exports = {
  theme: 'reco',
  themeConfig: {
    mode: 'dark', // 默认 auto，auto 跟随系统，dark 暗色模式，light 亮色模式
    modePicker: false // 默认 true，false 不显示模式调节按钮，true 则显示
  }
}  

颜色变量

这里是主题提供的颜色变量，请根据自己的需求选择相应的颜色变量，替换你的组件里的颜色值：

变量	亮色模式	暗色模式
--default-color-10	rgba(0, 0, 0, 1)	rgba(255, 255, 255, 1)
--default-color-9	rgba(0, 0, 0, .9)	rgba(255, 255, 255, .9)
--default-color-8	rgba(0, 0, 0, .8)	rgba(255, 255, 255, .8)
--default-color-7	rgba(0, 0, 0, .7)	rgba(255, 255, 255, .7)
--default-color-6	rgba(0, 0, 0, .6)	rgba(255, 255, 255, .6)
--default-color-5	rgba(0, 0, 0, .5)	rgba(255, 255, 255, .5)
--default-color-4	rgba(0, 0, 0, .4)	rgba(255, 255, 255, .4)
--default-color-3	rgba(0, 0, 0, .3)	rgba(255, 255, 255, .3)
--default-color-2	rgba(0, 0, 0, .2)	rgba(255, 255, 255, .2)
--default-color-1	rgba(0, 0, 0, .1)	rgba(255, 255, 255, .1)
--background-color	#fff	#25272a
--box-shadow	0 1px 6px 0 rgba(0, 0, 0, 0.2)	0 1px 6px 0 rgba(0, 0, 0, .9)
--text-color	#2c3e50	#aaa
--border-color	#eaecef	rgba(0, 0, 0, .3)
--code-color	rgba(27, 31, 35, 0.05)	rgba(0, 0, 0, .3)
--mask-color	#888	#000

适配方法

.title {
  color: var(--text-color)
}