react實現antd線上主題動態切換功能

demo

框架選擇： create-react-app + mobx + webpack5 + antdesign

說明

• 因爲最近公司有多個主題的共存性，因此須要實現線上主題切換的功能，因此本文主要描述的是基於create-react-app之上的主題切換。
• CSS切換 有考慮過根據用戶選擇的主題在切換的時候選擇加載頁面css文件的區分方案，可是考慮到這種形式須要在頁面切換的時候去reload，由於htmlDOM是在css與JS的結合產物，用戶體驗不是很好。
• Less切換 單純引入全部的less文件去作切換，這樣不能實現css的動態加載了，會增長無用css文件的加載
• 最後經過比較及查詢，獲取到第三方插件：antd-theme-generator

功能實現原則：使用 less 的 modifyVars 完成 antd 的主題變量替換。

安裝 antd-theme-generator

缺點： 須要配合 LESS v2.7.x 使用，不兼容IE。

cnpm install antd-theme-generator -S
複製代碼

添加主題切換文件 color.js

根目錄下添加文件color.js，添加配置內容：

const path = require('path');
const { generateTheme,  } = require('antd-theme-generator');

const options = {
  stylesDir: path.join(__dirname, './src/css'),
  antDir: path.join(__dirname, './node_modules/antd'),
  varFile: path.join(__dirname, './src/css/variables.less'),
  mainLessFile: path.join(__dirname, './src/css/index.less'),
  themeVariables: [ //須要動態切換的主題變量
    '@primary-color',
    '@secondary-color',
    '@text-color',
    '@text-color-secondary',
    '@heading-color',
    '@layout-body-background'
  ],
  indexFileName: 'index.html',
  outputFilePath: path.join(__dirname, './public/color.less'), //頁面引入的主題變量文件
}

generateTheme(options).then(less => {
  console.log('Theme generated successfully');
})
.catch(error => {
  console.log('Error', error);
});

複製代碼

CSS 文件下添加less文件

• 添加 variables.less 文件：

  @import "~antd/lib/style/themes/default.less"; //引入antd的變量文件，實現變量的覆蓋
  @primary-color: #1DA57A;
  @link-color: #1DA57A;
  @btn-primary-bg:#1DA57A;
  
  複製代碼

HTML文件中加入全局less配置

• index.html中加入全局less變量配置，從而使less的modifyVars方法能夠全局使用，切換主題時覆蓋default.less中的變量：

  <!-- 使用自動生成的color.less，主要路徑與index.html文件同級 -->
  <link rel="stylesheet/less" type="text/css" href="%PUBLIC_URL%/color.less" /> 
  <script>
    window.less = {
      async: false,
      env: 'production'
    };
  </script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>
  複製代碼

項目啓動處修改

• 修改項目運行配置package.json，項目運行的同時完成頁面color文件的配置

  "scripts": {
    "start": "node color && node scripts/start.js",
    "build": "node color && node scripts/build.js",
    "test": " node color && node scripts/test.js"
  },
  複製代碼

頁面調用方法切換主題

• 頁面點擊主題切換配置，這樣寫的緣故是由於我配置的變量不一樣：

window.less.modifyVars(
  {
    '@primary-color': '#aaa',
    '@menu-dark-item-active-bg':'#aaa',
    '@link-color': '#aaa',
    '@text-color':'#aaa',
    '@btn-primary-bg': '#aaa',
  }
)
.then(() => { 
  message.success('主題切換成功')
})
.catch(error => {
  message.error(`主題切換失敗`);
  console.log(error)
});
複製代碼

因爲以後的配置中新增的樣式須要遵循主題配置的能夠選擇使用統一變量，因此變量設置的時候，能夠添加var(--PC)的全局變量設置