jQuery实现黑暗模式

前言

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

一、准备两个Css文件

light.css

body {
	background-color: white
}
.content p{
	color: black
}
1
2
3
4
5
6

dark.css

body {
	background-color: #282923
}

.content p{
	color: grey
}
1
2
3
4
5
6
7

二、引入对应css样式

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

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


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

body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

三、切换模式

点击按钮后，使用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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

这样功能虽然实现了，我们每次进入都需要重新切换，有没有办法可以让他记住我们的操作呢？当然是有的，接下来我们就需要用到 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

五、过渡动画

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

添加transition样式

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

}

/* light */
body {
	background-color: white;
     transition: 0.5s;
}
1
2
3
4
5
6
7
8
9
10
11
12

效果对比

请添加图片描述

相关阅读:
Spring如何通过三级缓存来解决循环依赖
【网络协议】聊聊DHCP和PXE 工作原理
eyb：Vue学习3
工欲善其事必先利其器（Windows）
springboot下使用druid-spring-boot-starter
pyplot设置字体格式大小、坐标轴刻度在图内
iPhone设备中如何导出和分享应用程序崩溃日志的实用方法
OpenHarmony APP开发基础
前后端加密解密工具类(前端rsa加密,后端进行解密)
词嵌入(Word2Vec)

原文地址：https://blog.csdn.net/China_I_Love_You/article/details/126099136