Reactive sample code for removal function


Provides several subject color to the user selection, and then changes the subject color of the application according to the user’s selection;

react实现换肤功能的示例代码

II. Principles

1. Prepare different types of colorful style files;


2. Select the user Record in the local cache;


3. Read the cache each time, determine which style file to load according to the cache;

three Distinguished Idea 1. Prepare four style files corresponding to different themes:


! [] (https://images2018.jb51.net/blog/1178432/201808/1178432-20180813142303707-1847250400.png)
 2 to provide users with theme color selection HTML:  
“ “

Toggleskin (INDEX) {setIn (‘Skin’, INDEX) // Update the latest theme color name to the local cache THISLOADOAST (‘theme color replacement ..’) location.Reload () // Theme color change After refreshing the new page} “ `
  3. After the title is selected, the entrance file is determined based on the cache to determine which subject color   VAR AA = '' IF (GetITEM ('Skin') == '0') {aa = 'app'} Else IF (GetItem ('skin') == '1') {aa = 'app-skin1'} else if ('Skin') == '2') {aa = 'App-Skin2'} else f (GetItem (' Skin ') ==' 3 ') {aa =' app-skin3 '} else {aa =' app '} Require ([`./static/css / $ {aa} .scss`], function (list) { });     I met a pit, I used to use Require (./ static / CSS / $ {aa} .scss); The result is not known why the four style files are loaded. It is no problem to change to the above. If you have time, you will study it;   The above is the full content of this article, I hope to learn from everyone. Help, I hope everyone will support Tumi Clouds.   
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment