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

4,552 阅读2分钟

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

方法一 【换肤】

b1.jpg

  • 在页面一定用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

关键代码:

b2.jpg

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

// 首先你要确保在global.less中你用到了 @white 这个颜色变量
less.modifyVars({'@white': '#000'});
  • 至此,使用 less 动态切换主题样式的功能就写好了!
  • 每次切换theme主题时,f12 控制台会出现:

b5.jpg

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

b3.jpg

方法二 【换肤】

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

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

关键代码:

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

b4.jpg

方法三 【换肤】

项目里用的不是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]);

渲染结果

b6.jpg

b7.jpg

方法四 【换肤】

借用安装包 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);
}

关键代码:

b8.jpg

触发:

image.png

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

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


结语

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

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

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