Python Plotly Dash 更改所有组件的原色

发布于08月23日

这个问题看起来很简单，但我似乎找不到合适的解决办法. 我有一个Dash应用程序，其风格与Bootstrap如下

from dash import Dash
import dash_bootstrap_components as dbc

app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
app.layout = dbc.Container([dbc.Button("Test"),
                            dbc.RadioItems(["Test1", "Test2"], "Test1")])

if __name__ == '__main__':
    app.run_server(debug=True)

Which gives

但我想把原色的蓝色改成其他 colored颜色 . 我相信一定有办法简单地改变这for all possible components at once条，但我找不到办法. 我已经找到了通过更改每个组件(但不是all components at once)的CSS来实现这一点的方法. This question有点接近，但并没有真正解决问题，并且有一个额外的约束，即不能使用额外的css文件.

For DBC components, you could try using the CSS wildcard selector `[class*="primary"]`

100:当涉及到组件时，单选项是一种例外，必须进行特殊处理(参见下面的css).

创建一个名为custom.css的文件，并将其存储在位于主Dash app.py文件本地的名为"Assets"的目录中，如下所示:

.
├── app.py
└── assets
    └── custom.css

2 directories, 2 files

其中，例如，app.py文件可以包含:

import dash_bootstrap_components as dbc

from dash import Dash, dcc, html


app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

badge = dbc.Button(
    ["Notifications", dbc.Badge("4", color="primary")], color="primary",
)
dropdown = dbc.DropdownMenu(
    label="Menu",
    children=[
        dbc.DropdownMenuItem("Item 1"),
        dbc.DropdownMenuItem("Item 2"),
        dbc.DropdownMenuItem("Item 3"),
    ],
    color="primary",
)

app.layout = dbc.Container(
    [
        html.H2("Dash App"),
        html.H3("Change Primary Color of Components"),
        dbc.Button("Test", color="primary"),
        dcc.RadioItems(["Test1", "Test2"], id="Test1"),
        badge,
        dbc.Alert("This is a primary alert", color="primary"),
        dbc.Spinner(color="primary"),
        dropdown,
    ],
    style={"textAlign": "center"},
    id="container",
)

if __name__ == "__main__":
    app.run_server(debug=True)

而custom.css个文件包含:

[class*="primary"], input[type='radio'] {
    color: #fff;
    background-color: red!important;
    accent-color: red;
    border-color: orange!important;
    margin: 0.2rem;
}
[class*="primary"]:hover {
    background-color: maroon!important;
}
.spinner-border {
    border-right-color: transparent!important;
}

这将导致: