Question

我希望让用户能够切换主题，我有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;
        }
    }

然而，当它从服务器加载文件时，它会第一次引起可怕的闪烁。之后，它会在没有闪烁的情况下切换。

如何预加载此样式然后从缓存中加载？我是否应该使用缓存，或者对于关闭缓存的用户来说是否更可靠？我可以把它塞进本地存储吗？

Answer 1

这是我在Dojo工具包中观察到的方式。

THEME1

 document.body.className = "theme1";

for theme2

 document.body.className = "theme2";

您的CSS应该是模块化的，如下所示

在theme1.css中

 .theme1 div{
     background-color : green
 }

在theme2.css

中

 .theme2 div{
     background-color : yellow;
 }

Answer 2

穷人解决方案是在页面底部放置一个隐藏的iframe，指向页面...其中包括所有css文件和所有其他想要缓存的静态文件。由你来决定如何只发生一次。

Answer 3

为了我的目的，我能够在没有预加载的情况下绕过闪烁。我使用预制的bootstrap模板，它为每个主题附带一个不同的css文件。所以我没有预加载（我试过并且由于某种原因仍然保持闪烁），而是我用它创建了一个新的.less或.scss文件：

 body.white-theme {
     //pasted the entire theme's css here
 }

这只是在编译的css中用body.white-theme包装主题中的每个样式。

现在我可以安全地同时加载两个样式表表并切换类。

将css文件预加载到缓存中以进行主题切换

3 个答案: