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);

 

效果圖