Feature/dark-mode: 添加深色模式支持 by h1s97x · Pull Request #75 · hibikilogy/hibikilogy.github.io

h1s97x · 2026-03-16T07:48:46Z

功能描述

为京吹学报添加完整的深色模式支持，提升夜间阅读体验。

主要特性

✨ 深色模式样式

新增深色模式样式文件 (less/dark-mode.less, css/dark-mode.css)
完整适配所有页面元素的深色主题
精心设计的配色方案，保证可读性

🌙 主题切换

在导航栏添加主题切换按钮（月亮/太阳图标）
用户可一键切换亮色/深色模式
使用 localStorage 保存用户主题偏好

⚡ 优化体验

实现无闪烁加载机制（页面加载时直接应用保存的主题）
平滑的主题切换动画
自动检测系统主题偏好（首次访问）

修改文件

Gruntfile.js - 更新构建配置以支持编译深色模式样式
_includes/head.html - 添加主题加载脚本（防止闪烁）
_includes/nav.html - 添加主题切换按钮
css/dark-mode.css - 编译后的深色模式样式
less/dark-mode.less - 深色模式 LESS 源文件
less/hux-blog.less - 更新主样式文件

测试方法

访问网站首页
在导航栏右上角找到主题切换按钮（月亮/太阳图标）
点击按钮切换主题
刷新页面，验证主题偏好是否被保存
在不同页面（文章、标签、关于等）测试深色模式显示效果

浏览器兼容性

Chrome/Edge 76+
Firefox 67+
Safari 12.1+
其他现代浏览器

备注

深色模式不影响现有功能
用户可随时切换回亮色模式
主题偏好存储在浏览器本地，不涉及服务器

inchei · 2026-03-17T06:19:17Z

深色模式有很多细节问题，例如tag鼠标悬浮后看不清文字，tag汇总页面顶部tag看不清，目录背景不再和文章背景保持一致，深色背景下横线都是白的很刺眼，tag汇总页面标题hover后颜色不再变化，搜索栏已经输入的文字看不清，等等

h1s97x · 2026-03-17T06:25:46Z

已收到反馈。

NozoMizore7 · 2026-03-17T07:10:10Z

新加的评论模块是以深色模式显示的，不知是否会被一并修复？

h1s97x · 2026-03-17T07:25:16Z

新加的评论模块是以深色模式显示的，不知是否会被一并修复？

giscus的主题配置在_config.yml下，主题设置为：
theme: preferred_color_scheme 意为跟随用户的系统深色/浅色模式。

会考虑修改成适配主题转换的模式。

- 新增深色模式样式文件 (less/dark-mode.less, css/dark-mode.css) - 在导航栏添加主题切换按钮 (月亮/太阳图标) - 使用 localStorage 保存用户主题偏好 - 实现无闪烁加载机制 - 完整适配所有页面元素的深色主题 - 更新 Gruntfile.js 支持编译深色模式样式 - 优化夜间阅读体验 - 修复了多个 UI 细节问题 - 添加 !important 确保深色模式样式优先级

- 在 _config.yml 中添加 theme 配置选项（light, dark, auto） - 当 theme 设置为 'auto' 时，Giscus 自动跟随网站深色模式 - 使用 MutationObserver 监听 data-theme 属性变化 - 当用户切换深色模式时，自动更新 Giscus 主题 - 支持其他主题配置（light, dark）保持不变

h1s97x · 2026-03-17T08:28:48Z

已修复

inchei · 2026-03-17T10:25:01Z

+  }
+
+  // Scrollbar (Webkit)
+  ::-webkit-scrollbar {


亮色就没有调 scrollbar 啊，不需要调 scrollbar，而且 -webkit- 在 Firefox 不生效

我只测试了chrome和egde。

inchei · 2026-03-17T10:27:15Z

下次不要 force push，不然看不出修改 less 到底改了哪里

h1s97x · 2026-03-17T10:29:18Z

下次不要 force push，不然看不出修改 less 到底改了哪里

但可能会导致commit太多

h1s97x · 2026-03-17T10:29:48Z

我先修改吧，具体哪里显示有问题可以截图我在修改

inchei · 2026-03-17T10:46:51Z

页底tag鼠标悬浮

突兀的白线和浅色的不能点击的翻页按钮

搜索栏取消聚焦后字是黑的

tag汇总顶部现在看得清了，但是浅色模式是有按照热度区分深浅的，而且疑似因为加了 border，浅色切换为深色时会有奇怪的动画

tag汇总列表的文章标题悬浮依然没有改变颜色

文章目录背景颜色一致了但有意义不明的边框

而且这个悬浮时左边 border 的效果和浅色不一致，浅色只是字颜色改变，没有左边的 border

建议简单学习一下 CSS 重新写，至少能看懂 AI 做了哪些不一致的修改，不是特别难的

h1s97x · 2026-03-17T10:48:46Z

好的谢谢

- 在选择器（h1, h4, article, blockquote 等）周围添加一致的间距 - 标准化注释的格式和位置 - 在逻辑规则组之间添加空行，以提高可读性 - 使用正确的换行来规范选择器分组（.table th, .table td） - 采用一致的格式对齐供应商前缀和过渡效果 - 在不影响功能的前提下，提高整个样式表的代码一致性

- 移除深色模式中的 scrollbar 自定义样式 - 保持滚动条样式在亮色和深色模式下一致

- 添加 .post-title hover 时变色效果 - 与亮色模式保持一致 - 添加 text-decoration: none 保持样式一致

- 移除 side-catalog 的 box-shadow - 目录背景与页面背景保持一致 - 消除上面的横线效果

- 根据主题动态设置标签云颜色范围 - 浅色模式: #bbbbee 到 #0085a1 (浅紫到深蓝) - 深色模式: #4a9eff 到 #b8d4ff (浅蓝到中深蓝) - 主题切换时自动重新初始化标签云颜色

- 移除 mixins.less 中 font-family 内的注释（LESS 不支持） - 移除 Markdown 链接语法（导致编译错误） - 现在 hux-blog.less 能正常编译

- 修改 index.html，使用 .disabled 类替代内联样式来实现禁用的翻页按钮，使 HTML 标记更清晰。 - 在浅色和深色模式中都添加了 pointer-events: none，确保禁用的按钮无法被点击。 - 为禁用状态添加了专用的 LESS 变量 (@disabled-bg, @dark-disabled-bg, @dark-disabled-text)。 - 更新了深色模式下禁用按钮的颜色，以获得更好的对比度。 - 为深色模式的禁用按钮样式添加了 !important 标志，确保其优先级和光标样式 (cursor: not-allowed) 生效。 - 移除了分页标记中不必要的内联 pointer-events 样式。

h1s97x · 2026-03-17T14:31:04Z

1.页底tag鼠标悬浮

2.翻页按钮

3.搜索不聚焦

4.标签渐变色，设置反了，可以修改（应为浅蓝向中深蓝渐变）

5.文章TOC阴影删除

6.悬浮时左边 border 删除，保持一致性

已修复。

h1s97x · 2026-03-17T14:33:47Z

回复一下，首先我确实使用AI进行vibe coding，但是功能落成也确实需要人来code review，新增的功能本来就可能存在问题，之前也没详细一个一个去改。提出意见后修复是很正常的事情，但是不能用模糊的描述让我去修改，我怎么知道你的标准？

inchei · 2026-03-18T00:01:48Z

回复一下，首先我确实使用AI进行vibe coding，但是功能落成也确实需要人来code review，新增的功能本来就可能存在问题，之前也没详细一个一个去改。提出意见后修复是很正常的事情，但是不能用模糊的描述让我去修改，我怎么知道你的标准？

抱歉，不应该假设你调试 css 的经验较多（这些问题，尤其文字看不清的问题，如果有经验应该很容易识别或修复，因此最初只用文字描述）。仍然感谢你的贡献。欢迎继续贡献！

h1s97x · 2026-03-18T00:21:59Z

回复一下，首先我确实使用AI进行vibe coding，但是功能落成也确实需要人来code review，新增的功能本来就可能存在问题，之前也没详细一个一个去改。提出意见后修复是很正常的事情，但是不能用模糊的描述让我去修改，我怎么知道你的标准？

抱歉，不应该假设你调试 css 的经验较多（这些问题，尤其文字看不清的问题，如果有经验应该很容易识别或修复，因此最初只用文字描述）。仍然感谢你的贡献。欢迎继续贡献！

感谢你的评审，我主要是写后端的，前端的细节确实有很大问题，您的图片帮我解决了定位的问题，这次都是手动修改，消息使用AI辅助生成，再次表示感谢，我也有很多收获。

h1s97x · 2026-03-18T00:23:08Z

回复一下，首先我确实使用AI进行vibe coding，但是功能落成也确实需要人来code review，新增的功能本来就可能存在问题，之前也没详细一个一个去改。提出意见后修复是很正常的事情，但是不能用模糊的描述让我去修改，我怎么知道你的标准？

抱歉，不应该假设你调试 css 的经验较多（这些问题，尤其文字看不清的问题，如果有经验应该很容易识别或修复，因此最初只用文字描述）。仍然感谢你的贡献。欢迎继续贡献！

感谢你的评审，我主要是写后端的，前端的细节确实有很大问题，您的图片帮我解决了定位的问题，这次都是手动修改，消息使用AI辅助生成，再次表示感谢，我也有很多收获。

h1s97x · 2026-03-18T00:23:59Z

如有问题请反馈，但是请不要带有歧视性的话语，谢谢

inchei · 2026-03-18T07:12:46Z

问题不大了，感觉还可以改的地方：

/tags/ 页面

顶部标签云这样感觉更看不清了，可能暗色模式直接不动这一块更好

文章页面

目录高亮项还是灰白色背景，参考亮色模式，应该选择比背景深色稍亮的深色，显得没有那么突兀

与亮色模式不一致的地方：

/tags/ 页面

文章标题悬浮有变化了，但是亮色模式时是有 transition 的，暗色没有了

标签小标题悬浮也添加了变化，但是亮色模式是没有变化的

文章页面页顶页脚的标签，原先是透明背景的，现在背景有颜色了，其实不用额外适配也可以，不过这个不用统一，原来的页顶标签因为透明背景有时会导致看不清，只是记录一下，如果之后还有改进计划的话可以统一为有背景的样式。

inchei · 2026-03-18T07:23:59Z

如有问题请反馈，但是请不要带有歧视性的话语，谢谢

真的很抱歉🙏

h1s97x · 2026-03-18T07:38:00Z

已收到反馈，我会尽快修改，有歧义的地方我会给方案。谢谢您的反馈意见

@Light-

- 创建 less/colors.less 集中定义所有颜色变量 - 分离亮色模式颜色（@Light-*）和暗色模式颜色（@Dark-*） - 更新 less/variables.less 导入 colors.less 并设置默认亮色模式 - 简化 less/dark-mode.less，使用变量覆盖实现暗色模式 - 在 hux-blog.less 和 dark-mode.less 中定义 CSS 变量 - 使用变量替代硬编码颜色（side-catalog, listing-seperator 等） - 便于后续快速切换配色方案

- 修改 footer.html 中 tagcloud 初始化，添加 100ms 延迟确保 CSS 变量已应用 - 添加 fallback 颜色，CSS 变量读取失败时使用默认值 - 更新 nav.html 主题切换代码，使用 CSS 变量而非硬编码颜色 - 添加 fallback 确保主题切换时颜色正确显示 - 修复亮色模式下 tagcloud 显示灰色的问题 - 确保手动切换暗色模式时 tagcloud 颜色正确更新

- 在 colors.less 中添加 @light-catalog-active-bg 和 @dark-catalog-active-bg 变量 - 在 variables.less 中添加 @catalog-active-bg 默认值 - 在 dark-mode.less 中添加 @catalog-active-bg 暗色模式覆盖 - 更新 side-catalog.less 使用 @catalog-active-bg 变量替代硬编码 #F5F5F5 - 确保 side-catalog 在亮色和暗色模式下都使用正确的配色

- 为深色模式下的文章副标题（post-subtitle）添加悬停（hover）和焦点（focus）状态的颜色样式（#a78bfa）

- 将 transition 属性从 .post-preview > a 移至全局 a 选择器 - 添加完整的浏览器前缀支持 (-moz, -webkit, -o) - 确保所有深色模式链接具有一致的过渡效果

h1s97x · 2026-03-19T03:52:05Z

1.做了比较大的颜色方案的重构，新增了一个less文件专门管理配色方案。参考Zcool和知乎的文章，挑选了一套淡紫的配色方案。效果如图：

2.标签的颜色做了暗色模式的适配：如下图

3.目录高亮项选择比背景深色稍亮的深色，显得没有那么突兀。配色为#3d2d5d;

4.之前提交的时候rebase把副标题的hover不小心删掉了，已重新修复，现在hover在标题上时主标题和副标题会一起变色。

5.链接的transition 从标题转至全局的链接属性

6.标签小标题的hover我没太理解，这个貌似原先就是没有的，我只是做了变色处理。目前暗色效果如下：

7.关于透明背景，这块的如果需要的话，我的方案就是就是把NAV完全做个悬浮处理，这样就不占上面的空间，让背景完全显示。

h1s97x · 2026-03-19T03:56:30Z

7.或者使用另一种方案，给nav加上透明属性

- 为 .post-heading .tags, .page-heading .tags, .site-heading .tags 添加透明背景样式 - 使用 rgba(255, 255, 255, 0.3) 的透明边框 - 使用 rgba(255, 255, 255, 0.9) 的透明文字颜色 - hover 时使用 rgba(255, 255, 255, 0.2) 的透明背景 - 保持与亮色模式的一致性，提高可见性

pzhlkj6612 · 2026-03-19T12:16:21Z

下次不要 force push，不然看不出修改 less 到底改了哪里

但可能会导致commit太多

如果没有拆分修改到不同提交的需求，仓库维护者在合并 PR 时可以选择 "squash and merge", 这样就只有一个提交了。

h1s97x · 2026-03-19T12:24:58Z

下次不要 force push，不然看不出修改 less 到底改了哪里

但可能会导致commit太多

如果没有拆分修改到不同提交的需求，仓库维护者在合并 PR 时可以选择 "squash and merge", 这样就只有一个提交了。

感谢解答。

pzhlkj6612 · 2026-03-22T06:33:39Z

@h1s97x : 这个 14c415e 提交就是挤压、压缩（squash）到一起的。文档: Squash and merge your commits § About pull request merges - GitHub Docs.

NozoMizore7 requested review from inchei and itorr March 17, 2026 03:24

h1s97x marked this pull request as draft March 17, 2026 06:26

h1s97x added 2 commits March 17, 2026 16:25

h1s97x force-pushed the feature/dark-mode branch from b82fa49 to 0ad4f54 Compare March 17, 2026 08:27

h1s97x marked this pull request as ready for review March 17, 2026 08:28

inchei reviewed Mar 17, 2026

View reviewed changes

h1s97x added 11 commits March 17, 2026 21:01

fix: 修复深色模式切换时滚动条样式变化问题

33a60a5

- 移除深色模式中的 scrollbar 自定义样式 - 保持滚动条样式在亮色和深色模式下一致

fix: 修复深色模式tag hover样式

b1073c6

fix: 深色模式下文章标题 hover 效果

fe25552

- 添加 .post-title hover 时变色效果 - 与亮色模式保持一致 - 添加 text-decoration: none 保持样式一致

fix: 移除深色模式文章目录的 box-shadow

fe27c03

- 移除 side-catalog 的 box-shadow - 目录背景与页面背景保持一致 - 消除上面的横线效果

feat: 深色模式下标签云支持热度渐变颜色

1a47c48

- 根据主题动态设置标签云颜色范围 - 浅色模式: #bbbbee 到 #0085a1 (浅紫到深蓝) - 深色模式: #4a9eff 到 #b8d4ff (浅蓝到中深蓝) - 主题切换时自动重新初始化标签云颜色

fix: 修复搜索栏失焦文字颜色

d6e411c

fix: 移除深色模式标签云边框样式

0e34d6b

fix: 移除文章目录链接的左边框样式

b13e02d

fix: 修复 LESS 编译错误

5d4cd9f

- 移除 mixins.less 中 font-family 内的注释（LESS 不支持） - 移除 Markdown 链接语法（导致编译错误） - 现在 hux-blog.less 能正常编译

h1s97x added 5 commits March 19, 2026 11:10

fix(dark-mode): 为文章副标题添加悬停/焦点颜色样式

66747c8

- 为深色模式下的文章副标题（post-subtitle）添加悬停（hover）和焦点（focus）状态的颜色样式（#a78bfa）

fix(dark-mode): 将链接过渡效果从 post-preview 移至全局链接样式

edd3800

- 将 transition 属性从 .post-preview > a 移至全局 a 选择器 - 添加完整的浏览器前缀支持 (-moz, -webkit, -o) - 确保所有深色模式链接具有一致的过渡效果

inchei merged commit 14c415e into hibikilogy:master Mar 21, 2026

h1s97x deleted the feature/dark-mode branch March 21, 2026 23:22

gbccccc mentioned this pull request Apr 10, 2026

浅色模式下的失效翻页按钮为深色 #81

Open

Conversation

h1s97x commented Mar 16, 2026

功能描述

主要特性

修改文件

测试方法

浏览器兼容性

相关 Issue

备注

Uh oh!

inchei commented Mar 17, 2026

Uh oh!

h1s97x commented Mar 17, 2026

Uh oh!

NozoMizore7 commented Mar 17, 2026

Uh oh!

h1s97x commented Mar 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

h1s97x commented Mar 17, 2026

Uh oh!

inchei Mar 17, 2026

Choose a reason for hiding this comment

Uh oh!

h1s97x Mar 17, 2026

Choose a reason for hiding this comment

Uh oh!

inchei commented Mar 17, 2026

Uh oh!

h1s97x commented Mar 17, 2026

Uh oh!

h1s97x commented Mar 17, 2026

Uh oh!

inchei commented Mar 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

h1s97x commented Mar 17, 2026

Uh oh!

h1s97x commented Mar 17, 2026

Uh oh!

h1s97x commented Mar 17, 2026

Uh oh!

inchei commented Mar 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

h1s97x commented Mar 18, 2026

Uh oh!

h1s97x commented Mar 18, 2026

Uh oh!

h1s97x commented Mar 18, 2026

Uh oh!

inchei commented Mar 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

inchei commented Mar 18, 2026

Uh oh!

h1s97x commented Mar 18, 2026

Uh oh!

h1s97x commented Mar 19, 2026

Uh oh!

h1s97x commented Mar 19, 2026

Uh oh!

pzhlkj6612 commented Mar 19, 2026

Uh oh!

h1s97x commented Mar 19, 2026

Uh oh!

pzhlkj6612 commented Mar 22, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

h1s97x commented Mar 17, 2026 •

edited

Loading

inchei commented Mar 17, 2026 •

edited

Loading

inchei commented Mar 18, 2026 •

edited

Loading

inchei commented Mar 18, 2026 •

edited

Loading