Vue + Stylus 切换主题颜色

引言

在第一次听项目中需要切换主题的时候感觉挺好解决的，不就是切换个主题颜色吗，但是真正轮到自己上手的时候就发现无从下手，于是在网上浏览了一些前端大牛写的文章，发现现在使用Css预编译处理比较推荐我就尝试了一下，由于项目中使用的是Stylus，所以文本具体介绍使用Stylus实现主题切换，话不多说，直接开始：

准备

如果项目中没有引入Stylus，请先引入Stylus。

准备工作完成之后开始干活

主要思路是使用js控制切换data-theme的值来控制换肤
1. 新建一个styl文件themes.styl用来存放主题配置

bright = {
  name: "bright", //标识主题
  background_color_main : rgba(255, 255, 255, 0.7), // 主要背景色
  scroll_bar_bgColor : rgba(223, 223, 223, 1), // 滚动条颜色
  bgColor_001 : rgba(255,255,255,0.7), // 图表背景色
  bgColor_002 : #445DF7, //标题前缀
  bgColor_003 : #E7E8F4, //进度条背景色
  font_color_main : #323232, //主要字体颜色
  font_color_001 : #C4C4C4, //字体选中颜色
  font_color_002 : #6C6E72, //字体未选中颜色
  font_color_003 : #939393, //进度条文字
  other_color_001 : #E8E8EC, //组件横线颜色
}

dark = {
  name: "dark",
  background_color_main : rgba(5, 8, 15, 0.7),
  scroll_bar_bgColor : rgba(23,23,23,0.7),
  bgColor_001 : rgba(5,8,15,0.7),
  bgColor_002 : #445DF7,
  bgColor_003 : #171A29,
  font_color_main : #FFFFFF,
  font_color_001 : #C4C4C4, 
  font_color_002 : #6C6E72,
  font_color_003 : #FFFFFF, 
  other_color_001 : #1B1E2F,
}

themeList = (bright dark);

2. 新建一个styl文件mixin.styl用来改变主题

@import "./variable.stylus";//引入配置

//获取背景色
bg_color($color)
  //默认样式（任意选择一个主题即可注意要和下面的默认主题一致）
  background-color: bright[$color];
  
  for item in themeList
    //判断html的data-theme的属性值，{}是Stylus插值
    [data-theme = {item.name}] & {
      //这里的item可以当作一个对象，item[$color]可表示为：对象名.属性
      background-color: item[$color];
    }

//获取字体颜色
font_color($color)
  color: bright[$color];

  for item in themeList
    [data-theme = {item.name}] & {
      color: item[$color];
    }

3. 在vue页面使用

<div class="card">
  <ProgressCard :title="progressTitle" :progressAry="progressAry"></ProgressCard>
</div>

<style lang="stylus" scoped>
@import "~@/assets/stylus/mixin.styl";

.card {
  //这里传入的值为themes.styl中主题配置的属性名称
  bg_color(background_color_main)
}
</style>

4. 使用js动态切换HTML的属性data-theme的值

<div>
  <button @click="chengTheme('bright')">浅色</button>
  <button @click="chengTheme('dark')">深色</button>
</div>

//js
chengTheme(theme: string) {
  window.document.documentElement.setAttribute('data-theme', theme);
}

大功告成！（亲测有效）

最后

推荐一个非常不错的stylus中文文档

第一次写文章，如有什么不正确的欢迎各位大牛指正，一起进步！

转载请注明出处！