vue项目动态设置页面主题

1.涉及的技术

0. css中的自定义属性

   0. 自定义属性的名称必须以--开头。
   1. 自定义属性的值可以是任何CSS值，包括数字、字符串、颜色、URL等。
   2. 自定义属性可以在任何CSS规则中使用，包括选择器、@media规则、@keyframes规则等。
   3. 自定义属性可以继承，就像其他CSS属性一样。
   4. 自定义属性可以使用JavaScript动态修改，例如：

    function switchTheme() {
         let documentElement = document.getElementById('app')
         documentElement.style.setProperty('--primary-color', '#ff0000')
       }
   

1. css的var()函数

2. vue的动态样式:class

2.建立主题样式文件,theme1.less和theme2.less

//theme1.less
.fs-theme1{
  --fs-font-color: #00ff00; //字体颜色
  --fs-background-color:#ff0000; //背景颜色
}

//theme2.less
.fs-theme2{
  --fs-font-color: #045120; //字体颜色
  --fs-background-color:#140710; //背景颜色
}

3.在main.js中引入主题样式

//main.js
import 'theme1.less'
import 'theme2.less'

4.在App.vue中用动态样式决定使用哪一种主题

通过修改themeKey来决定使用哪一种主题

//App.vue
<template>
  <div id="app" :class="{ 'fs-theme1': themeKey, 'fs-theme2': !themeKey }">
    <router-view />
  </div>
</template>
​
<script>
export default {
  data() {
    return {
      themeKey: true
    }
  },
}
</script>

5.组件中使用主题定义的字体颜色

//TheTitle.vue
<template>
  <div class="title">
   标题组件
  </div>
</template>
<style lang="less" scoped>
    .title {
       color: var(--font-color);
    }
</style >