I. objectives

Several theme colors are provided for users to choose, and then the theme color of the application is changed according to the user's choice;

2, Implementation principle

1. Prepare style files of different theme colors;
2. Record the user's selection in the local cache;
3. When entering the application, read the cache, and judge which style file to load according to the cache information;

3, Specific implementation ideas

1. Prepare four style files corresponding to different theme colors:

 ![](https://images2018.cnblogs.com/blog/1178432/201808/1178432-20180813142303707-1847250400.png)

2. Provide users with html of theme color selection on the homepage:

 ```
   <span style={{color:"#0097e5"}} >
               <i  className={`skinTag skinTag0 ${this.state.skinIndex==0?'active':''}`}  onClick={this.toggleSkin.bind(this,0)}></i>
               <i  className={`skinTag skinTag1 ${this.state.skinIndex==1?'active':''}`}  onClick={this.toggleSkin.bind(this,1)}></i>
               <i  className={`skinTag skinTag2 ${this.state.skinIndex==2?'active':''}`}  onClick={this.toggleSkin.bind(this,2)}></i>
               <i  className={`skinTag skinTag3 ${this.state.skinIndex==3?'active':''}`}  onClick={this.toggleSkin.bind(this,3)}></i>
    </span>

   toggleSkin(index){
      setItem('skin',index)  //Update the latest theme color name to the local cache  
      this.loadingToast('Theme color changing..')
      location.reload()       //Refresh page after theme color changes
  }

```

3. After selecting the theme color, determine which theme color style to load in the entry file according to the cache:

   var aa=''
   if(getItem('skin')=='0'){
        aa='app'
   }else if(getItem('skin')=='1'){
       aa='app-skin1'
   }else if(getItem('skin')=='2'){
       aa='app-skin2'
   }else if(getItem('skin')=='3'){
        aa='app-skin3'
   }else{
       aa='app'
   }
  require([`./static/css/${aa}.scss`], function(list){});

I met a pit here. At the beginning, I used require(./static/css/${aa}.scss) directly. As a result, I don't know why I loaded all four style files. It's OK to change to the one above. I'll study require again when I have time;

Four. Other

Sell a small advertisement: I have a small program, which can scan the bar code of goods to leave a message; others can scan the bar code of the same goods to see your message;
Make barcode your postman~~~~
Welcome to the code scanning experience: