React項(xiàng)目動(dòng)態(tài)修改主題顏色的方案
背景
因?yàn)楣臼亲鲛k公軟件的，所以需要適配明亮和暗黑的主題。
不推薦的方案
公司之前就是這種方案，費(fèi)時(shí)費(fèi)力。
就是在項(xiàng)目的根目錄的 public 文件夾下創(chuàng)建一個(gè) dark.css 文件，所有的黑暗樣式在這個(gè)文件中。
切換主題的方法：
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 變量來展示兩種主題，方便簡潔。
因?yàn)楣臼鞘褂玫?less, 所以以下以 less 為例，但是 scss 和 css 是一樣的。
1.創(chuàng)建兩個(gè)主題的文件
在src文件夾下創(chuàng)建theme文件夾，在這個(gè)文件夾下創(chuàng)建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 引入這兩個(gè)文件
@import './theme/lightTheme.less'; @import './theme/darkTheme.less';
3.在入口處的tsx文件中，能獲取到的主題的方法中，調(diào)用切換主題的方法
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);
}
總結(jié)
在react項(xiàng)目中，通過這種修改css變量的方法來動(dòng)態(tài)的修改主題顏色。更加方便簡潔，只需要在實(shí)際的使用中只寫一個(gè)css變量就好。使得項(xiàng)目的樣式文件更好的維護(hù)。
以上就是React項(xiàng)目動(dòng)態(tài)修改主題顏色的方案的詳細(xì)內(nèi)容，更多關(guān)于React修改主題顏色的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了React實(shí)現(xiàn)pc端的彈出框效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
淺談redux以及react-redux簡單實(shí)現(xiàn)
這篇文章主要介紹了淺談redux以及react-redux簡單實(shí)現(xiàn)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08
在React中,編寫樣式主要有以下幾種方式,內(nèi)聯(lián)樣式,外部樣式表,CSS Modules,Styled Components,Emotion和Radium這六種樣式,下面我將針對上面提到的6種方式給出詳細(xì)的代碼示例,需要的朋友可以參考下2024-01-01
在?React?中使用?Context?API?實(shí)現(xiàn)跨組件通信的方法
在React中,ContextAPI是一個(gè)很有用的特性,可用于組件間的狀態(tài)共享,它允許跨組件傳遞數(shù)據(jù)而無需通過每個(gè)組件手動(dòng)傳遞props,本文給大家介紹在?React?中如何使用?Context?API?來實(shí)現(xiàn)跨組件的通信,感興趣的朋友一起看看吧2024-09-09
這篇文章主要介紹了淺談react-router@4.0 使用方法和源碼分析，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-06-06
所謂的生命周期就是指某個(gè)事物從開始到結(jié)束的各個(gè)階段,本文主要介紹了淺談react新舊生命周期鉤子,具有一定的參考價(jià)值,感興趣的可以了解一下2023-12-12
高階組件就是接受一個(gè)組件作為參數(shù)并返回一個(gè)新組件（功能增強(qiáng)的組件）的函數(shù)。這里需要注意高階組件是一個(gè)函數(shù)，并不是組件，這一點(diǎn)一定要注意，本文給大家分享React 高階組件HOC使用小結(jié)，一起看看吧2021-06-06
react時(shí)間分片實(shí)現(xiàn)流程詳解
實(shí)現(xiàn)react時(shí)間分片，主要內(nèi)容包括什么是時(shí)間分片、為什么需要時(shí)間分片、實(shí)現(xiàn)分片開啟 - 固定、實(shí)現(xiàn)分片中斷、重啟 - 連續(xù)、分片重啟、實(shí)現(xiàn)延遲執(zhí)行 - 有間隔、時(shí)間分片異步執(zhí)行方案的演進(jìn)、時(shí)間分片簡單實(shí)現(xiàn)、總結(jié)、基本概念、基礎(chǔ)應(yīng)用、原理機(jī)制和需要注意的事項(xiàng)等2022-11-11
一文詳解ReactNative狀態(tài)管理rematch使用
這篇文章主要為大家介紹了ReactNative狀態(tài)管理rematch使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
這篇文章主要介紹了模塊化react-router配置方法詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-06-06