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

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的简单使用做以介绍，针对不同的框架和特殊情况，还需要针对性的适配。

目录CONTENT