React项目动态修改主题颜色的方案
作者：月月鸟pt
这篇文章主要介绍了React项目动态修改主题颜色的方案,文中通过代码示例讲解的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
背景
因为公司是做办公软件的，所以需要适配明亮和暗黑的主题。
不推荐的方案
公司之前就是这种方案，费时费力。
就是在项目的根目录的 public 文件夹下创建一个 dark.css 文件，所有的黑暗样式在这个文件中。
切换主题的方法：
const getTheme = (isDark: boolean) => {
const darkStyle: any = document.getElementById('darkTheme');
if (!darkStyle) {
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.id = "darkTheme"
link.disabled = false;
link.href = './dark.css';
document.getElementsByTagName('head')[0].appendChild(link);
}
darkStyle.disabled = !!isDark;
}
推荐的方案
通过控制 css 变量来展示两种主题，方便简洁。
因为公司是使用的 less, 所以以下以 less 为例，但是 scss 和 css 是一样的。
1.创建两个主题的文件
在src文件夹下创建theme文件夹，在这个文件夹下创建lightTheme.less 和 darkTheme.less文件。
lightTheme.less
:root[data-theme="light"] {
--primary-text-color: #FFFFFF;
--primary-white-color: #2A2A2D;
--primary-color: #3591F4;
--text-color: #363A45;
}
darkTheme.less
:root[data-theme="light"] {
--primary-text-color: #FFFFFF;
--primary-white-color: #2A2A2D;
--primary-color: #3591F4;
--text-color: #fff;
}
2.在入口的处的 index.less 引入这两个文件
@import './theme/lightTheme.less'; @import './theme/darkTheme.less';
3.在入口处的tsx文件中，能获取到的主题的方法中，调用切换主题的方法
const getDarkTheme = (isDark: boolean) => {
const root = document.documentElement;
if (!isDark) {
// 修改 data-theme 属性的值为 "light"
root.setAttribute('data-theme', 'light');
return
}
// 修改 data-theme 属性的值为 "dark"
root.setAttribute('data-theme', 'dark');
}
getDarkTheme(theme)
使用例子
.btn {
color: var(--primary-color);
}
总结
在react项目中，通过这种修改css变量的方法来动态的修改主题颜色。更加方便简洁，只需要在实际的使用中只写一个css变量就好。使得项目的样式文件更好的维护。
以上就是React项目动态修改主题颜色的方案的详细内容，更多关于React修改主题颜色的资料请关注脚本之家其它相关文章！