我希望为用户提供切换主题的功能,并且我有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;
 }

09-20 16:33