[less] Use modifyVars of less to realize react variable switching theme background color

step one

There is an entry file index.html in the public folder, and import the less file in the same folder in the entry file

<link rel="stylesheet/less" type="text/css" href="%PUBLIC_URL%/theme.less" />

Note: Use linktags, rel is stylesheet/less, type is text/css, href is%PUBLIC_URL%/theme.less

step two

Create a theme.less file in the public folder and declare the less variable in the file, as follows

@--themeColor: #fff000;
.customThemeColor {
    
    
  background: @--themeColor;
  border: 1px solid @--themeColor;
}

step three

Add the public style color where the theme color is used to switch, as follows

<button className={
    
    `${
      
      style.btnStyl} customThemeColor`}}>

step four

Import less in the react file that switches the theme

import less from 'less'

When clicking to switch the theme triggers a click event, modify @–colorthe value of the less variable ( ), where value is the color value of the switch.

 less.modifyVars({
    
    '@--themeColor': value})