直接改--bs-accordion-btn-icon-color变量最稳：Bootstrap 5.3+将图标颜色抽为独立CSS变量，专管图标色且不影响文字；需确保作用域在.accordion-button内、SVG fill值URL编码、padding-right同步调整，并为深色模式补充@media覆盖。
直接改--bs-accordion-btn-icon-color变量最稳
bootstrap 5.3+ 把图标颜色抽成了独立 css 变量，不是靠color继承、也不是改::after的fill属性。硬写.accordion-button { color: #dc3545 }会连带污染图标（尤其 svg 用fill="currentcolor"时），反而让箭头变红又变浅。正确做法是只动变量：--bs-accordion-btn-icon-color，它专管图标色，不影响文字、不触发重绘。
示例：
:root {
--bs-accordion-btn-icon-color: #28a745;
}
如果只想改某一个 Accordion，把选择器换成.my-accordion .accordion-button即可。注意：这个变量必须写在.accordion-button作用域内才生效，别误设在.accordion-item或body上。
自己换 SVG 图标时，fill编码必须 URL 转义
如果你用自定义 data URI SVG（比如把默认下拉箭头换成“×”），里面的fill值不能直接写#0d6efd，否则浏览器解析失败，图标消失。所有特殊字符都要 URL 编码：#→%23，<→%3C，>→%3E。
常见错误写法：fill='%230d6efd' → 对；fill='#0d6efd' → 错，会白屏。
建议用encodeURIComponent()生成，或粘贴到在线 SVG 编码工具里转一次。复制后检查字符串里是否含%开头的序列，没有就肯定没生效。
图标颜色变了但点击区域失效？检查padding-right
原生.accordion-button默认有padding-right: 2.5rem，专门给图标留热区。你一换图标（尤其是更大/更小的 SVG），若没同步调padding-right，手指点在图标位置就点不中——事件目标是空白背景，不是按钮本身。
- 图标变大了？加
padding-right: 3rem - 图标移到左边了？补
padding-left: 2rem防文字遮挡 - 用
background-position: right 1rem center微调图标距右边缘距离，比硬调 padding 更精准
别依赖margin-left: auto推图标，它在 flex 布局里不稳定，移动端容易错位。
深色模式下图标发灰？补@media (prefers-color-scheme: dark)
系统开启深色模式时，Bootstrap 不会自动切换图标色。如果你的--bs-accordion-btn-icon-color在:root里设的是浅色系（比如#0d6efd），在深背景上可能对比度不足，看起来像“发灰”或“隐形”。
解决方法是显式覆盖：
@media (prefers-color-scheme: dark) {
:root {
--bs-accordion-btn-icon-color: #6f42c1;
}
}
这个媒体查询必须放在你的自定义样式表里，且不能被 CDN 加载的 Bootstrap CSS 覆盖——确保你的<link>或<style>在 Bootstrap 之后加载。
变量名拼错、加载顺序颠倒、SVG 编码漏转、热区 padding 忘调——这四点占了 90% 的“改了没反应”问题。调图标颜色本质是 CSS 变量 + SVG 渲染 + 布局预留的组合动作，单独改一项大概率断链。
