我用自己的深色主题制作了一个深色模式按钮。主题由本地存储保存。另外，当我点击按钮时，它的图标不会改变(月亮对太阳(。但如果我重新加载页面，网站仍然处于黑暗模式，但按钮图标没有改变。如果你不明白我在说什么，这里有一个链接可以告诉你问题所在。codepen演示还有我的代码：
$(document).ready(function () {
$('body').toggleClass(localStorage.toggled);
$(".darkmode-btn").on("click", function(){
if (localStorage.toggled != 'dark') {
$('body').toggleClass('dark', true);
localStorage.toggled = "dark";
} else {
$('body').toggleClass('dark', false);
localStorage.toggled = "";
$(this).toggleClass("sun")
}
});
});.dark{background-color: #222;}
.darkmode-btn {
height: 60px;
line-height: 60px;
color: #fff;
text-align: center;
font-size: 20px;
margin-left: 20px;
z-index: 100;
cursor: pointer;
background-color: #08f;
}
.darkmode-btn:before,.darkmode-btn.moon:before,.darkmode-btn.sun:before {
font-family: "fontawesome";
}
.darkmode-btn:before {
content: 'f186';
}
.darkmode-btn.moon:before {
content: 'f186';
}
.darkmode-btn.sun:before {
content: 'f185';
}<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="darkmode-btn">
</div>
</body>$(".darkmode-btn").on("click", function(){
if (localStorage.toggled != 'dark') {
$('body').toggleClass('dark', true);
localStorage.toggled = "dark";
$(this).addClass("moon").removeClass("sun")
} else {
$('body').toggleClass('dark', false);
localStorage.toggled = "";
//$(this).toggleClass("sun").removeClass("sun")
$(this).addClass("sun").removeClass("moon")
}
});
});
这应该对你有帮助。