首页 > 网络编程 > JavaScript > vue-element换肤所有主题色和基础色均可实现自主配置

vue-element换肤所有主题色和基础色均可实现自主配置

福牛 4月 25, 2023 22 0

element换肤所有主题色和基础色均可自主配置

1.element-ui官方提供的动态切换主题方法换肤 但此方法只可修改$–color-primary 这一个主题色及其衍生色

2. 获取element-ui的theme-chalk/index.css文件，找到基础色所对应的颜色值，抽取颜色值进行替换，此种方法无法自动生成衍生色

  1.      {
  2.          ‘#67C23A’: theme.color_success,
  3.          ‘#E6A23C’: theme.color_warning,
  4.          ‘#F56C6C’: theme.color_danger,
  5.          ‘#909399’: theme.color_info,
  6.      }

3.自定义css变量，使用下面的方法去修改变量，此种方法仅可修改自定义的样式

  1. document.documentElement.style.setProperty(‘–theme-color’, value)

最终方案

以上三种相结合，实现我们的需求，各种主题色、基础色自主配置

-1

以下是所有代码

Theme.vue

···ht-form-item是自定义组件 和 el-form-item 差不多

  1. <template>
  2.      <div>
  3.      <h4 class=“header”>
  4.          <span>主题配色选择</span>
  5.          <el-button type=“default” @click=“resetTheme”>重置</el-button>
  6.      </h4>
  7.      <el-row>
  8.          <el-col :span=“8”>
  9.          <ht-form-item label=“主题颜色” label-width=“140px”>
  10.              <el-color-picker
  11.              v-model=“theme”
  12.              :predefine=“[‘#409eff’, ‘#1890ff’, ‘#304156′,’#212121′,’#11a983’, ‘#13c2c2’, ‘#6959CD’, ‘#f5222d’, ]”
  13.              class=“theme-picker”
  14.              popper-class=“theme-picker-dropdown”
  15.              />
  16.          </ht-form-item>
  17.          <ht-form-item label=“成功颜色” label-width=“140px”>
  18.              <el-color-picker
  19.              v-model=“themeColor.color_success”
  20.              :predefine=“[‘#67c23a’, ‘#1890ff’, ‘#304156′,’#212121′,’#11a983’, ‘#13c2c2’, ‘#6959CD’, ‘#f5222d’, ]”
  21.              class=“theme-picker”
  22.              popper-class=“theme-picker-dropdown”
  23.              />
  24.          </ht-form-item>
  25.          <ht-form-item label=“警告颜色” label-width=“140px”>
  26.              <el-color-picker
  27.              v-model=“themeColor.color_warning”
  28.              :predefine=“[‘#e6a23c’, ‘#1890ff’, ‘#304156′,’#212121′,’#11a983’, ‘#13c2c2’, ‘#6959CD’, ‘#f5222d’, ]”
  29.              class=“theme-picker”
  30.              popper-class=“theme-picker-dropdown”
  31.              />
  32.          </ht-form-item>
  33.          <ht-form-item label=“危险颜色” label-width=“140px”>
  34.              <el-color-picker
  35.              v-model=“themeColor.color_danger”
  36.              :predefine=“[‘#f56c6c’, ‘#1890ff’, ‘#304156′,’#212121′,’#11a983’, ‘#13c2c2’, ‘#6959CD’, ‘#f5222d’, ]”
  37.              class=“theme-picker”
  38.              popper-class=“theme-picker-dropdown”
  39.              />
  40.          </ht-form-item>
  41.          <ht-form-item label=“信息颜色” label-width=“140px”>
  42.              <el-color-picker
  43.              v-model=“themeColor.color_info”
  44.              :predefine=“[‘#909399’, ‘#1890ff’, ‘#304156′,’#212121′,’#11a983’, ‘#13c2c2’, ‘#6959CD’, ‘#f5222d’, ]”
  45.              class=“theme-picker”
  46.              popper-class=“theme-picker-dropdown”
  47.              />
  48.          </ht-form-item>
  49.          <ht-form-item label=“次要主题颜色” label-width=“140px”>
  50.              <el-color-picker
  51.              v-model=“themeColor.color_secondary”
  52.              :predefine=“[‘#dfebfc’, ‘#1890ff’, ‘#304156′,’#212121′,’#11a983’, ‘#13c2c2’, ‘#6959CD’, ‘#f5222d’, ]”
  53.              class=“theme-picker”
  54.              popper-class=“theme-picker-dropdown”
  55.              />
  56.          </ht-form-item>
  57.          </el-col>
  58.          <el-col :span=“8”>
  59.          <ht-form-item label=“基础白色” label-width=“140px”>
  60.              <el-color-picker
  61.              v-model=“themeColor.color_white”
  62.              :predefine=“[‘#fff’, ‘#1890ff’, ‘#304156′,’#212121′,’#11a983’, ‘#13c2c2’, ‘#6959CD’, ‘#f5222d’, ]”
  63.              class=“theme-picker”
  64.              popper-class=“theme-picker-dropdown”
  65.              />
  66.          </ht-form-item>
  67.          <ht-form-item label=“基础黑色” label-width=“140px”>
  68.              <el-color-picker
  69.              v-model=“themeColor.color_black”
  70.              :predefine=“[‘#000’, ‘#1890ff’, ‘#304156′,’#212121′,’#11a983’, ‘#13c2c2’, ‘#6959CD’, ‘#f5222d’, ]”
  71.              class=“theme-picker”
  72.              popper-class=“theme-picker-dropdown”
  73.              />
  74.          </ht-form-item>
  75.          <ht-form-item label=“主要文字颜色” label-width=“140px”>
  76.              <el-color-picker
  77.              v-model=“themeColor.color_text_primary”
  78.              :predefine=“[‘#303133’, ‘#1890ff’, ‘#304156′,’#212121′,’#11a983’, ‘#13c2c2’, ‘#6959CD’, ‘#f5222d’, ]”
  79.              class=“theme-picker”
  80.              popper-class=“theme-picker-dropdown”
  81.              />
  82.          </ht-form-item>
  83.          <ht-form-item label=“常规文字颜色” label-width=“140px”>
  84.              <el-color-picker
  85.              v-model=“themeColor.color_text_regular”
  86.              :predefine=“[‘#606266’, ‘#1890ff’, ‘#304156′,’#212121′,’#11a983’, ‘#13c2c2’, ‘#6959CD’, ‘#f5222d’, ]”
  87.              class=“theme-picker”
  88.              popper-class=“theme-picker-dropdown”
  89.              />
  90.          </ht-form-item>
  91.          <ht-form-item label=“次要文字颜色” label-width=“140px”>
  92.              <el-color-picker
  93.              v-model=“themeColor.color_text_secondary”
  94.              :predefine=“[‘#909399’, ‘#1890ff’, ‘#304156′,’#212121′,’#11a983’, ‘#13c2c2’, ‘#6959CD’, ‘#f5222d’, ]”
  95.              class=“theme-picker”
  96.              popper-class=“theme-picker-dropdown”
  97.              />
  98.          </ht-form-item>
  99.          <ht-form-item label=“占位文字颜色” label-width=“140px”>
  100.              <el-color-picker
  101.              v-model=“themeColor.color_text_placeholder”
  102.              :predefine=“[‘#c0c4cc’, ‘#1890ff’, ‘#304156′,’#212121′,’#11a983’, ‘#13c2c2’, ‘#6959CD’, ‘#f5222d’, ]”
  103.              class=“theme-picker”
  104.              popper-class=“theme-picker-dropdown”
  105.              />
  106.          </ht-form-item>
  107.          </el-col>
  108.          <el-col :span=“8”>
  109.          <ht-form-item label=“一级边框颜色” label-width=“140px”>
  110.              <el-color-picker
  111.              v-model=“themeColor.border_color_base”
  112.              :predefine=“[‘#dcdfe6’, ‘#1890ff’, ‘#304156′,’#212121′,’#11a983’, ‘#13c2c2’, ‘#6959CD’, ‘#f5222d’, ]”
  113.              class=“theme-picker”
  114.              popper-class=“theme-picker-dropdown”
  115.              />
  116.          </ht-form-item>
  117.          <ht-form-item label=“二级边框颜色” label-width=“140px”>
  118.              <el-color-picker
  119.              v-model=“themeColor.border_color_light”
  120.              :predefine=“[‘#e4e7ed’, ‘#1890ff’, ‘#304156′,’#212121′,’#11a983’, ‘#13c2c2’, ‘#6959CD’, ‘#f5222d’, ]”
  121.              class=“theme-picker”
  122.              popper-class=“theme-picker-dropdown”
  123.              />
  124.          </ht-form-item>
  125.          <ht-form-item label=“三级边框颜色” label-width=“140px”>
  126.              <el-color-picker
  127.              v-model=“themeColor.border_color_lighter”
  128.              :predefine=“[‘#ebeef5’, ‘#1890ff’, ‘#304156′,’#212121′,’#11a983’, ‘#13c2c2’, ‘#6959CD’, ‘#f5222d’, ]”
  129.              class=“theme-picker”
  130.              popper-class=“theme-picker-dropdown”
  131.              />
  132.          </ht-form-item>
  133.          <ht-form-item label=“四级边框颜色” label-width=“140px”>
  134.              <el-color-picker
  135.              v-model=“themeColor.border_color_extra_light”
  136.              :predefine=“[‘#f2f6fc’, ‘#1890ff’, ‘#304156′,’#212121′,’#11a983’, ‘#13c2c2’, ‘#6959CD’, ‘#f5222d’, ]”
  137.              class=“theme-picker”
  138.              popper-class=“theme-picker-dropdown”
  139.              />
  140.          </ht-form-item>
  141.          <ht-form-item label=“基础背景色” label-width=“140px”>
  142.              <el-color-picker
  143.              v-model=“themeColor.background_color_base”
  144.              :predefine=“[‘#f5f7fa’, ‘#1890ff’, ‘#304156′,’#212121′,’#11a983’, ‘#13c2c2’, ‘#6959CD’, ‘#f5222d’, ]”
  145.              class=“theme-picker”
  146.              popper-class=“theme-picker-dropdown”
  147.              />
  148.          </ht-form-item>
  149.          <ht-form-item label=“第二基础背景色” label-width=“140px”>
  150.              <el-color-picker
  151.              v-model=“themeColor.background_color_secondary”
  152.              :predefine=“[‘#f0f2f5’, ‘#1890ff’, ‘#304156′,’#212121′,’#11a983’, ‘#13c2c2’, ‘#6959CD’, ‘#f5222d’, ]”
  153.              class=“theme-picker”
  154.              popper-class=“theme-picker-dropdown”
  155.              />
  156.          </ht-form-item>
  157.          </el-col>
  158.      </el-row>
  159.      <el-row>
  160.          <el-col :span=“8”>
  161.          <ht-form-item label=“首页导航颜色” label-width=“140px”>
  162.              <span class=“color-box”>
  163.              <span class=“color-block“ :style=“{backgroundColor:theme_color}“></span>
  164.              </span>
  165.          </ht-form-item>
  166.          </el-col>
  167.          <el-col :span=“8”>
  168.          <ht-form-item label=“首页导航悬浮颜色” label-width=“140px”>
  169.              <span class=“color-box”>
  170.              <span class=“color-block” :style=“{backgroundColor:theme_color_active}“></span>
  171.              </span>
  172.          </ht-form-item>
  173.          </el-col>
  174.      </el-row>
  175.      </div>
  176. </template>
  177.  
  178. <script>
  179. import {mapState} from ‘vuex’;
  180. import variables from ‘@/assets/css/theme-variables.scss’
  181. const version = require(‘element-ui/package.json’).version
  182. const ORIGINAL_THEME = ‘#409EFF’ // default color
  183.  
  184. export default {
  185.      data() {
  186.      return {
  187.          themeColor: {},
  188.          chalk: ”, // content of theme-chalk css
  189.          theme: ORIGINAL_THEME,
  190.          theme_color: ‘#0d84ff’,
  191.      theme_color_active: ‘#006bd9’,
  192.      }
  193.      },
  194.      computed: {
  195.      …mapState({
  196.          themeVaribles: state => state.theme,
  197.          defaultTheme: state => state.theme.color_primary
  198.      })
  199.      },
  200.      watch: {
  201.      defaultTheme: {
  202.          handler: function(val, oldVal) {
  203.          this.theme = val
  204.          },
  205.          immediate: true
  206.      },
  207.      themeColor: {
  208.          handler: function (theme, oldTheme) {
  209.          // element默认主题配色值
  210.          this.setIndexStyle(this.getColorMap(theme))
  211.          this.setCssVariables(theme)
  212.          // vuex存储颜色
  213.          for(let x in theme) {
  214.              this.$store.dispatch(‘theme/changeSetting’, {
  215.              key: x,
  216.              value: theme[x]
  217.              })
  218.          }
  219.          localStorage.setItem(‘themeColor’,JSON.stringify(theme))
  220.          },
  221.          deep: true
  222.      },
  223.      theme(val,oldVal) {
  224.          if (typeof val !== ‘string’) return
  225.          const themeCluster = this.getThemeCluster(val.replace(‘#’, ”))
  226.          const originalCluster = this.getThemeCluster(oldVal.replace(‘#’, ”))
  227.          // console.log(themeCluster, originalCluster)
  228.  
  229.          const getHandler = (variable, id) => {
  230.          return () => {
  231.              const originalCluster = this.getThemeCluster(ORIGINAL_THEME.replace(‘#’, ”))
  232.              let newStyle = this.updateStyle(this[variable], originalCluster, themeCluster)
  233.              // 将其他配色添加进去
  234.              newStyle = this.getStyleTemplate(newStyle,this.getColorMap(this.themeColor));
  235.  
  236.              let styleTag = document.getElementById(id)
  237.              styleTag.innerText = newStyle
  238.          }
  239.          }
  240.  
  241.          const chalkHandler = getHandler(‘chalk’, ‘my-chalk’)
  242.          chalkHandler()
  243.  
  244.          const styles = [].slice.call(document.querySelectorAll(‘style’))
  245.          .filter(style => {
  246.          const text = style.innerText
  247.          return new RegExp(oldVal, ‘i’).test(text) && !/Chalk Variables/.test(text)
  248.          })
  249.          styles.forEach(style => {
  250.          const { innerText } = style
  251.          if (typeof innerText !== ‘string’) return
  252.          style.innerText = this.updateStyle(innerText, originalCluster, themeCluster)
  253.          })
  254.          //this.themeColor.color_primary = val
  255.          localStorage.setItem(‘color_primary’,val)
  256.          this.$store.dispatch(‘theme/changeSetting’, {
  257.          key: ‘color_primary’,
  258.          value: val
  259.          })
  260.  
  261.          this.theme_color = this.generaterSimilarColor(val,0.1)
  262.          this.theme_color_active = this.generaterSimilarColor(val,0.2)
  263.          const node = document.documentElement
  264.          node.style.setProperty(‘–theme-color’, this.theme_color)
  265.          node.style.setProperty(‘–theme-color-active’, this.theme_color_active)
  266.      }
  267.      },
  268.      created() {
  269.      // 获取index.css
  270.      this.getFile(`//unpkg.com/element-ui@${version}/lib/theme-chalk/index.css`)
  271.      .then(({ data }) => {
  272.          data = data.replace(/@font-face{[^}]+}/, ”)
  273.          this.chalk = data
  274.          const style = document.createElement(‘style’);
  275.          style.id = ‘my-chalk’
  276.          style.innerText = this.chalk;
  277.          document.head.appendChild(style);
  278.  
  279.          // 获取本地存储的基础色
  280.          if(localStorage.getItem(‘themeColor’)) {
  281.          this.themeColor = JSON.parse(localStorage.getItem(‘themeColor’))
  282.          for(let x in this.themeColor) {
  283.              this.$store.dispatch(‘theme/changeSetting’, {
  284.              key: x,
  285.              value: this.themeColor[x]
  286.              })
  287.          }
  288.          } else {
  289.          this.themeColor = Object.assign({},this.themeVaribles)
  290.          }
  291.          // 获取本地存储的主题色
  292.          if(localStorage.getItem(“theme”)) {
  293.          this.theme = localStorage.getItem(“theme”)
  294.          this.$store.dispatch(‘theme/changeSetting’, {
  295.              key: ‘color_primary’,
  296.              value: this.theme
  297.          })
  298.          }
  299.      });
  300.      },
  301.      methods: {
  302.      // 重置主题
  303.      resetTheme() {
  304.          this.theme = ORIGINAL_THEME
  305.      let aVariables = {…variables}
  306.      delete aVariables.color_primary
  307.          this.themeColor = {…aVariables}
  308.      },
  309.      getColorMap(theme) {
  310.          return {
  311.          // ‘#409EFF’: theme.color_primary,
  312.          ‘#67C23A’: theme.color_success,
  313.          ‘#E6A23C’: theme.color_warning,
  314.          ‘#F56C6C’: theme.color_danger,
  315.          ‘#909399’: theme.color_info,
  316.          ‘#dfebfc’: theme.color_secondary,
  317.          ‘#ffffff’: theme.color_white,
  318.          ‘#000000’: theme.color_black,
  319.          ‘#303133’: theme.color_text_primary,
  320.          ‘#606266’: theme.color_text_regular,
  321.          ‘#909399’: theme.color_text_secondary,
  322.          ‘#C0C4CC’: theme.color_text_placeholder,
  323.          ‘#DCDFE6’: theme.border_color_base,
  324.          ‘#E4E7ED’: theme.border_color_light,
  325.          ‘#EBEEF5’: theme.border_color_lighter,
  326.          ‘#F2F6FC’: theme.border_color_extra_light,
  327.          ‘#F5F7FA’: theme.background_color_base,
  328.          ‘#F0F2F5’: theme.background_color_secondary
  329.          }
  330.      },
  331.      // css变量改变赋值
  332.      setCssVariables(theme) {
  333.          const node = document.documentElement
  334.          Object.entries(theme).forEach(ele => {
  335.          let key = ele[0].replace(/_/g, ‘-‘);
  336.          node.style.setProperty(`–${key}`, ele[1])
  337.          })
  338.      },
  339.      // 颜色替换后的样式文件
  340.      getStyleTemplate(data,colorMap) {
  341.          Object.keys(colorMap).forEach(key => {
  342.          const value = colorMap[key];
  343.          data = data.replace(new RegExp(key, ‘ig’), value);
  344.          });
  345.          return data;
  346.      },
  347.      // 获取文件
  348.      getFile(url, isBlob = false) {
  349.          return new Promise((resolve, reject) => {
  350.          const client = new XMLHttpRequest();
  351.          client.responseType = isBlob ? ‘blob’ : ”;
  352.          client.onreadystatechange = () => {
  353.              if (client.readyState !== 4) {
  354.              return;
  355.              }
  356.              if (client.status === 200) {
  357.              const urlArr = client.responseURL.split(‘/’);
  358.              resolve({
  359.                  data: client.response,
  360.                  url: urlArr[urlArr.length – 1]
  361.              });
  362.              } else {
  363.              reject(new Error(client.statusText));
  364.              }
  365.          };
  366.          client.open(‘GET’, url);
  367.          client.send();
  368.          });
  369.      },
  370.      // 修改颜色后替换index.css文件
  371.      setIndexStyle(colorMap) {
  372.          const myChalkStyle = document.getElementById(“my-chalk”)
  373.      const themeCluster = this.getThemeCluster(this.theme.replace(‘#’, ”))
  374.          const originalCluster = this.getThemeCluster(ORIGINAL_THEME.replace(‘#’, ”))
  375.      let newStyle = this.updateStyle(this.chalk, originalCluster, themeCluster)
  376.          newStyle = this.getStyleTemplate(newStyle,colorMap)
  377.          myChalkStyle.innerText = newStyle;
  378.      },
  379.      updateStyle(style, oldCluster, newCluster) {
  380.          let newStyle = style
  381.          oldCluster.forEach((color, index) => {
  382.          newStyle = newStyle.replace(new RegExp(color, ‘ig’), newCluster[index])
  383.          })
  384.          return newStyle
  385.      },
  386.      // 获取主题色和衍生色
  387.      getThemeCluster(theme) {
  388.          const tintColor = (color, tint) => {
  389.          let red = parseInt(color.slice(0, 2), 16)
  390.          let green = parseInt(color.slice(2, 4), 16)
  391.          let blue = parseInt(color.slice(4, 6), 16)
  392.  
  393.          if (tint === 0) { // when primary color is in its rgb space
  394.              return [red, green, blue].join(‘,’)
  395.          } else {
  396.      red += Math.round(tint * (255 – red))
  397.              green += Math.round(tint * (255 – green))
  398.              blue += Math.round(tint * (255 – blue))
  399.  
  400.              red = red.toString(16)
  401.              green = green.toString(16)
  402.              blue = blue.toString(16)
  403.  
  404.              return `#${red}${green}${blue}`
  405.          }
  406.          }
  407.  
  408.          const shadeColor = (color, shade) => {
  409.          let red = parseInt(color.slice(0, 2), 16)
  410.          let green = parseInt(color.slice(2, 4), 16)
  411.          let blue = parseInt(color.slice(4, 6), 16)
  412.  
  413.          red = Math.round((1 – shade) * red)
  414.          green = Math.round((1 – shade) * green)
  415.          blue = Math.round((1 – shade) * blue)
  416.  
  417.          red = red.toString(16)
  418.          green = green.toString(16)
  419.          blue = blue.toString(16)
  420.  
  421.          return `#${red}${green}${blue}`
  422.          }
  423.  
  424.          const clusters = [theme]
  425.          for (let i = 0; i <= 9; i++) {
  426.          clusters.push(tintColor(theme, Number((i / 10).toFixed(2))))
  427.          }
  428.          clusters.push(shadeColor(theme, 0.1))
  429.          return clusters
  430.      },
  431.      // 生成fvue相近主题色：这是一个十六进制转rgb,rgb再转hsl,hsl改变亮度，再转成rgb,再转成十六进制的方法。。。
  432.      generaterSimilarColor(color,weight) {
  433.          let colorChange = [];
  434.          for (let i=1; i<7; i+=2) {
  435.          colorChange.push(parseInt(“0x”+color.slice(i, i+2)));
  436.          }
  437.          let [r,g,b] = colorChange
  438.          r /= 255, g /= 255, b /= 255;
  439.          let max = Math.max(r, g, b), min = Math.min(r, g, b);
  440.          let h, s, l = (max + min) / 2;
  441.          if (max == min){
  442.          h = s = 0; // achromatic
  443.          } else {
  444.          let d = max – min;
  445.          s = l > 0.5 ? d / (2 – max – min) : d / (max + min);
  446.          switch(max) {
  447.              case r: h = (g – b) / d + (g < b ? 6 : 0); break;
  448.              case g: h = (b – r) / d + 2; break;
  449.              case b: h = (r – g) / d + 4; break;
  450.          }
  451.          h /= 6;
  452.          }
  453.          l = l–weight < 0 ? 0.1 : l–weight
  454.  
  455.          if(s == 0) {
  456.          r = g = b = l; // achromatic
  457.          } else {
  458.          let hue2rgb = function hue2rgb(p, q, t) {
  459.              if(t < 0) t += 1;
  460.              if(t > 1) t -= 1;
  461.              if(t < 1/6) return p + (q – p) * 6 * t;
  462.              if(t < 1/2) return q;
  463.              if(t < 2/3) return p + (q – p) * (2/3 – t) * 6;
  464.              return p;
  465.          }
  466.          let q = l < 0.5 ? l * (1 + s) : l + s – l * s;
  467.          let p = 2 * l – q;
  468.          r = hue2rgb(p, q, h + 1/3);
  469.          g = hue2rgb(p, q, h);
  470.          b = hue2rgb(p, q, h – 1/3);
  471.          }
  472.          let rgb = [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)]
  473.          let strHex = “#”;
  474.          for (let i=0; i<rgb.length; i++) {
  475.          let hex = Number(rgb[i]).toString(16);
  476.          if (hex.length < 2) {
  477.              hex = ‘0’ + hex;
  478.          }
  479.          strHex += hex;
  480.          }
  481.          return strHex
  482.      }
  483.      },
  484.      mounted() {
  485.      // 获取index.css
  486.      this.getFile(‘/css/theme-chalk/index.css’).then(({ data }) => {
  487.          data = data.replace(/@font-face{[^}]+}/, ”)
  488.          this.chalk = data
  489.          const style = document.createElement(‘style’)
  490.          style.id = ‘my-chalk’
  491.          style.innerText = this.chalk
  492.          document.head.appendChild(style)
  493.  
  494.          // 获取本地存储的基础色
  495.          if(localStorage.getItem(‘themeColor’)) {
  496.          this.themeColor = JSON.parse(localStorage.getItem(‘themeColor’))
  497.          for(let x in this.themeColor) {
  498.              this.$store.dispatch(‘theme/changeSetting’, {
  499.              key: x,
  500.              value: this.themeColor[x]
  501.              })
  502.          }
  503.          } else {
  504.          delete this.themeVaribles.color_primary
  505.          this.themeColor = Object.assign({},this.themeVaribles)
  506.          }
  507.          // 获取本地存储的主题色
  508.          if(localStorage.getItem(“color_primary”)) {
  509.          this.theme = localStorage.getItem(“color_primary”)
  510.          this.$store.dispatch(‘theme/changeSetting’, {
  511.              key: ‘color_primary’,
  512.              value: this.theme
  513.          })
  514.          }
  515.      });
  516.      }
  517. }
  518. </script>
  519.  
  520. <style lang=“scss” scoped>
  521. .header {
  522.      font–size: 14px;
  523.      text–align: center;
  524.      font–weight: normal;
  525.      .el–button {
  526.      margin–left: 10px;
  527.      }
  528. }
  529. .color–box {
  530.      display: inline–block;
  531.      padding: 4px;
  532.      width: 32px;
  533.      height: 32px;
  534.      border–radius: 4px;
  535.      box–sizing: border–box;
  536.      border: 1px solid #e6e6e6;
  537.      .color–block {
  538.      display: inline–block;
  539.      width: 100%;
  540.      height: 100%;
  541.      border–radius: 2px;
  542.      }
  543. }
  544. </style>

Theme.js：vuex管理主题色

  1. import themeVariables from ‘@/assets/css/theme-variables.scss’
  2.  
  3. const state = {
  4.      …themeVariables
  5. }
  6. const getters = {};
  7. const mutations = {
  8.      CHANGE_SETTING: (state, { key, value }) => {
  9.      // eslint-disable-next-line no-prototype-builtins
  10.      if (state.hasOwnProperty(key)) {
  11.          state[key] = value
  12.      }
  13.      }
  14. }
  15.  
  16. const actions = {
  17.      changeSetting({ commit }, data) {
  18.      commit(‘CHANGE_SETTING’, data)
  19.      }
  20. }
  21.  
  22. export default {
  23.      namespaced: true,
  24.      state,
  25.      getters,
  26.      mutations,
  27.      actions
  28. }

element-variables.scss

  1. // 自定义主题色css变量
  2. // 可使用js修改：document.documentElement.style.setProperty(name,value);
  3. :root {
  4.      —color–primary: #409eff;/*主题颜色——#409EFF*/
  5.      —color–success: #67c23a;/*成功颜色——#67c23a*/
  6.      —color–warning: #e6a23c;/*警告颜色——#e6a23c*/
  7.      —color–danger: #f56c6c;/*危险颜色——#f56c6c*/
  8.      —color–info: #909399;/*信息颜色——#909399*/
  9.      —color–secondary: #dfebfc;/*次要主题颜色——#dfebfc*/
  10.      —color–white: #FFFFFF; /*基础白色——#FFFFFF*/
  11.      —color–black: #000;/*基础黑色——#000000*/
  12.      —color–text–primary: #303133; /*主要文字颜色——#303133*/
  13.      —color–text–regular: #606266; /*常规文字颜色——#606266*/
  14.      —color–text–secondary: #909399; /*次要文字颜色——#909399*/
  15.      —color–text–placeholder: #c0c4cc; /*占位文字颜色——#c0c4cc*/
  16.      —border–color–base: #dcdfe6; /*一级边框颜色——#dcdfe6*/
  17.      —border–color–light: #e4e7ed; /*二级边框颜色——#e4e7ed*/
  18.      —border–color–lighter: #ebeef5; /*三级边框颜色——#ebeef5*/
  19.      —border–color–extra–light: #f2f6fc; /*四级边框颜色——#f2f6fc*/
  20.      —background–color–base: #f5f7fa; /*基础背景色——#F5F7FA*/
  21.      —background–color–secondary: #f0f2f5; /*第二基础背景色——#F0F2F5*/
  22.      —theme–color: #2761ff; /*主题颜色（即首页导航栏颜色）——#2761ff*/
  23.      —theme–color–active: #1f4ecc; /*首页导航栏颜色鼠标悬停到某一个菜单时的颜色——#1F4ECC*/
  24. }
  25.  
  26. $—color–primary: var(–color–primary);/*主题颜色——#409EFF*/
  27. $—color–success: var(–color–success);/*成功颜色——#67c23a*/
  28. $—color–warning: var(–color–warning);/*警告颜色——#e6a23c*/
  29. $—color–danger: var(–color–danger);/*危险颜色——#f56c6c*/
  30. $—color–info: var(–color–info);/*信息颜色——#909399*/
  31. $—color–secondary: var(–color–secondary);/*次要主题颜色——#dfebfc*/
  32. $—color–white: var(–color–white);/*基础白色——#FFFFFF*/
  33. $—color–black: var(–color–black);/*基础黑色——#000000*/
  34. $—color–text–primary: var(–color–text–primary); /*主要文字颜色——#303133*/
  35. $—color–text–regular: var(–color–text–regular); /*常规文字颜色——#606266*/
  36. $—color–text–secondary: var(–color–text–secondary); /*次要文字颜色——#909399*/
  37. $—color–text–placeholder: var(–color–text–placeholder); /*占位文字颜色——#c0c4cc*/
  38. $—border–color–base: var(–border–color–base); /*一级边框颜色——#dcdfe6*/
  39. $—border–color–light: var(–border–color–light); /*二级边框颜色——#e4e7ed*/
  40. $—border–color–lighter: var(–border–color–lighter); /*三级边框颜色——#ebeef5*/
  41. $—border–color–extra–light: var(–border–color–extra–light); /*四级边框颜色——#f2f6fc*/
  42. $—background–color–base: var(–background–color–base); /*基础背景色——#F5F7FA*/
  43. $—background–color–secondary: var(–background–color–secondary); /*第二基础背景色——#F0F2F5*/
  44.  
  45. $—theme–color: var(–theme–color); /*主题颜色（即首页导航栏颜色）——#2761ff*/
  46. $—theme–color–active: var(–theme–color–active); /*首页导航栏颜色鼠标悬停到某一个菜单时的颜色——#1F4ECC*/
  47.  

element-custom.scss

  1. @import “theme-variables.scss”;
  2.  
  3. /* 改变 icon 字体路径变量，必需 */
  4. $—font–path: “~element-ui/lib/theme-chalk/fonts”;
  5.  
  6. @import “~element-ui/packages/theme-chalk/src/index”;
  7. @import “../icon/iconfont.css”;
  8. .el–tree–node__label{font–size:12px}

theme-variables.scss

  1. /* 改变系统主题色变量 ——*/
  2. $—theme–color: #2761ff; /*主题颜色（即首页导航栏颜色）——#2761ff*/
  3. $—theme–color–active: #1f4ecc; /*首页导航栏颜色鼠标悬停到某一个菜单时的颜色——#1F4ECC*/
  4.  
  5. /* 改变element组件主题色变量 ——*/
  6. $—color–primary: #409eff; /*主题颜色——#409EFF*/
  7. $—color–success: #67c23a; /*成功颜色——#67c23a*/
  8. $—color–warning: #e6a23c; /*警告颜色——#e6a23c*/
  9. $—color–danger: #f56c6c; /*危险颜色——#f56c6c*/
  10. $—color–info: #909399; /*信息颜色——#909399*/
  11. $—color–secondary: #dfebfc;/*次要主题颜色——#409EFF*/
  12. $—color–white: #ffffff; /*基础白色——#FFFFFF*/
  13. $—color–black: #000000; /*基础黑色——#000000*/
  14. $—color–text–primary: #303133; /*主要文字颜色——#303133*/
  15. $—color–text–regular: #606266; /*常规文字颜色——#606266*/
  16. $—color–text–secondary: #909399; /*次要文字颜色——#909399*/
  17. $—color–text–placeholder: #c0c4cc; /*占位文字颜色——#c0c4cc*/
  18. $—border–color–base: #dcdfe6; /*一级边框颜色——#dcdfe6*/
  19. $—border–color–light: #e4e7ed; /*二级边框颜色——#e4e7ed*/
  20. $—border–color–lighter: #ebeef5; /*三级边框颜色——#ebeef5*/
  21. $—border–color–extra–light: #f2f6fc; /*四级边框颜色——#f2f6fc*/
  22. $—background–color–base: #f5f7fa; /*基础背景色——#F5F7FA*/
  23. $—background–color–secondary: #f0f2f5; /*第二基础背景色——#F0F2F5*/
  24.  
  25. /* 左侧树宽度设置 */
  26. $—aside–width: 230px;
  27.  
  28. /* 自定义主题色变量 */
  29. .primaryColor {
  30.      background–color: $—color–primary;
  31. }
  32.  
  33. //主要的一步：
  34. :export {
  35.      theme_color: $—theme–color;
  36.      theme_color_active: $—theme–color–active;
  37.      color_primary: $—color–primary;
  38.      color_success: $—color–success;
  39.      color_warning: $—color–warning;
  40.      color_danger: $—color–danger;
  41.      color_info: $—color–info;
  42.      color_secondary: $—color–secondary;
  43.      color_white: $—color–white;
  44.      color_black: $—color–black;
  45.      color_text_primary: $—color–text–primary;
  46.      color_text_regular: $—color–text–regular;
  47.      color_text_secondary: $—color–text–secondary;
  48.      color_text_placeholder: $—color–text–placeholder;
  49.      border_color_base: $—border–color–base;
  50.      border_color_light: $—border–color–light;
  51.      border_color_lighter: $—border–color–lighter;
  52.      border_color_extra_light: $—border–color–extra–light;
  53.      background_color_base: $—background–color–base;
  54.      background_color_secondary: $—background–color–secondary;
  55. }
  56.  

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

标签

相关推荐

发表评论