目 录CONTENT

文章目录

5分钟为你的站点加上暗黑模式

phyger
2022-08-02 / 0 评论 / 2 点赞 / 1,149 阅读 / 2,895 字 / 正在检测是否收录...

1、前言

前面我们介绍了很多的建站工具,比如Docsify、Docute、MkDocs等等。虽然Docsify建站快速,使用简单方便,但是它有个缺陷就是没有暗黑模式。今天我在逛Github的时候,发现了一个非常简单,开箱即用的暗黑模式库,它就是darken

2、快速开始

2.1、创建index.html

首先我们创建一个index.html,在其中简单的写上几个元素。

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Darken Demo</title>
</head>

<body>
	<div class="container">
		<header>
			<h1>暗黑模式</h1> </br>
			<button id="change-me">点击切换</button>
		</header>
	</div>
</body>

</html>

预览查看下效果:

原始效果

此时,我们点击切换按钮是没有任何反应的。因为我们没有为其绑定动作。

接下来我们就利用darken来实现暗黑模式和明亮模式的切换。

2.2、引入darken资源

这里我们直接使用darken的CDN资源,当然你也可以将其下载下来使用。

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Darken Demo</title>
    <!-- 引入样式 -->
	<link rel="stylesheet" href="dark.css">
    <!-- 引入Darken -->
	<script src="https://unpkg.com/darken"></script>
</head>

<body>
	<div class="container">
		<header>
			<h1>暗黑模式</h1> </br>
			<button id="change-me">点击切换</button>
		</header>
	</div>
	<script>
		const darkmode = new darken({
			toggle: "#change-me",
			variables: {
				"--primary-color": ["#ffffff", "#000000"],
				"--secondary-color": ["#000000", "#ffffff"],
			}
		});
	</script>
</body>

</html>

如上,我们引入了darken的样式和代码,其中darken核心库我们使用了CDN资源,样式我们是直接下载来放到和index同路径来引入使用的。

dark.css的内容:

@import url('https://fonts.googleapis.com/css?family=Ibarra+Real+Nova|Montserrat&display=swap');

:root {
	--primary-color: #ffffff;
	--secondary-color: #000000;
}

body {
	margin: 0;
	width: 100%;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--primary-color);
	transition: all 300ms ease;
}

.container {
	max-width: 500px;
	margin: 0 20px;
}

header {
	display: flex;
	margin-bottom: 2em;
	justify-content: space-between;
}

h1 {
	font-family: 'Ibarra Real Nova', serif;
	font-size: 3em;
	margin: 0;
	color: var(--secondary-color);
	transition: all 300ms ease;
}

button {
	border: none;
	padding: 15px;
	outline: none;
	font-size: 0.85em;
	font-family: 'Montserrat', sans-serif;
	cursor: pointer;
	color: var(--primary-color);
	background-color: var(--secondary-color);
	transition: all 200ms ease;
}

button:hover {
	opacity: 0.6;
}

p {
	font-family: 'Montserrat', sans-serif;
	color: var(--secondary-color);
	line-height: 1.5em;
	transition: all 300ms ease;
}

a {
	color: blueviolet;
}

在完成以上两个资源的引入后,我们再次刷新查看效果。

2.3、最终效果

初始配色为明亮模式;

原始效果a

通过点击切换按钮,我们可以实现暗黑和明亮模式的切换。

暗黑模式

3、最后

使用此方式可以快速为你的站点增加暗黑模式的效果,本文仅对darken的简单使用做以介绍,针对不同的框架和特殊情况,还需要针对性的适配。

2

评论区