React項(xiàng)目動(dòng)態(tài)修改主題顏色的方案

更新時(shí)間：2025年01月07日 09:50:54 作者：月月鳥pt

這篇文章主要介紹了React項(xiàng)目動(dòng)態(tài)修改主題顏色的方案,文中通過代碼示例講解的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下

背景

因?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)文章

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à)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-05-05
React高級概念之Context用法詳解
在React應(yīng)用中，為了讓數(shù)據(jù)在組件間共享，常見的方式是讓它們以props的形式自頂向下傳遞，如果數(shù)據(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中的受控組件和非受控組件
具體來說這是一種react非受控組件，其狀態(tài)是在input的react內(nèi)部控制，不受調(diào)用者控制?？梢允褂檬芸亟M件來實(shí)現(xiàn)。下面就說說這個(gè)React中的受控組件與非受控組件的相關(guān)知識(shí)，感興趣的朋友一起看看吧
2021-05-05
react-three/postprocessing庫的參數(shù)中文含義使用解析
這篇文章主要介紹了react-three/postprocessing庫的參數(shù)中文含義使用總結(jié),本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-05-05
react-native fetch的具體使用方法
本篇文章主要介紹了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)異步請求
這篇文章主要為大家詳細(xì)介紹了如何使用React?Redux實(shí)現(xiàn)異步請求,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的小伙伴可以參考一下
2025-01-01