React , 换肤功能，WC……~~！在这大半年，我快要废了

曾经我用过，写过一些挺骚的东西，但是我忘得一干二净

方法一 【换肤】

• 在页面一定用link标签引入less样式的文件, 比如：<link rel="stylesheet/less" href="/theme/global.less">
• 并且要在页面引入 less.js <script type="text/javascript" src="/less.min.js"></script>
• 或者在代码中，import引入less，在需要改变主题的地方调用less.modifyvars改变变量值
• 确保要先linkless样式文件后，再引入 less.js

关键代码:

import less from "less";  // 换肤 less.modifyVars

// 首先你要确保在global.less中你用到了 @white 这个颜色变量
less.modifyVars({'@white': '#000'});

• 至此，使用 less 动态切换主题样式的功能就写好了！
• 每次切换theme主题时，f12 控制台会出现：

最后在head标签里，会自动把global.less里的样式，添加嵌入style标签里

方法二 【换肤】

这个方法就很大众化了，也是最平民化的，这都不会的话，建议跳楼，骗保险

• 就是通过body标签加属性来识别，比如: theme="white"
• 然后在样式文件里：body[theme='white'] { …… …… }，正常操作

关键代码：

document.body.setAttribute('theme', 'white');
window.sessionStorage.setItem('theme', 'white');

方法三 【换肤】

项目里用的不是less, 那么还是用css的方法的话，用setProperty来进行动态修改

• 用法就是给变量加--前缀，涉及到主题色的都改成var(--themeColor)这种方式
• .css文件改颜色主题的话，看起来比较少方法，我只找到这种
• setProperty() 方法用于设置一个新的 CSS 属性，同时也可以修改 CSS 声明块中已存在的属性。

关键代码：

body{
    --themeColor:red;
}
.sider-layout {
    background: var(--themeColor);
}

useEffect(() => {
    if (theme == 1) {
      document.body.style.setProperty('--themeColor', '#ff0000');
    } else {
      document.body.style.setProperty('--themeColor', 'blue');
    }
}, [theme]);

渲染结果

方法四 【换肤】

借用安装包 css-vars-ponyfill

• yarn add css-vars-ponyfill

import cssVars from "css-vars-ponyfill";

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

使用样式变量 var(--aka-color)
div.tab {
    position: fixed;
    …… …… …… ……
    background-color: var(--aka-color);
}

关键代码：

触发：

参考文献：blog.csdn.net/weixin_3087…

参考文献：blog.csdn.net/duanhy_love…

---

结语

前端react QQ群：788023830 ---- React/Redux - 地下老英雄

前端交流QQ群：249620372 ---- FRONT-END-JS前端

（我们的宗旨是，为了加班，为了秃顶……，仰望大佬），希望小伙伴们加群一起学习