直接改--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; }—— 全局生效，但必须写在 Bootstrap CSS 之后 -
.my-accordion .accordion-button { --bs-accordion-btn-icon-color: #0d6efd; }—— 局部生效，需确保外层有class="my-accordion" - 变量必须作用在
.accordion-button或其父容器上，设在.accordion-item或body上无效
自己换 SVG 图标时，fill 值必须 URL 编码
如果你用自定义 data URI SVG（比如把默认下拉箭头换成“×”），里面的 fill 值不能直接写 #0d6efd，否则浏览器解析失败，图标消失。
所有特殊字符都要 URL 编码：#→%23，→<code>%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: #6c757d; } }- 如果用了
data-bs-theme="dark"，还得补：[data-bs-theme="dark"] { --bs-accordion-btn-icon-color: #6c757d; } - 注意：仅靠
@media不够，data-bs-theme是 Bootstrap 自己的暗色开关，两者常并存
