React website Skin changing function

I. Objectives

Provide several theme colors to the user selection, and then change the theme color according to the user's choice;

Two. Principle of implementation

1. Prepare style files with different theme colors;
2. Record the user's selection in the local cache;
3. Each time you enter the application, read the cache, according to the cached information to determine which style file to load;

Three. Concrete realization ideas 1. Prepare four style files for different theme colors:

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

2. Provide the user with the HTML of the 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)  //将最新的主题色名称更新到本地缓存中        this.loadingToast(‘主题色更换中..‘)      location.reload()       //主题色更改后刷新页面  }```

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

   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){});

Here met a pit, just at the beginning of the time I was directly with require ( ./static/css/${aa}.scss ), the results do not know why the four style files are loaded, change to the top that there is no problem, have time to study the require;

Four. Other

Sell a small ad: I have a small program, you can scan the barcode of the commodity to leave a message, others sweep the same commodity bar code can see your message;
Let the barcode become your postman ~ ~ ~
Welcome to the sweep code experience:

React website Skin changing function