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

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