我的博客主题是因为看到了小霖的梦花园的个人博客，很想弄一个和它一样的主题。
在他的博客右下角写着主题的来源地址，是基于hexo-theme-aomori的基础上修改的，访问就可以得到主题的源码，我的目标就是在这个源码的基础上去增加修改一些自己的东西。
之前陆陆续续的为博客增加了血小板的live2D看板娘，右侧小工具的小插图照片，修改了一些汉化的标题等，这些改动我也上传到了自己的GitHub仓库上，有需要的也可以看一下哦，地址在hexo-theme-aomori
因为自己也没有学习过前端的知识，所以很多改动也是自己一边网上搜索一边尝试摸索着改完的，有很多修改都忘记了。所以如果有时间的话，自己还是要尽可能的记录一些东西，防止自己这越来越秀逗的脑子，把之前辛辛苦苦弄出来的东西全都忘了。
废话不多说，直接进入主题
这次是为博客增加右侧小工具下面的黑暗模式按钮，这里是GitHub的提交号。
首先是要在html首页源码中，之前的【返回开始的按钮】的地方修改增加【黑暗模式按钮】的引用，
修改之前代码如下：
1
2
3
4
5
| </div>
<div id="backtop">
<i class="icon icon-arrow-up"></i>
</div>
</div>
|
修改完代码如下：
1
2
3
4
5
6
7
8
9
| </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为：
1
2
3
4
5
6
7
8
| #backtop {
display: none;
cursor: pointer;
font-size: .7rem;
font-weight: 300;
padding: 15px 0;
text-align: center
}
|
修改并增加内容为：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| .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;
}
|
这样，黑暗模式的按钮就增加好了，至于怎么为这个按钮增加相对应的功能，我会在下一篇博客中记录修改。
