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 變量來展示兩種主題，方便簡(jiǎn)潔。
因?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)的修改主題顏色。更加方便簡(jiǎn)潔，只需要在實(shí)際的使用中只寫一個(gè)css變量就好。使得項(xiàng)目的樣式文件更好的維護(hù)。
以上就是React項(xiàng)目動(dòng)態(tài)修改主題顏色的方案的詳細(xì)內(nèi)容，更多關(guān)于React修改主題顏色的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
React動(dòng)畫實(shí)現(xiàn)方案Framer Motion讓頁面自己動(dòng)起來
這篇文章主要為大家介紹了React動(dòng)畫實(shí)現(xiàn)方案Framer Motion讓頁面自己動(dòng)起來，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
react頁面中存在多個(gè)input時(shí)巧妙設(shè)置value屬性方式
這篇文章主要介紹了react頁面中存在多個(gè)input時(shí)巧妙設(shè)置value屬性方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
在React應(yīng)用中，為了讓數(shù)據(jù)在組件間共享，常見的方式是讓它們以props的形式自頂向下傳遞，如果數(shù)據(jù)要在組件樹不同層級(jí)共享，那么這些數(shù)據(jù)必須逐層傳遞直到目的地，Context如同管道，它將數(shù)據(jù)從入口直接傳遞到出口，使用Context能避免“prop-drilling”2023-06-06
詳解React-Native解決鍵盤遮擋問題（Keyboard遮擋問題）
本篇文章主要介紹了React-Native解決鍵盤遮擋問題（Keyboard遮擋問題），具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
React項(xiàng)目開發(fā)中函數(shù)組件與函數(shù)式編程關(guān)系
函數(shù)組件和函數(shù)式編程究竟是什么關(guān)系呢？本文會(huì)圍繞這個(gè)話題展開講解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11
具體來說這是一種react非受控組件，其狀態(tài)是在input的react內(nèi)部控制，不受調(diào)用者控制?？梢允褂檬芸亟M件來實(shí)現(xiàn)。下面就說說這個(gè)React中的受控組件與非受控組件的相關(guān)知識(shí)，感興趣的朋友一起看看吧2021-05-05
react-three/postprocessing庫(kù)的參數(shù)中文含義使用解析
這篇文章主要介紹了react-three/postprocessing庫(kù)的參數(shù)中文含義使用總結(jié),本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-05-05
本篇文章主要介紹了react-native fetch的具體使用方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11
關(guān)于antd tree和父子組件之間的傳值問題(react 總結(jié))
這篇文章主要介紹了關(guān)于antd tree 和父子組件之間的傳值問題，是小編給大家總結(jié)的一些react知識(shí)點(diǎn)，本文通過一個(gè)項(xiàng)目需求實(shí)例代碼詳解給大家介紹的非常詳細(xì)，需要的朋友可以參考下2021-06-06
詳解如何使用React?Redux實(shí)現(xiàn)異步請(qǐng)求
這篇文章主要為大家詳細(xì)介紹了如何使用React?Redux實(shí)現(xiàn)異步請(qǐng)求,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的小伙伴可以參考一下2025-01-01