安知鱼主题：修复背景图修改引发的深色模式可读性问题
{% tip warning %} 修改前必读：
- 本帖基于
Anzhiyu主题进行修改方案编写，因此请读者优先掌握 Anzhiyu主题官方文档 的内容后再来进行魔改。 - 由于修改内容过多，以及可能会导致意料之外的事情，推荐使用
Github配合VSCode进行修改，方便随时备份恢复 {% endtip %}
前言
我此前修改了博客深色模式下的背景为 Mo佬 同款，后面发现了一些问题，部分样式文本出现了可读性降低的问题，通过添加模糊效果解决，希望能帮到你。
修改
改动涉及到很多部分，我来一个个讲该如何修改。建议每修改完一次就测试是否正常，避免竹篮打水一场空。
友链页折叠框文本
友链页文本由于没有遮罩，看起来会很难受，我大多文字都在折叠框中，所以只修改全局折叠框增加模糊效果。
修改 themes/anzhiyu/source/css/_tags/folding.styl 文件
[data-theme="dark"] details.folding-tag- background: transparent+ background: rgba(0, 0, 0, 0.3) // 半透明黑色+ backdrop-filter: blur(10px) // 高斯模糊+ -webkit-backdrop-filter: blur(10px)+ border: 1px solid rgba(255,255,255,0.1) // 模糊边框+ border-radius: 14px+ color: rgba(255, 255, 255, 0.8)
[data-theme="dark"] details[open]- & > div- &.content- padding 16px- margin -16px- margin-top 0- background: transparent;- color rgba(255, 255, 255, 0.6)+ details.folding-tag[open]+ > div.content+ background: transparent+ color: rgba(255,255,255,0.8)分类单标签页
可能看到小标题有点懵，我举个例子：点击跳转到本站对应界面
修改 themes/anzhiyu/source/css/_extra/anzhiyu/custom.css 文件
[data-theme="dark"] div#category {- background: transparent !important;+ background: rgba(18, 18, 18, 0.6); /* 半透明黑色 */+ backdrop-filter: blur(10px); /* 高斯模糊，数值可调 */+ -webkit-backdrop-filter: blur(10px); /* 兼容 Safari */}
/* md网站下划线 */#article-container a:hover { text-decoration: none !important;顶部菜单栏（可选）
本项只是单纯美化，不影响观看体验，如果你懒的话可以不动。
修改 themes/anzhiyu/source/css/_mode/darkmode.styl 文件
background-color: #525252 color: #e2f1ff
// 頭部 #page-header &.nav-fixed > #nav, &.not-top-img > #nav- background: var(--anzhiyu-black);+ background: rgba(18, 18, 18, 0.6) // 半透明背景+ -webkit-backdrop-filter: blur(8px) // Safari+ backdrop-filter: blur(8px) box-shadow: 0 5px 6px -5px rgba(133, 133, 133, 0)+ transition: background .3s, backdrop-filter .3s .post #page-header &.nav-fixed > #nav- background: var(--anzhiyu-card-bg);- box-shadow: none+ background: rgba(18, 18, 18, 0.6) // 半透明背景+ -webkit-backdrop-filter: blur(8px) // Safari+ backdrop-filter: blur(8px)+ box-shadow: 0 5px 6px -5px rgba(133, 133, 133, 0)+ transition: background .3s, backdrop-filter .3s #post-comment .comment-switch if hexo-config('comments.text')尾声
基本上就这样，有部分代码是ai辅助修改的，如果有问题欢迎评论区指出；如果还有可读性低的地方欢迎指出，我会继续更新修改教程的。
安知鱼主题：修复背景图修改引发的深色模式可读性问题
https://blog.mcxiaochen.top/posts/p9b691fc1/