网站暗夜模式与博客墙纸

阅读量 EEROE awaae(player8635) 2023-12-23 18:21:45
Categories: Tags: 本文已启用fancybox灯箱

网站暗夜模式与博客墙纸

其实就是我们的封面,那个就是网站启用暗夜模式的截图。当然是后面那一张,其实,绝大部分的站点一般都有昼夜模式的切换,倒也不是为了跟风,而是因为这个博客框架的夜间环境真的

太亮了

没有夜晚模式的效果图

而我就在这个叫mian.css的东西里面捣鼓了一番

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
@media (prefers-color-scheme: dark) {
html {
background-color: rgb(24, 28, 39);

body {
color: rgb(201, 209, 217);
}

h1 {
color: rgb(201, 209, 217);
}

h2 {
color: rgb(201, 209, 217);
}
}
}

但是目前还没有做下面的评论系统的暗夜模式适配

这是暗夜模式效果图
暗夜模式效果图

网站背景

好吧,如果你觉得这个昼夜切换有点太low了,您想类似butterfly的效果,,那我无能为力,希望你可以去butterfly,如果你还想使用的话,我还可以给你一个解决方法,那就是:博客背景

这个背景一直差强人意[^1]

文件在主题中的相对位置:
themes\tree\layout\_partial\head.ejs
负责这个功能的代码文件在这里

配置文件你可以在
themes\tree\_config.yml
找到

下面就是配置部分

1
2
3
4
#页面背景图片
blogBackgroundImage: 'https://you-URL/image/youe-iamge.webp'
blogBackgroundSize: 'cover' # 你可以根据需要选择 'cover', 'contain' 或其他值
blurAmount: 10px # 可以在这里设置模糊值

你要注意的就是:请在blurAmount字段填写一个值,否则背景图片没有模糊就会比较难看,但也不是看不下去

没有填写

剩下的就不用我多说了吧

注意

暗夜模式的css可能会与博客背景产生css冲突
我这里可以提供没有这个功能的css
你只要在下面的链接下载在替换掉\themes\tree\source\css\main.css这个文件就好了

文件下载-【呓语梦轩-image(main.css)】

下载后请将main.css.css改为main.css

[^1]:“差强人意”指还算能振奋人的意志;形容某人某事还不错,大体上还能使人满意

本站评论因服务器问题,请要发图片的各位自行至 博主自建图床 上传再分享
欢迎阅读本站评论区 指南 再进行评论