如何修改Python Dash Bootstrap Components中AccordionItem的图标颜色

这个Chevron Down图标是Bootstrap Accordion组件通过CSS伪元素生成的，所以你在源码里找不到它的实体标签。可以通过以下两种方式修改颜色：

方法一：内联CSS（针对单个AccordionItem） #

在创建dbc.AccordionItem时，给组件添加自定义样式变量，覆盖默认的图标背景图：

dbc.AccordionItem(
    [
        dbc.AccordionBody([
            html.P("Core Plus: 8.09%", id="corePlusI"),
            html.P("Core: 7.57%", id="coreI"),
            html.P("Value-Add: 27.96%", id="valueAddI"),
            html.P("Opportunistisch: 23.97%", id="opportunistischI"),
        ])
    ],
    title="Objektklassen",
    style={
        "--bs-accordion-btn-icon": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e\")",
        "--bs-accordion-btn-active-icon": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e\")"
    }
)

其中%23ffffff是白色十六进制值#ffffff的URL转义写法，分别设置了折叠和展开状态下的图标颜色。

方法二：全局CSS（应用到所有Accordion组件） #

如果希望所有Accordion的图标都改为白色，可在项目中添加自定义CSS文件：

1. 在Dash应用初始化时引入自定义CSS：

import dash
import dash_bootstrap_components as dbc

app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
app.css.append_css({'external_url': '/assets/custom.css'})

2. 在项目根目录创建assets文件夹，新建custom.css文件并写入：

.accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
}

.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
}

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