如何自定义Bootstrap 5输入框以适配深色模式？

要搞定明暗模式下form-control的背景色切换，同时解决激活（聚焦）状态变回白色的问题，你需要针对这些CSS选择器下手：

要覆盖的目标选择器 #

• 基础状态：.form-control
• 聚焦激活状态：.form-control:focus
• 配合明暗模式的属性选择器：[data-bs-theme="dark"]（Bootstrap 5官方推荐的主题切换标记）

完整CSS代码示例 #

/* 深色模式下的输入框基础样式 */
[data-bs-theme="dark"] .form-control {
    background-color: rgb(45, 52, 61);
    border-color: rgb(67, 76, 86); /* 可选：同步调整边框色，风格更统一 */
    color: #fff; /* 可选：修改文字颜色，确保深色背景下可读性 */
}

/* 深色模式下输入框聚焦时的样式 */
[data-bs-theme="dark"] .form-control:focus {
    background-color: rgb(45, 52, 61); /* 和基础状态保持一致就不会变白了 */
    border-color: #86b7fe; /* 可选：保留Bootstrap默认聚焦边框色，或自定义 */
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); /* 可选：聚焦阴影也可自定义 */
}

/* 浅色模式如果需要自定义就加下面的，不用的话直接用Bootstrap默认样式即可 */
[data-bs-theme="light"] .form-control {
    background-color: #fff;
    border-color: #ced4da;
    color: #212529;
}

[data-bs-theme="light"] .form-control:focus {
    background-color: #fff;
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

注意点 #

• Bootstrap 5切换主题通常是给<html>或<body>标签添加data-bs-theme属性，切换时把属性值从light改成dark即可。
• 之前聚焦会变白的原因是：Bootstrap默认给.form-control:focus单独设置了背景色，优先级比基础.form-control类更高，所以必须单独覆盖这个状态的样式。
• 边框色、文字色可根据自身UI风格调整，确保深色模式下文字清晰、视觉协调。

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