demo

Framework selection: create-React -app + mobx + WebPack5 + ANTDesign

instructions

  • Due to the co-existence of multiple topics in the company recently, it is necessary to implement the function of online topic switching. Therefore, this paper mainly describes the topic switching based on create-React-app.
  • For CSS switching, we have considered the differentiation scheme of loading CSS files on the page according to the theme selected by the user. However, considering that this form needs to be reload during the page switching, because htmlDOM is a combination of CSS and JS, the user experience is not very good.
  • Less switching simply introduces all the Less files to do the switching, which cannot realize the dynamic loading of CSS, and will increase the loading of useless CSS files
  • Finally, the third-party plug-in ANTD-theme-generator is obtained through comparison and query

Function implementation principle: Use modifyVars of less to complete antD theme variable replacement.

The installationantd-theme-generator

Disadvantages: It needs to work with LESS V2.7. x and is incompatible with IE.

cnpm install antd-theme-generator -S
Copy the code

Add a theme switch filecolor.js

Add the file color.js to the root directory and add the configuration:

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: [// themeVariables that need to be dynamically switched'@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(less => {console.log())'Theme generated successfully');
})
.catch(error => {
  console.log('Error', error);
});

Copy the code

Add the less file to the CSS file

  • addvariables.lessFile: 
    @import "~antd/lib/style/themes/default.less"; @primary-color: // add a variable to the antd file.#1DA57A;
@link-color: #1DA57A;
@btn-primary-bg:#1DA57A;

Copy the code

Add global LESS configuration to HTML file

  • index.htmlAdd global tolessVariables are configured so thatlessthemodifyVarsMethod can be used globally and overridden when switching topicsdefault.lessVariables in: 
    <! <link rel= <link rel= <link rel= <link rel= <link rel= <link rel= <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>
Copy the code

Modified at project startup

  • Modify the project run configurationpackage.json, the project runs at the same time to complete the configuration of the page color file 
    "scripts": {
  "start": "node color && node scripts/start.js"."build": "node color && node scripts/build.js"."test": " node color && node scripts/test.js"
},
Copy the code

Page calls methods to switch topics

  • Page click on the topic to switch the configuration, the reason for writing this is because I configured the variable is different:
 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('Theme switch successful'}). Catch (error => {message.error(' theme switch failed '); console.log(error) });Copy the code

Since the new styles in the later configuration need to follow the theme configuration can choose to use unified variables, so when setting variables, you can addvar(--PC)Global variable Settings for