教程博客教程 Hexo 博客实战

安知鱼主题：修复背景图修改引发的深色模式可读性问题

mcxiaochenn2025-09-152025-09-15

小尘AI正在绞尽脑汁想思路ING···

小尘のAI摘要

Deepseek-Chat

修改前必读：

本帖基于 Anzhiyu主题 进行修改方案编写，因此请读者优先掌握 Anzhiyu 主题官方文档的内容后再来进行魔改。
由于修改内容过多，以及可能会导致意料之外的事情，推荐使用 Github 配合 VSCode 进行修改，方便随时备份恢复

前言

我此前修改了博客深色模式下的背景为 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')