保存暗模式状态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");
}
}

Answer 2

我找到了一种穿衣服的方法。我得到的一个答案帮助我理解了它，但我懒得实现它。但还是谢谢你！

function activateDarkMode() {
$('body').addClass('dark').removeClass('light');
$('main').addClass('darklight').removeClass('light');
$('footer').addClass('darklight').removeClass('light');
$('.topnav').addClass('darklight').removeClass('light');
$('.lightm').addClass('darklight').removeClass('light');
$('section').addClass('darklight').removeClass('light');
$('button').addClass('button').removeClass('button');
$('.links').addClass('llinks').removeClass('dlinks');
}
function deactivateDarkMode() {
$('body').removeClass('dark').addClass('light');
$('main').removeClass('darklight').addClass('light');
$('footer').removeClass('darklight').addClass('light');
$('.topnav').removeClass('darklight').addClass('light');
$('.lightm').removeClass('darklight').addClass('light');
$('section').removeClass('darklight').addClass('light');
$('button').removeClass('button').addClass('dbutton');
$('.links').removeClass('llinks').addClass('dlinks');
}
$('#switch').on('click', () => {
if ($('#switch').prop('checked')) {
activateDarkMode();
localStorage.setItem("darkmode", "enabled")
} else {
deactivateDarkMode();
localStorage.setItem("darkmode", "disabled")
}
});
let mode;
mode = localStorage.getItem("darkmode");
if (mode == 'enabled') {
activateDarkMode();
$('#switch').prop('checked', 'checked');
}

我所做的只是把addClass和removeClass放进一个function。他还添加了localStorage，并让 localStorage 位于名为mode的变量中。创建这些东西后，我将它们放入if中以检查暗模式是否已打开。