Pelican bootstrap3主题中全局CSS无法作用于侧边栏类区块

核心原因 #

well well-sm 区块的背景色继承自Bootstrap的默认浅色样式，pelican-bootstrap3主题未针对系统深色模式（prefers-color-scheme: dark）自动覆盖该样式，导致它无法随全局主题切换。

解决方案：修改custom.css #

直接在你已有的./content/extra/custom.css文件中，添加深色模式媒体查询规则，覆盖well well-sm的背景及相关样式：

/* 适配系统深色模式的侧边栏样式 */
@media (prefers-color-scheme: dark) {
  .well.well-sm {
    /* 替换为你深色主题对应的背景色，示例用深灰蓝 */
    background-color: #2d3748;
    /* 可选：调整文字颜色适配深色背景 */
    color: #f7fafc;
    /* 可选：调整边框颜色，保持风格统一 */
    border-color: #4a5568;
  }
}

优先级问题处理

如果上述样式未生效，说明Bootstrap默认样式的优先级更高，可添加!important强制覆盖（仅在必要时使用）：

@media (prefers-color-scheme: dark) {
  .well.well-sm {
    background-color: #2d3748 !important;
    color: #f7fafc !important;
    border-color: #4a5568 !important;
  }
}

验证步骤 #

1. 删除Pelican生成的output文件夹（清除缓存）
2. 重新运行Pelican生成静态页面
3. 切换系统的深色/浅色模式，刷新博客页面，查看侧边栏背景是否同步变化

可选：修改模板（进阶） #

若你希望彻底避开Bootstrap默认样式的干扰，可找到pelican-bootstrap3主题的侧边栏模板文件（通常是templates/sidebar.html），将<section class="well well-sm">修改为自定义类（比如<section class="sidebar-block">），然后在custom.css中为这个自定义类设置全局及深色模式样式。

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