javascript - 保存暗模式状态 html/css/js

Question

需要知道如何保存暗模式的状态？我在这里得到了这个js代码:

$('#switch').on('click', () => {
  if ($('#switch').prop('checked')) {
    $('body').addClass('dark');
    $('main').addClass('darklight');
    $('footer').addClass('darklight');
    $('.topnav').addClass('darklight');
    $('.lightm').addClass('darklight');
    $('section').addClass('darklight');
    $('button').addClass('button');
    $('.links').addClass('llinks');
  } else {
    $('body').removeClass('dark');
    $('body').addClass('light');
    $('main').removeClass('darklight');
    $('main').addClass('light');
    $('footer').removeClass('darklight');
    $('footer').addClass('light');
    $('.topnav').removeClass('darklight');
    $('.topnav').addClass('light');
    $('.lightm').removeClass('darklight');
    $('.lightm').addClass('light');
    $('section').removeClass('darklight');
    $('section').addClass('light');
    $('button').removeClass('button');
    $('button').addClass('dbutton');
    $('.links').removeClass('llinks');
    $('.links').addClass('dlinks');
  }
})

这是 Codepen 中的代码，其中包含 html 和 css 内容:

https://codepen.io/TRGYT/pen/eYmNBPo

有人知道如何实现这一目标吗？我创建的其他网站也可以保存这种暗模式状态吗？

请在此处找到该网站:

https://15min.netlify.com

提前对错误的代码表示歉意，我是初学者......

Answer 1

欢迎来到编码世界。在我们讨论这个问题之前，了解一下 DRY 原则(不要重复自己)会对你有所帮助。您的代码(大约 20 行)可以轻松地缩写为四行。例如:

$("#switch").on("click", () => {
  $("body").toggleClass("dark"));
  // Local storage. Will get to this later
});

然后，您可以更改 CSS 以响应 body 标记是否具有 dark 类。干净多了。

<小时/>

至于保存深色模式的状态:使用window.localStorage，如下所示:

if (window.localStorage) {
  const darkMode = window.localStorage.getItem("darkMode");
  if (darkMode) {
    $("body").addClass("dark");
  } else {
    $("body").removeClass("dark");
  }
}