为博客增加黑暗模式按钮

我的博客主题是因为看到了小霖的梦花园的个人博客，很想弄一个和它一样的主题。

在他的博客右下角写着主题的来源地址，是基于hexo-theme-aomori的基础上修改的，访问就可以得到主题的源码，我的目标就是在这个源码的基础上去增加修改一些自己的东西。

之前陆陆续续的为博客增加了血小板的live2D看板娘，右侧小工具的小插图照片，修改了一些汉化的标题等，这些改动我也上传到了自己的GitHub仓库上，有需要的也可以看一下哦，地址在hexo-theme-aomori

因为自己也没有学习过前端的知识，所以很多改动也是自己一边网上搜索一边尝试摸索着改完的，有很多修改都忘记了。所以如果有时间的话，自己还是要尽可能的记录一些东西，防止自己这越来越秀逗的脑子，把之前辛辛苦苦弄出来的东西全都忘了。

废话不多说，直接进入主题

这次是为博客增加右侧小工具下面的黑暗模式按钮，这里是GitHub的提交号。

首先是要在html首页源码中，之前的【返回开始的按钮】的地方修改增加【黑暗模式按钮】的引用，

修改之前代码如下：

</div>
    <div id="backtop">
        <i class="icon icon-arrow-up"></i>
    </div>
</div>

修改完代码如下：

</div>
    <div class="tools">
        <div id="backtop" style="display: none;">
            <i class="icon icon-arrow-up"></i>
        </div>
        <div id="change-mode" style="display: block;">
            <i class="icon icon-time"></i>
    </div>
</div>

可以看到它是增加了一个”tools”类，然后把”backtop”按钮放了进去，然后又放进去了一个“change-mode”

接下来我们就要在css里面增加对这个tools和change-mode的样式表的描述，修改source/dist/build.css文件，

之前的backtop为：

#backtop {
    display: none;
    cursor: pointer;
    font-size: .7rem;
    font-weight: 300;
    padding: 15px 0;
    text-align: center
}

修改并增加内容为：

.tools {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}
#backtop {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 70%;
    flex: 0 0 70%;
    margin-right: 10px
}
#change-mode {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1
}
#backtop,#change-mode {
    background: var(--card-background);
    border-radius: 8px;
    cursor: pointer;
    display: none;
    font-size: .7rem;
    font-weight: 300;
    padding: 15px 0;
    text-align: center
}
*, ::after, ::before {
    box-sizing: inherit;
}

这样，黑暗模式的按钮就增加好了，至于怎么为这个按钮增加相对应的功能，我会在下一篇博客中记录修改。