我希望为用户提供切换主题的功能,并且我有2个单独的样式表,每个主题1个。
我做这样的事情来切换它
toggleTheme() {
if (usingWhiteTheme) {
$('link[href="white.css"]').attr('href', 'dark.css');
usingWhiteTheme = false;
} else {
$('link[href="dark.css"]').attr('href', 'white.css');
usingWhiteTheme = true;
}
}
但是,当它从服务器加载文件时,第一次会导致可怕的闪烁。之后,它会切换而不会闪烁。
如何预加载此样式,然后从缓存中加载它?我应该使用缓存还是关闭缓存的用户更可靠?我可以把它塞进本地存储吗?
最佳答案
这是我在Dojo工具箱中观察到的方式。
theme1
document.body.className = "theme1";
对于theme2
document.body.className = "theme2";
您的CSS应该像下面这样模块化
在theme1.css中
.theme1 div{
background-color : green
}
在theme2.css中
.theme2 div{
background-color : yellow;
}