1、前言
前面我们介绍了很多的建站工具，比如Docsify、Docute、MkDocs等等。虽然Docsify建站快速，使用简单方便，但是它有个缺陷就是没有暗黑模式。今天我在逛Github的时候，发现了一个非常简单，开箱即用的暗黑模式库，它就是darken。
2、快速开始
2.1、创建index.html
首先我们创建一个index.html，在其中简单的写上几个元素。
代码语言：javascript复制<!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资源，当然你也可以将其下载下来使用。
代码语言：javascript复制<!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的内容：
代码语言：javascript复制@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、最终效果
初始配色为明亮模式；
通过点击切换按钮，我们可以实现暗黑和明亮模式的切换。
3、最后
使用此方式可以快速为你的站点增加暗黑模式的效果，本文仅对darken的简单使用做以介绍，针对不同的框架和特殊情况，还需要针对性的适配。
