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