vue主题换肤

方案一

写好的不同样式文件，通过import动态导入css文件。

<template>
  <div class="main">
    <div ref="title" class="title">当前主题色：{{theme}}</div>
    <el-button type="primary" size="small" @click="loadStylesheet('blue')">蓝色</el-button>
    <el-button type="danger" size="small" @click="loadStylesheet('red')">红色</el-button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      theme: ''
    }
  },
  mounted() {
    this.loadStylesheet('blue')
  },
  methods: {
    async loadStylesheet(color) {
    this.theme = color
      const { default: styles } = await import(`@/assets/css/theme/${color}.scss`);
      console.log('styles',styles)
      const styleElement = document.createElement('style');
      styleElement.textContent = styles;
      document.head.appendChild(styleElement);
    }
  },
}
</script>
<style lang="scss" scoped>
</style>

方案二

根据不同的样式名写不同的样式。
1.新建两个主题scss文件，配置颜色变量。

//  @/assets/css/theme/blue.scss
$theme: "blue";
$textColor: #ffffff;
$bgColor: #3a5b79;

//  @/assets/css/theme/red.scss
$theme: "red";
$textColor: #b92807;
$bgColor: #f2d6d4;

2.新建页面样式文件，使用定义的颜色变量。

// @/assets/css/page.scss
.title {
  margin-bottom: 30px;
  color: $textColor;
  background: $bgColor;
}

3.根据不同的样式名导入对应的样式文件。

<template>
  <div :class="['main', className]">
    <div class="title">当前主题色：{{className}}</div>
    <el-button type="primary" size="small" @click="changeTheme('blue')">蓝色</el-button>
    <el-button type="danger" size="small" @click="changeTheme('red')">红色</el-button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      className: 'blue',
    }
  },
  mounted() {},
  methods: {
  	changeTheme(val) {
  		this.className = val
  	},
  },
}
</script>
<style lang="scss" scoped>
.blue {
  @import '@/assets/css/theme/blue.scss';
  @import '@/assets/css/page.scss';
}
.red {
  @import '@/assets/css/theme/red.scss';
  @import '@/assets/css/page.scss';
}
</style>

方案三

使用css中var方法定义变量，用方法修改var变量值，别的页面也可以直接使用var变量。

<template>
  <div class="main">
    <div class="title">当前主题色：{{theme}}</div>
    <el-button type="primary" size="small" @click="changeTheme('blue')">蓝色</el-button>
    <el-button type="danger" size="small" @click="changeTheme('red')">红色</el-button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      theme: ''
    }
  },
  mounted() {
    this.changeTheme('blue')
  },
  methods: {
  	changeTheme(val) {
      this.theme = val
      // 给html标签设置style
      document.documentElement.style.setProperty('--theme-color', val)
  	},
  },
}
</script>
<style lang="scss" scoped>
:root {
  --theme-color: blue;
}
.title {
  color: var(--theme-color);
}
</style>

方案四

给title设置data-theme属性值，针对不同的属性写不同的样式。

<template>
  <div class="main">
    <div ref="title" class="title" :data-theme="theme">当前主题色：{{theme}}</div>
    <el-button type="primary" size="small" @click="changeTheme('blue')">蓝色</el-button>
    <el-button type="danger" size="small" @click="changeTheme('red')">红色</el-button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      theme: ''
    }
  },
  mounted() {
    this.changeTheme('blue')
  },
  methods: {
  	changeTheme(val) {
      this.theme = val
      // 也可以使用setAttribute设置
      // this.$refs.title.setAttribute('data-theme', val) 
  	},
  },
}
</script>
<style lang="scss" scoped>
.title[data-theme = blue] {
  color: blue;
}
.title[data-theme = red] {
  color: red;
}
</style>