在明暗主题之间切换

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>