less合集（二）：动态修改主题颜色一键换肤

需求背景：
1：在需求中，一个平台样式风格基本保持统一；因而需设置一个全局样式配置
2：有时需要可以根据后端数据返回，动态修改主题颜色
3：参考链接：https://github.com/1019483075/lingxi/issues/26

方式一

适用技术：css，less，sass等
适用场景：样式例如颜色种类不固定的场景

1：在index.html文件中增加配置

<script>
  window.onload = () => {
    // 设置主题色
    // --theme-color是自定义的按钮背景样式代号
    // 可动态修改，eg:由后端返回接受，可由前端事件修改
    document.getElementsByTagName('body')[0].style.setProperty('--theme-color', '#2CB4FF');
  }
</script>

2：在样式文件中调用

.demo{
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: #fff;
  background: var(--theme-color);
}

方式二

实现要点：在body中增加class
适用技术：css，less，sass等
适用场景：样式比如颜色种类固定的场景

1：新建theme.less文件

.dark-theme {
  --theme-color: #141414;
}
.light-theme {
  --theme-color: #f4f4f4;
}

2：在var.less文件中添加配置全局变量配置

less全量配置参考：https://blog.csdn.net/duanhy_love/article/details/123568732?spm=1001.2014.3001.5502

import './theme.less'
@theme-color: var(--theme-color);

3：在index.html文件/需要修改的文件修改

document.getElementById('app').className = "dark-theme"
//或者 document.getElementById('app').className = "light-theme"

方式三

实现要点：使用less的modifyVars方法
适用技术：less
适用场景：样式比如颜色种类不固定的场景

1：在vue.config.js中增加全局配置

module.exports = {
  css: {
    // css预设器配置项
    loaderOptions: {
        less: {
            // 若 less-loader 版本小于 6.0，请移除 lessOptions 这一级，直接配置选项。
            lessOptions: {
              modifyVars: {
                 // 初始化可直接覆盖变量
                    'theme-color': '#1890FF',
              },
              javascriptEnabled: true,
            },
        },
    }
},
}

2: 在index.html文件中引入less.js文件与theme.less文件

theme.less文件放在public目录下，与index.html文件同级

<link rel="stylesheet/less" id='Themes' href="<%= BASE_URL %>theme.less">
<script src="https://cdn.bootcss.com/less.js/2.7.3/less.min.js"></script>

3： 新建theme.less文件

@theme-color: #279fcf;

4：在样式less文件中调用

.demo{
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: #fff;
  background: @theme-color;
}

5：在js文件中修改样式

 window.less.modifyVars({
  '@theme-color': 'yellow'
 })

方式四

实现要点：借用安装包css-vars-ponyfill
适用技术：css，less，sass等
适用场景：样式比如颜色种类固定的场景

1：安装组件包

npm i css-vars-ponyfill
or
cnpm i css-vars-ponyfill

2：在style文件夹下新建variable.js样式变量文件

// 字体变量
const baseSize = {
  "--font-size-large": "18px",
  "--font-size-medium": "14px",
  "--font-size-small": "12px",
};
  
//主题一：浅色
export const lightTheme = {
  '--theme-color': 'yellow',
  ...baseSize,
};
  
// 主题一：深色
export const darkTheme = {
  '--theme-color': '#fff',
  ...baseSize,
};

3：在style文件夹下新建theme.js配置文件

import { lightTheme, darkTheme } from "./variable";
import cssVars from "css-vars-ponyfill";
export const initTheme = (theme) => {
  document.documentElement.setAttribute("data-theme", theme ? "light" : "dark");
  cssVars({
    watch: true, // 当添加，删除或修改其<link>或<style>元素的禁用或href属性时，ponyfill将自行调用
    variables: theme ? lightTheme : darkTheme, // variables 自定义属性名/值对的集合
    onlyLegacy: false, // false  默认将css变量编译为浏览器识别的css样式  true 当浏览器不支持css变量的时候将css变量编译为识别的css
  });
};

4：在main.js中初始化主题样式

// 初始化主题样式
import {initTheme } from '@/style/theme.js'
initTheme(true)

5：在动态修改样式页面处调用

// js中
import {initTheme } from '@/style/theme.js'
data () {
  return {
    theme: true
  }
}
methods: { 
  changeTheme (theme) {
    initTheme(!theme)
  }
}

// vue中
<template>
  <div @changeTheme='changeTheme (theme)' class='demo'>测试</div>
</template>

// style中
.demo{
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: #fff;
  background: --theme-color;
}