如何将Jekyll al-folio主题页面改为反转黑底背景？

完全可以在 Jekyll 中实现 al-folio 主题的深色背景效果，而且比依赖浏览器插件更稳定、更贴合主题风格。下面是具体的操作步骤：

1. 利用 Jekyll 的主题覆盖机制修改颜色变量 #

al-folio 基于 Bootstrap 和自定义 SCSS 构建，核心颜色变量都集中在 SCSS 文件中。为了避免直接修改主题原文件（防止主题更新时丢失改动），我们可以在自己的项目中创建对应路径的文件来覆盖变量：

• 在你的 Jekyll 项目根目录下，创建 _sass/al-folio 文件夹（如果不存在的话）
• 从 al-folio 主题的源码中复制 variables.scss 文件到这个新建的文件夹里

2. 修改核心颜色变量 #

打开复制过来的 variables.scss，找到并修改以下关键变量，适配深色背景：

// 页面主背景色（接近纯黑的深色）
$body-bg: #121212;

// 全局文本颜色（浅灰色，保证可读性）
$text-color: #e8e8e8;

// 链接颜色（选一个明亮的色调，比如青绿色，和深色背景形成对比）
$link-color: #4ecdc4;

// 卡片、导航栏的背景色（比主背景稍浅，增加层次感）
$card-bg: #1e1e1e;
$navbar-bg: #1e1e1e;

// 页脚背景色（比主背景更深）
$footer-bg: #0f0f0f;

// 边框颜色（深灰色，避免在深色背景下过于突兀）
$border-color: #333;

// 代码块样式调整
$code-bg: #2d2d2d;
$code-color: #d4d4d4;

根据你的视觉偏好，还可以调整其他变量（比如按钮颜色、标题颜色等），确保所有元素的对比度符合可读性标准。

3. 优化细节（可选） #

如果部分元素（比如图片、图标）在深色背景下显示效果不佳，可以在 assets/css/main.scss 中添加自定义样式：

// 调整图片对比度，适配深色背景
img {
  filter: brightness(0.85) contrast(1.1);
}

// 确保图标颜色正确
.fa, .fab, .fas {
  color: $text-color;
}

4. 预览效果 #

运行本地服务测试修改后的效果：

bundle exec jekyll serve

访问 http://localhost:4000 检查所有页面元素（博客文章、项目卡片、导航栏、页脚等），确保没有文本和背景对比度不足的问题。

这种方法从主题的样式源头修改，比浏览器插件的全局反转效果更精准，能完美适配 al-folio 的组件风格。

内容的提问来源于stack exchange，提问作者mourinho