vue + css3 实现主题色切换

开发商城总免不了主题色的更换, 总不能一个个颜色手动粘贴复制吧,一键切换不香嘛

首先需要用到css3的var()函数,用法如下

body {
    --size: 20px;
    font-size: var(--size);    // 20px
    padding:var(--size);       // 20px
}

 

思路:

• 就是在vue的最外层盒子app中添加主题色的色值, 需要用到主题色的地方皆用变量取值

 

上代码:

app.vue中

<template>
  <div id="app" :style="appStyle">
    <router-view class="app" ></router-view>
  </div>
</template>

<script>
export default {
  name: "app",

  computed: {
    appStyle(){
      const themeColor = 1 

      // console.log('[App路由启动函数]', props, context, router)
      const themeColors = [
        '',
        '#DA251D',
        '#f56fa6',
        '#ff605c',
        '#86b902',
        '#40baff',
      ]
      return `--theme: ${themeColors[themeColor]}`
    }
  },

};
</script>

<style lang="scss" rel="stylesheet/scss">
@import "assets/style/index.scss";

#app {
  height: 100%;
  width: 100%;
  .app {
    background: #f5f5f5;
    padding-top: 45px;
  }
}
</style>

通过更改 themeColor 的数值作为 themeColors 数组的索引值来进行更换色值

 

需要用到的地方, 用以下写法即可

background-color: var(--theme);
color: var(--theme);

 

效果图