提示：以下是本篇文章正文內(nèi)容，主要描述使用 css/less 動態(tài)更換主題色（換膚功能）

前言

提示：使用 css/less 動態(tài)更換主題色（換膚功能），方法共通，不限制技術(shù)棧：

其實在日常項目開發(fā)中經(jīng)常會遇到有些用戶想要一些自定義的的主題色來滿足不同的視覺需求，這時候就需要通過動態(tài)更改主題色來實現(xiàn)預(yù)期的效果；

一、CSS中原生變量“--”和var()

示例：開始之前先稍微了解一下變量“--”和var()，在動態(tài)改變主題色中會經(jīng)常用到這兩個變量

@表示我們定義的的變量名稱

css中原生的變量定義語法是：--@

例如定義一個邊框顏色變量：?--border-color: #D9EEE2;

css中變量使用語法是：var(--@)

例如使用定義的邊框顏色變量：border: 0.1rem solid var(--border-color);

二、使用步驟

1、自定義樣式變量，定義css方法（可以定義多個css樣式）

要注意的是不管定義了幾個主題色，都要確保定義的變量名保持一致。

// theme.less

/*
 *這里為我們自定義主題色，可以根據(jù)自己的需求定義多組樣式
 *
*/

// 主題類型定義
:root {
  // 背景色
  --bg-color: #D9EEE2;
  --border-color: #D9EEE2;
  // 很多圖標(biāo)、border都用這個顏色
  --icon-color: #108372;
  // 按鈕背景色
  --button-bg-color: var(--dominant-color);
  // 選中字體和圖表顏色
  --active-font-color: #037181;
  // hover字體和圖表顏色
  --hover-font-color: var(--dominant-color);
  // logo
  --logo: url('你的圖片路徑')  no-repeat center center;

 ...
 ...
 ...
}


/* 這里假設(shè)為我們自定義的主題  */
:root[theme = 'defined'] {
  // 背景色
  --bg-color: pink;
  --border-color: pink;
  // 很多圖標(biāo)、border都用這個顏色
  --icon-color: pink;
  // 按鈕背景色
  --button-bg-color: pink;
  // 選中字體和圖表顏色
  --active-font-color: pink;
  // hover字體和圖表顏色
  --hover-font-color: var(--dominant-color);
  // logo
  --logo: url('你的圖片路徑')  no-repeat center center;

 ...
 ...
 ...
}

2、使用已定義的變量

使用其實很簡單，只要根據(jù)主題色動態(tài)改變的地方通過var()引用已經(jīng)定義的樣式變量就可以；

/*
 *  這里舉個簡單的例子 child.less(這里就是項目中引用的css文件)
 */

.root{

  .main{
    background：var(--bg-color);
    border:1px solid var(--border-color);
    
    ...
    
  }

    ...
}

3、用戶操作，切換對應(yīng)的主題

通過設(shè)置屬性自動匹配選擇顏色主題，會修改對應(yīng)的樣式；

1）、首先你跟據(jù)需求在特定位置定義好主題切換功能鍵；

這里是定義的結(jié)構(gòu)體，僅作參考（你可以根據(jù)自己項目的框架使用對應(yīng)的組件都是ok的，沒啥特殊要求）

? ? <div className={styles.root}>
? ? ? <Dropdown overlay={menu} placement="bottomCenter">
? ? ? ? <div>
? ? ? ? ? <i className="iconfont icon-them" />
? ? ? ? ? <span>主題</span>
? ? ? ? </div>
? ? ? </Dropdown>
? ? </div>

這里是菜單的主題曲部分，切換全靠它了；

// 這里的items就是你要定義的主題的種類，沒有key代表一個主題色標(biāo)識

? const menu = (
? ? <Menu
? ? ? selectable
? ? ? selectedKeys={theme}
? ? ? onClick={setThemeFun}
? ? ? items={[
? ? ? ? {
? ? ? ? ? label: '默認(rèn)色',
? ? ? ? ? key: 'default',
? ? ? ? },
? ? ? ? {
? ? ? ? ? label: '自定義',
? ? ? ? ? key: 'defined',
? ? ? ? },
? ? ? ]}
? ? />
? );

2）、然后通過對應(yīng)的方法設(shè)置對應(yīng)的的主題色；

/*主題色選擇后的回調(diào)*/
const setThemeFun =(e)=>{
// 這里其實就是將主題表示存在state里，在menu中展示，  默認(rèn) const [theme, setTheme] = useState(['default']);
 setTheme([e.key]); 
 //通過修改屬性，會用對應(yīng)的樣式
 document.documentElement.setAttribute('theme', e.key);
}

這里建議把切換主題色封裝到一個單獨的組件，便于維護(hù)處理
切記：初始化時要個給一個默認(rèn)值，這里就不做過多贅述了
4、特殊處理
1）本地存取主題色

其實用戶沒有的要求的話，一般都是主題的存儲本地，可以通過localStorage實現(xiàn)

// 在你需要的時候存在來
localStorage.setItem('theme', e.key);

//特定情況取出來使用就可以了
const defaultTheme = localStorage.getItem('theme');
 if (defaultTheme) {
      setTheme([defaultTheme]);
      document.documentElement.setAttribute('theme', defaultTheme);
 } 

注：本地存儲小科普

生存期

localStorage理論上來說是永久有效的，即不主動清空的話就不會消失，即使保存的數(shù)據(jù)超出了瀏覽器所規(guī)定的大小，也不會把舊數(shù)據(jù)清空而只會報錯。但需要注意的是，在移動設(shè)備上的瀏覽器或各Native App用到的WebView里，localStorage都是不可靠的，可能會因為各種原因（比如說退出App、網(wǎng)絡(luò)切換、內(nèi)存不足等原因）被清空。
sessionStorage的生存期顧名思義，類似于session，只要關(guān)閉瀏覽器（也包括瀏覽器的標(biāo)簽頁），就會被清空。由于sessionStorage的生存期太短，因此應(yīng)用場景很有限，但從另一方面來看，不容易出現(xiàn)異常情況，比較可靠。

2）接口存取主題色

這個就需要跟產(chǎn)品和后端確認(rèn)好方案，是否綁定用戶或者設(shè)備，通過對應(yīng)的接口實現(xiàn)主題色存取，原理和上述本地存儲大差不差，具體根據(jù)需求走就行了

總結(jié)

以上是使用純CSS控件切換主題顏色或通過單擊更改背景顏色，這個個人感覺可能前期樣式定義稍微繁瑣一點，其他都還可，相對來說易上手方便操作，關(guān)鍵是簡單，不過要注意以下幾點：
1、需求確定好是否需要主題色切換；
2、需要的話對一些字體圖標(biāo)的定義要跟ui和pd溝通好，構(gòu)建好對應(yīng)的iconfont工程，方便使用，因為你要清楚如果單純使用圖片，那切換主題色，變量定義就會很繁瑣，一句話怎么方便怎么好維護(hù)就怎么來；
3、一定要確保主題的定義的變量保持一致……
……

暫且就這么多，有什么好的方法后期再更新上來，希望對你有所幫助文章來源地址http://www.zghlxwxcb.cn/news/detail-552786.html

到了這里，關(guān)于前端實現(xiàn)動態(tài)切換主題色-使用 css/less 動態(tài)更換主題顏色（換膚功能）或通過單擊更改背景顏色的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！