暗色模式

本文介绍了作者的朋友阿普修从零编写个人博客主题，但该主题存在多项严重缺陷，导致作者不得不分支仓库并帮忙修复。首先，RSS 功能未遵循规范，将所有文章全量输出，每次更新都会让阅读器重复推送全部内容，造成极大干扰。其次，暗色模式仅覆盖首页部分元素，文章页面、说说页面、友链页面、评论区及统计页面的背景和文字颜色均被写死，在暗色模式下显示为白色或对比度极低，几乎不可用。此外，代码块背景、导航栏菜单及链接顺序也采用硬编码，无法通过配置文件修改，严重破坏了页面结构和 SEO 效果。作者对比了成熟主题的设计思路，指出写主题应使用变量分离、不破坏原始结构，并建议缺乏经验者先使用成熟框架而非自研。最后，作者讽刺地通过 RSS 阅读器得知阿普修又发布了安卓版客户端，进一步体现了其“全写死”架构带来的维护和扩展难题。

本文介绍了如何在网站中添加 Giscus 作为第二评论区，由于 Giscus 通过 iframe 标签嵌入，美化时需要使用带网站域名的绝对路径。文章选择 noborder_light 和 noborder_dark 作为默认亮暗主题，并将 CSS 文件存放于 /assets/css/giscus/ 目录。详细给出了亮色与暗色两套自定义 CSS 代码，包括字体引入、颜色变量、按钮样式等，确保评论区与网站风格统一。最后展示了在配置文件中的主题引用方式（light_theme 和 dark_theme）。整个过程旨在快速实现评论区的基本美化，后续可进一步优化。

本文介绍了 Hexo 博客 Butterfly 主题的亮暗色切换实现原理与自定义方法。文章指出 Butterfly 通过 JS 脚本控制 `data-theme` 属性实现颜色模式切换，而非监听浏览器主题，因此刷新页面后才能响应系统主题变化。作者详细解释了暗色模式下的 CSS 变量赋值方式，并给出了具体的代码示例，包括如何为卡片、布局等元素分别设置亮色和暗色背景，以及如何使用 `[data-theme='dark']` 选择器替代 `@media (prefers-color-scheme: dark)` 进行暗色样式定制。文章为需要深度美化 Butterfly 主题的用户提供了实用的 CSS 编写思路。

本文介绍了在 Butterfly 主题网站中为卡片实现毛玻璃效果的方法与问题解决过程。文章首先指出，为所有卡片统一设置 backdrop-filter: blur(7px) 可使导航栏模糊程度一致，但在暗色模式下会因缺乏基础颜色导致卡片与背景糊成一片。作者曾尝试通过 @media (prefers-color-scheme: light) 限制仅在亮色模式生效，但这并非根本解决方案。后来意外发现主题作者为导航栏设计的十六位色（如 #FFFFFFB3 和 #121212CC），通过为亮色和暗色模式分别设置带透明度通道的背景颜色，再统一保留 blur(7px)，即可实现不干扰网站扁平化设计的毛玻璃效果，且暗色模式用户也能正常使用。最后，文章给出了在 Butterfly 主题配置文件中引入对应 CSS 文件以及通过 Cloudflare Pages 完成部署的示例代码。

本文介绍了在 Butterfly 主题中启用深色模式并解决 SVG 图片颜色冲突的方法。通过在 _config.butterfly.yml 中配置 darkmode 选项，可以开启深色模式切换按钮，并设置自动跟随系统或固定时间段切换。然而，手动引入的 .svg 图片在深色模式下不会自动变色，仍显示为黑色。为解决此问题，使用 CSS 媒体查询 @media (prefers-color-scheme: dark) 和滤镜 filter: brightness(0) invert(1) !important，将 SVG 图片在深色模式下反转成白色。将该样式保存为 svg.css，并通过 inject.head 配置注入到网站中，从而实现深色模式下 SVG 图片变为白色、浅色模式下保持黑色，避免颜色冲突。