光明与黑暗的主题之间切换

好了，所以现在我存储用户当前使用localStorage和主题页面加载时我做了检查，并表示无论是浅色或深色主题：光明与黑暗的主题之间切换

var currentTheme = localStorage.getItem('theme-mode'); 

if (currentTheme !== null && currentTheme === 'theme-dark') { 
    $('body').addClass('theme-dark'); 
    $('#btnChangeTheme').html('Dark Theme: On'); 
} else { 
    $('body').removeClass('theme-dark'); 
    localStorage.removeItem('theme-mode'); 
    $('#btnChangeTheme').html('Dark Theme: Off'); 
}

上面的代码的工作原理是如何计算的，但我面临的问题是，当用户选择黑暗的主题时，他们在页面加载时仍然可以看到轻微的主题。有谁知道我该如何解决这个问题，或者如果我应该尝试一些不同的东西？

来源

2017-09-04 Sonu

可以创建为同??它是一个普拉克很难注意到你发布的代码究竟是什么问题...... –

这个问题可能是因为'theme-dark'可能没有添加到页面上。除了将主题细节存储在客户端之外，您可以将其保存在服务器上，并使用正确的主题呈现页面。或者，显示一个加载屏幕，直到你的JS阅读了主题并将其应用到页面。 – Nisarg

@NisargShah您是否认为在标记中添加那段代码可以工作，而不是将其保存到服务器或显示加载屏幕？ – Sonu

而不是使用类来更改主题，您可以使用完全不同的CSS。

在服务器上保存2个css文件：dark.css，light.css。

在index.html中不要引用它们中的任何一个。添加脚本标签中，增加了一个链接到页面的正确的CSS头，是这样的：

var link = document.createElement('link'); 
    link.rel = 'stylesheet'; 
    link.href = 'css/dark.css'; 
    document.head.appendChild(link);

，浏览器将加载CSS

来源

2017-09-04 07:14:23 Tomer

js在页面的顶部，页面在它运行之前不会渲染（这是非常快的），然后它将加载正确的CSS，所以没有明暗的主题切换，只需加载正确的主题 – Tomer

Yup ，我知道了！ :)它可能会使页面变慢一点。我倾向于喜欢服务器端代码这样的事情... – Nisarg

光明与黑暗的主题之间切换

回答

相关问题