How does reac implement the function of changing skin color?

The content of this article is about how to realize the function of changing skin color in Reac. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1. Goal

Provide several theme colors for users to choose, and then change the theme color of the application according to the user’s choice;

##2. Implementation principle

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 When, read the cache and determine which style file to load based on the cached 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)

Copy after login

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

 "
   <span>
               <i></i>
               <i></i>
               <i></i>
               <i></i>
    </span>

   toggleSkin(index){
      setItem('skin',index)  //将最新的主题色名称更新到本地缓存中  
      this.loadingToast('主题色更换中..')
      location.reload()       //主题色更改后刷新页面
  }

"

Copy after login

3. After the theme color is selected, the entry file determines which theme color style to load based on 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){});

Copy after login

I encountered a pitfall here. At the beginning, I directly used require(

./static/css/${aa}.scss);, but I don’t know why the four styles were changed. The files are all loaded. There will be no problem if you change it to the one above. Let’s study the requirement again when you have time;

Related recommendations:

What are the methods in jQuery? Commonly used ones in jQuery Method (with code)

#What is a js closure? Understanding js closures (with code)

The above is the detailed content of How does reac implement the function of changing skin color?. For more information, please follow other related articles on the PHP Chinese website!