最近发现我的博客主题在特定日期变成了灰色（黑白模式），这通常是主题为了响应特定日期而自动开启的“灰度”模式。
虽然这是主题的一项功能，但如果我不希望我的博客页面自动变灰，或者认为这种风格影响了内容展示，我们可以通过简单的 CSS 强制覆盖，一劳永逸地解决这个问题。
💻 解决方案：强制覆盖 CSS 样式
我们不需要去修改主题复杂的 JavaScript 文件，只需要在博客园后台的 “页面定制 CSS 代码” 区域，添加一段高优先级的 CSS 规则即可。
操作步骤：
- 登录你的博客园后台。
- 点击左侧菜单栏的 “设置”。
- 找到 “页面定制 CSS 代码” 输入框。
- 将以下代码复制并粘贴到你所有 CSS 代码的末尾：
/* 强制关闭灰度滤镜，恢复所有颜色 */
html, body {/* 针对不同浏览器内核的灰度滤镜设置 */-webkit-filter: grayscale(0%) !important;-moz-filter: grayscale(0%) !important;-ms-filter: grayscale(0%) !important;-o-filter: grayscale(0%) !important;filter: grayscale(0%) !important;/* 另一个标准的滤镜清除属性 */filter: none !important;
}
-
点击页面底部的 “保存” 按钮。
-
回到你的博客首页，强制刷新页面（
Ctrl + F5或Shift + F5），页面颜色应立即恢复正常。
🔍 技术原理简析
为什么这段代码可以强制恢复颜色？
- 灰度实现： 像 SimpleMemory 这样的主题实现自动置灰功能时，通常是在 JavaScript 代码中判断当前日期是否为设置的纪念日。如果是，JS 会动态地给整个页面的根元素（
<html>或<body>）添加一个样式，例如：
html {filter: grayscale(100%); /* 将颜色饱和度设为 0 */
}
-
CSS 覆盖： 我们添加的代码通过将
grayscale的值重新设置为0%，实现了“关闭滤镜”的效果。 -
!important关键字： 这里的关键是使用了!important。这个关键字赋予了该样式极高的优先级。无论主题或博客园系统是否注入了置灰的样式，我们的grayscale(0%) !important都会覆盖掉它们的grayscale(100%)，从而确保页面始终显示彩色。
通过这个简单的 CSS 技巧，我们既保留了主题的其他功能，又获得了对页面色彩展示的完全控制。