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中不要引用它们中的任何一个。在标题中添加一个脚本标记，用于添加具有正确css的页面链接，如：

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

浏览器将加载css

Answer 2

为了避免 FOUC（无样式内容的 Flash），最好将内联脚本添加到 <head>。但是慢速网络连接可能会破坏我们的代码。因为在执行 $('body') 时，<body> 可能还不存在于 DOM 中。

我认为最好的解决方案是将 theme-dark 类添加到 <html>，这样就不可能选择不存在的元素。为了处理按钮的文本，我们可以使用 HTML 和 CSS 的一些技巧。

<html>
<head>
  <script>
    var currentTheme = localStorage.getItem('theme-mode');

    if (currentTheme !== null && currentTheme === 'theme-dark') {
      $('html').addClass('theme-dark');
    } else {
      $('html').removeClass('theme-dark');
      localStorage.removeItem('theme-mode');
    }
  </script>

  <style>
    html #btnChangeTheme span.light {
      display: inline;
    }
    html #btnChangeTheme span.dark {
      display: none;
    }

    html.theme-dark #btnChangeTheme span.light {
      display: none;
    }
    html.theme-dark #btnChangeTheme span.dark {
      display: inline;
    }
  </style>
</head>

<body>
  <div id="btnChangeTheme">
    <span class="dark">
      Dark Theme: On
    </span>
    <span class="light">
      Dark Theme: Off
    </span>
  </div>
</body>
</html>

在明暗主题之间切换

2 个答案: