I want to allow my users to decide which color theme they prefer the most therefore written different css files for each theme. However, I found it not working pretty smoothly. When I use JS to switch from one theme to another, the original css missed for some time while loading the new one. How can I transit from one theme to another smoothly? There is some sample code:
if (!(localStorage['color-choice'] === element)){
localStorage['color-choice'] = element
if(element === 'black'){
$('#style-homepage').attr('href', '/static/sources/css/index/dark.css')
}else if(element === 'pink'){
$('#style-homepage').attr('href', '/static/sources/css/index/style.css')
}else if(element === 'white'){
$('#style-homepage').attr('href', '/static/sources/css/index/white.css')
}
}