Vue项目Bootstrap5.2暗黑模式下修改表单图标为白色的方法

1. 修改form-select的下拉图标颜色 #

Bootstrap的form-select下拉箭头是通过::after伪元素的边框实现的，在暗黑模式下可通过以下CSS调整颜色：

/* 基于Bootstrap默认暗黑模式标识[data-bs-theme="dark"] */
[data-bs-theme="dark"] .form-select::after {
  border-color: #fff;
}

如果组件样式启用了scoped，需要添加深度选择器：

<style scoped>
::v-deep [data-bs-theme="dark"] .form-select::after {
  border-color: #fff;
}
</style>

2. 修改input type="time"的图标颜色 #

不同浏览器对时间输入框的图标实现逻辑不同，主流Chrome/Edge使用-webkit-calendar-picker-indicator伪元素，Firefox可通过颜色方案适配，兼容写法如下：

[data-bs-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(1); /* 反转默认深色为白色 */
  cursor: pointer;
}

/* Firefox适配 */
[data-bs-theme="dark"] input[type="time"] {
  color-scheme: dark;
}

scoped样式下的写法：

<style scoped>
::v-deep [data-bs-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
}

::v-deep [data-bs-theme="dark"] input[type="time"] {
  color-scheme: dark;
}
</style>

补充说明 #

• 如果你的项目用自定义暗黑类（比如.dark-mode）替代默认的[data-bs-theme="dark"]，只需把选择器替换成你的类名即可。
• 推荐使用Bootstrap内置变量var(--bs-white)代替#fff，更贴合框架设计规范。

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