如何修改GitHub Pages（Jekyll）Midnight主题网站的背景色？

常见原因及修复方案 #

1. CSS优先级被主题样式覆盖 #

Midnight主题的默认背景色样式可能用了更具体的选择器（比如带主题类名的body.midnight），或者给属性加了!important，导致你写的body选择器优先级不够。

修复：

• 打开浏览器开发者工具（F12），查看页面中body标签的实际样式，找到主题设置背景色的选择器，用相同或更高优先级的选择器编写自定义样式：

  body.midnight-theme {
    background-color: #FFEBEE;
  }
  

• 若还是不生效，可临时添加!important强制覆盖（不推荐滥用，但应急可用）：

  body {
    background-color: #FFEBEE !important;
  }
  

2. 样式文件加载顺序颠倒 #

如果主题的CSS文件在你的style.scss之后加载，主题样式会冲掉你的自定义代码。

修复：

• 在style.scss开头先引入主题的基础样式，再编写自定义代码，确保自定义样式后加载：

  @import "jekyll-theme-midnight";
  body {
    background-color: #FFEBEE;
  }
  

3. 浏览器缓存未清除 #

GitHub Pages部署后，浏览器可能还缓存着旧的CSS文件，导致看不到更新。

修复：

• 按Ctrl+Shift+R（Windows）或Cmd+Shift+R（Mac）强制刷新页面，清除缓存。
• 也可以在CSS文件引入路径后加版本参数，比如将style.css改为style.css?v=2，强制浏览器加载新文件。

4. SCSS编译出错 #

你提供的代码里background-color: #FFEBEE末尾没加分号，这会导致SCSS编译失败，修改不会生效。

修复：

• 修正SCSS语法错误，确保每个属性末尾加好分号：

  body {
    background-color: #FFEBEE;
  }
  

• 提交代码后，检查仓库的_site/assets/css/style.css文件（部署生成的编译文件），确认你的修改已经被编译进去。

5. 主题配置变量优先级更高 #

部分Jekyll主题支持通过_config.yml直接配置背景色，这种情况下主题配置会覆盖自定义CSS。

修复：

• 在仓库根目录的_config.yml中添加或修改背景色配置项：

  background_color: "#FFEBEE"
  

内容的提问来源于stack exchange，提问作者Níck