Plotly Dash 更改所有组件的原色

Question

这个问题看似简单，但我似乎没有找到合适的解决方案。 我有一个 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)

这给出了

但我想将原色蓝色更改为其他颜色。 我确信必须有一种方法可以简单地立即更改此所有可能的组件，但我找不到如何操作。 我找到了通过更改每个组件的 css 来做到这一点的方法，但不是一次性更改所有组件。 这个问题有点接近，但并没有真正解决问题，并且有一个额外的限制，即不能使用额外的CSS文件。

Answer 1

[class*="primary"]

例如，创建一个名为

custom.css

的文件，并将其存储在主破折号

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", className="ms-1"),],
    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 - Change DBC Components 'Primary' Color"),
        html.Br(),
        dbc.Button("Test", color="primary", className="me-1"),
        html.Br(),
        dcc.RadioItems(["Test1", "Test2"], id="Test1"),
        badge,
        dbc.Alert("This is a primary alert", color="primary"),
        dbc.Spinner(color="primary"),
        dropdown,
    ],
    className="p-3",
    style={"textAlign": "center"},
)

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

并且 

custom.css

文件包含：

[class*="primary"] {
    color: #fff;
    background-color: #7FE4FF;
    background-image: linear-gradient(135deg, #7A76FF, #7A76FF, #7FE4FF);
}

这将导致：