VUE+Stylus主题颜色换肤

项目基础背景

• vue版本2.5.2
• stylus版本0.54.5
• webpack版本3.6.0

文件配置

• 新增themes.styl主题配置文件

standard = {
  name: "standard", //标识主题
  background_color_main : #ffffff, // 主要背景色
  background_color_main_opacity : #ffffff
}
bhzq = {
  name: "bhzq",
  background_color_main : #238BCB, // 主要背景色
  background_color_main_opacity : #238BCB4d
}
themeList = (standard bhzq);

• 新增mixin.styl文件配置对应css样式

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

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

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

// 获取边框颜色
border_color($width $type $color)
  color: standard[$color];

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

• 编辑build/utils.js文件，webpack运行样式加载mixin.styl文件

const stylusOptions = {
    'resolve url': true,
     import: [path.resolve(__dirname, '../src/theme/mixin')]
}
  
return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders('sass'),
    stylus: generateLoaders('stylus', stylusOptions),
    styl: generateLoaders('stylus', stylusOptions)
}

• 对应vue页面样式调用

<style lang="stylus" rel="stylesheet/stylus">
.fontColor {
    font_color(font_color_main)
}
.bgColor {
    bg_color(background_color_main)
}
.borderColor {
	border_color(1px, solid, font_color_main)
}
</style>

• js动态改变HTML属性data-theme的值

window.document.documentElement.setAttribute('data-theme', theme)