如何移除Sphinx Read The Docs主题侧边栏搜索框的蓝色色调
如何移除Sphinx Read The Docs主题侧边栏搜索框的蓝色色调
我之前配置RTD主题的时候也被这个顽固的薄蓝色调坑过!它其实是搜索框聚焦状态下的默认阴影边框,RTD主题自带的样式优先级还挺高,咱们直接在自定义CSS里覆盖掉就行,步骤很简单:
1. 找到问题根源
那个蓝色tint是输入框在获得焦点时的box-shadow样式,还有可能是默认的border颜色,RTD主题的默认样式给.wy-side-nav-search input[type="text"]这个元素加了这些样式,咱们直接用自定义CSS覆盖。
2. 编写自定义CSS代码
打开你已经在使用的custom.css文件,添加下面的代码:
/* 完全移除搜索框的蓝色边框和聚焦阴影 */ .wy-side-nav-search input[type="text"] { /* 去掉默认边框 */ border: none; /* 去掉聚焦时的蓝色阴影 */ box-shadow: none; /* 让搜索框背景和侧边栏保持一致 */ background-color: var(--grey5); /* 可选:设置文字颜色,确保在深色背景上能看清 */ color: #ffffff; } /* 专门处理聚焦状态的样式,防止遗漏 */ .wy-side-nav-search input[type="text"]:focus { box-shadow: none !important; border-color: transparent !important; }
3. 确保样式生效
如果上面的代码没立刻生效,大概率是样式优先级的问题——RTD主题的原生样式可能比你的自定义样式优先级高。这时候可以给属性加!important(虽然平时不推荐滥用,但对付这种主题自带的顽固样式很管用)。
另外,也可以把搜索框的父元素.wy-side-nav-search的背景色也设置成和侧边栏一致,避免出现其他不协调的色块:
.wy-side-nav-search { background-color: var(--grey5); }
4. 重新构建文档
改完CSS后,记得重新运行sphinx-build命令生成文档,刷新页面就能看到效果了——那个讨厌的蓝色tint应该就消失啦!
如果还有残留的蓝色,你可以用浏览器的开发者工具(F12)选中搜索框元素,看看还有哪些原生样式在起作用,然后针对性地覆盖掉就行~




