如何在Docusaurus中通过custom.css修改首页标题的明暗主题颜色？

完全可以通过custom.css来实现这个需求，核心是利用主题对应的选择器分别设置标题颜色，两种常见方案如下：

直接针对主题设置颜色 #

先找到网站中标识light/dark主题的根元素类或属性（比如常见的.light/.dark类，或者data-theme="light"/data-theme="dark"属性），再匹配首页横幅标题的CSS类（假设标题类为.banner-title，需替换为你网站实际的类名），添加以下代码：

/* Light主题下标题设为黑色 */
.light .banner-title {
  color: black;
}

/* Dark主题下标题设为白色 */
.dark .banner-title {
  color: white;
}

通过CSS变量管理颜色 #

如果网站本身用CSS变量管理主题色，也可以重新定义对应变量来实现：

/* 覆盖Light主题的标题色变量 */
.light {
  --banner-title-color: black;
}

/* 覆盖Dark主题的标题色变量 */
.dark {
  --banner-title-color: white;
}

/* 确保标题应用该变量 */
.banner-title {
  color: var(--banner-title-color) !important;
}

注意：实际使用时要替换.banner-title为你网站中横幅标题对应的真实类名，主题选择器也要根据网站的实际标识调整（比如有的网站是body[data-theme="light"]这种形式）。

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