光明與黑暗的主題之間切換

好了，所以現在我存儲用戶當前使用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

光明與黑暗的主題之間切換

回答

相關問題