You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

如何移除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)选中搜索框元素,看看还有哪些原生样式在起作用,然后针对性地覆盖掉就行~

火山引擎 最新活动