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

使用 CSS 类选择器“

.btn-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])

app.layout = dbc.Container(
    [
        html.H2("Dash App - Change DBC Button Component Color"),
        html.Br(),
        dbc.Button("Test", color="primary", className="me-1"),
        html.Br(),
        dcc.RadioItems(["Test1", "Test2"], id="Test1"),
    ],
    className="p-3",
    style={"textAlign": "center"}
)

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

并且

custom.css

文件包含：

.btn-primary {
    color: #fff;
    /* background-color: seagreen; */
    background-image: linear-gradient(135deg, #7A76FF, #7A76FF, #7FE4FF);
}

这将导致：