javascript - 在浅色和深色主题之间切换

Question

好的，现在我正在将用户当前使用的主题存储在 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');
}

上面的代码按预期工作，但我面临的问题是，当用户选择深色主题时，他们仍然会在页面加载时瞬间看到浅色主题。有谁知道我该如何解决这个问题，或者我是否应该尝试不同的方法？

Answer 1

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

在服务器上有 2 个 css 文件:dark.css、light.css。

在 index.html 中不要引用它们中的任何一个。在 header 中添加脚本标记，使用正确的 css 添加指向页面的链接，例如:

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

浏览器会加载css