Hexo + Chic 主题为代码块实现明暗主题切换效果

这份文档记录如何在 Hexo 博客（使用 Chic 主题），完成代码块 (highlight.js) 样式随明/暗主题切换。

项目地址：https://github.com/EvannZhongg/Blog-Learning.git

背景知识

  • 代码块 是你写文章时用 ``` 包起来的那些 Python/JavaScript 代码部分。
  • highlight.js 是用来给代码块加颜色的工具，它有“亮色”和“暗色”两套样式。

希望解决的问题是：

当我切换网站到暗色模式时，代码块还是白底，看起来很突兀。

我们要做的就是：让代码块也能“跟着变黑”。

1. 确认 Hexo 正在使用 highlight.js

打开你博客根目录下的 _config.yml 文件，找到下面的内容并确保设置一致：

1
2
3
4
5
6
7
syntax_highlighter: highlight.js
highlight:
  line_number: true
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false

这段配置的意思是告诉 Hexo：我要用 highlight.js 来做代码高亮。

2.修改 head.ejs，引入代码高亮样式

打开文件：

1
themes/hexo-theme-Chic/layout/_partial/head.ejs

在里面添加这几行（插入到已有的 <link> 标签之后即可）：

1
2
3
4
5
<!-- highlight.js 样式（默认亮色） -->
<link id="hljs-theme" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@11.7.0/styles/github.css">
<!-- highlight.js 自动上色功能 -->
<script src="https://cdn.jsdelivr.net/npm/highlight.js@11.7.0/lib/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
  • 第一行是默认代码样式（亮色）。
  • 第二三行是让代码自动加颜色。

3. 修改 script.js，切换暗色样式时动态修改链接

打开文件：

1
themes/hexo-theme-Chic/source/js/script.js

找到我们添加主题切换的地方，添加以下 JavaScript 代码：

1
2
3
4
5
6
7
8
const hljsTheme = document.getElementById('hljs-theme');
function updateCodeHighlightStyle(isDarkMode) {
    if (!hljsTheme) return;
    const newHref = isDarkMode
        ? "https://cdn.jsdelivr.net/npm/highlight.js@11.7.0/styles/github-dark.css"
        : "https://cdn.jsdelivr.net/npm/highlight.js@11.7.0/styles/github.css";
    hljsTheme.setAttribute('href', newHref);
}

然后就可以在主题切换按钮事件里调用：

1
updateCodeHighlightStyle(true); // 或 false，根据你当前模式

每次切换主题时都调用它，就能切换代码样式。

4. 创建一个 CSS 文件，解决代码块“白边”问题

这个步骤很关键，否则在暗色样式时代码块周围可能会留下一圈白色边框，如下方图片所示：
image

第一步：创建文件夹和文件

在终端中运行：

1
2
3
4
cd themes/hexo-theme-Chic/source/css
mkdir custom
cd custom
nano custom.css

或者手动：在 themes/hexo-theme-Chic/source/css/ 下创建文件夹 custom，然后在里面新建文件 custom.css

第二步：填入以下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
pre,
code,
pre code,
.highlight {
    background: inherit !important;
    color: inherit !important;
    box-shadow: none !important;
    border: none !important;
}

body.dark-theme pre,
body.dark-theme code,
body.dark-theme .highlight {
    background: #0d1117 !important;  /* 暗色背景 */
    color: #c9d1d9 !important;       /* 暗色文字 */
    box-shadow: none !important;
    border: none !important;
}

body.dark-theme pre::-webkit-scrollbar-track,
body.dark-theme code::-webkit-scrollbar-track {
    background: #0d1117 !important;  /* 修复滚动条白边 */
}

5. 在 head.ejs 中引入自定义 CSS 文件

在 head.ejs 中再加一行：

1
<link rel="stylesheet" href="<%- url_for('/css/custom/custom.css') %>">

放在其他 <link> 标签的下面。

6. 重新生成并运行 Hexo

运行以下命令，重新生成并启动本地预览：

1
2
3
hexo clean
hexo g
hexo s

然后访问你的本地博客文章页面 http://localhost:4000，尝试切换主题，看代码块是否也会随之变色。

在两种不同主题下的效果展示：

image

image

修改后的相关完整代码可以在文章开头的项目地址中获取

该项目代码基于 Hexo 和 hexo-theme-Chic 。