使用jQuery轻松实现黑暗模式-CSDN博客

本文链接：https://blog.csdn.net/China_I_Love_You/article/details/126099136

本文介绍了如何使用jQuery为博客添加黑暗模式功能。通过切换light.css和dark.css样式文件，结合localStorage保存用户主题选择，实现日间和夜间模式的无缝切换。此外，还添加了过渡动画，提升用户体验。

摘要由CSDN通过智能技术生成

前言

前些天晚上看博客比较频繁，白色的背景看起来非常刺眼，所以就想着给博客做一个黑暗模式的功能，主要思路为当我们点击切换按钮后使用jquery将对应样式替换掉。

一、准备两个Css文件

light.css

body {
	background-color: white
}
.content p{
	color: black
}

dark.css

body {
	background-color: #282923
}

.content p{
	color: grey
}

二、引入对应css样式

我们先引入 light.css 样式，这是日间模式

<!DOCTYPE html>
<html>
<head>
	<title>黑暗模式</title>
	<!-- 引入light.css样式 -->
	<link rel="stylesheet" href="./light.css" id="theme-style">
</head>
<body>

<!-- 内容 -->
<div class="content">
	<p>我是p标签</p>
	<button onclick="switchTheme()">切换主题</button>
</div>

</body>
</html>

三、切换模式

点击按钮后，使用jQuery获取当前的 href 值，然后重新赋值即可，如果当前是日间模式那么我们就将 href 设置为 dark.css。


<!-- 引入jQuery -->
<script src="https://www.blogry.cn/js/jq.js"></script>

<!-- 切换主题 -->
<script type="text/javascript">
	
	        function switchTheme() {

            var href = $("#theme-style").attr("href");

            if (href == "./dark.css") {
                $("#theme-style").attr("href","./light.css")
            } else {
                $("#theme-style").attr("href","./dark.css")
            }
        }

</script>

这样功能虽然实现了，我们每次进入都需要重新切换，有没有办法可以让他记住我们的操作呢？当然是有的，接下来我们就需要用到 localStorage 啦！

localstorage是web上的一种本地存储技术。
localstorage是永远存在的本地存储，除非用户自行去删除相关的数据，否则会永远存在。

四、保存主题状态

当我们每次切换主题后，可以通过 localStorage.setItem("theme","light") 存储一个标识，在重新打开页面时通过localStorage.getItem("theme") 判断是 dark 还是 light，然后将 href 添加对应的样式即可。

<!-- 切换主题 -->
<script type="text/javascript">
	
       //保存状态
        if (localStorage.getItem("theme") == "dark") {
            $("#theme-style").attr("href","./dark.css")
        }
	
        function switchTheme() {

        var href = $("#theme-style").attr("href");

        if (href == "./dark.css") {
            $("#theme-style").attr("href","./light.css")
            localStorage.setItem("theme","dark");
        } else {
            $("#theme-style").attr("href","./dark.css")
            localStorage.setItem("theme","light");
        }
    }

</script>

五、过渡动画

大体功能就已经实现啦。但是在我们切换模式的时候没有任何过渡效果，显得非常生硬，我们可以适当添加一些过渡动画。

添加transition样式

/* dark */
body {
	background-color: #282923;
	transition: 0.5s;

}

/* light */
body {
	background-color: white;
     transition: 0.5s;
}

效果对比

请添加图片描述