Dash Bootstrap 组件：跨组件替换原色

Question

我目前正在编写 Dash 应用程序，主要使用 Dash Bootstrap 组件。我对布局非常满意，但想调整原色以匹配我公司的配色方案。在下图中，我基本上想用不同的颜色替换所有蓝色的东西。

额外的挑战 是由于托管环境，不幸的是，我只能处理一个大的 Python 文件 - 我不能有额外的 .css文件。

我正在使用 BOOTSTRAP_STYLESHEET = [dbc.themes.SPACELAB]。我知道我可以通过使用例如替换单个组件的颜色style={'background-color':COMPANY_MAIN_COLOR}。有没有办法用不同的颜色代替 SPACELAB 的原色？或者至少，替换每个组件的默认值而不是必须为每个组件手动执行？

Answer 1

如果您可以添加一个 css 文件，我会采用这种方法。然后你可以简单地覆盖主要样式。

但是既然你指出这不是一个选项，你可以为你的按钮创建一个包装函数来设置默认背景颜色样式：

MWE

from dash import Dash, html, dcc
import dash_bootstrap_components as dbc


def CustomButton(*args, **kwargs):
    default_color = "green"
    default_color_light = "lightgreen"
    default_color_dark = "darkgreen"
    kwargs.setdefault("style", {"background-color": default_color, "background-image": "-webkit-gradient(linear, left top, left bottom, from(lightgreen), to(darkgreen))"})
    return dbc.Button(*args, **kwargs)


app = Dash(external_stylesheets=[dbc.themes.SPACELAB])
app.layout = html.Div(
    [
        dbc.Button("Primary", color="primary", className="me-1"),
        CustomButton("Primary", color="primary", className="me-1")
    ]
)

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

这仅设置默认值，因此您可以通过设置 style 属性来覆盖颜色。如果你不想要默认的渐变，你可以从 setdefault 调用中删除 background-image 部分。

更新

或者，您可以通过 Customizing Dash's HTML Index Template 用 css 覆盖样式。

SPACELAB 样式定义了一个 --primary css 颜色变量，但令人恼火的是它并没有在任何地方使用这个变量。不同的元素也可能以不同的方式改变颜色，所以我认为没有一种简单的万能方法可以做到这一点。但是您可以使用以下方法并为其添加样式，直到它成为您想要的样子

from dash import Dash, html, dcc
import dash_bootstrap_components as dbc

app = Dash(external_stylesheets=[dbc.themes.SPACELAB])
app.index_string = """
<!DOCTYPE html>
<html>
   <head>
       {%metas%}
       <title>{%title%}</title>
       {%favicon%}
       {%css%}
       <style>
           .btn-primary {
              background-image: linear-gradient(red, blue);
           }
           .custom-control-input:checked ~ .custom-control-label::before {
              border-color: red;
              background-color: red;
           }
       </style>
   </head>
   <body>
       {%app_entry%}
       <footer>
           {%config%}
           {%scripts%}
           {%renderer%}
       </footer>
   </body>
</html>
"""

app.layout = html.Div(
    [
        dbc.Button("Primary", color="primary", className="me-1"),
        dbc.Checklist(
            options=[
                {"label": "Option 1", "value": 1},
                {"label": "Option 2", "value": 2},
            ],
            value=[1],
            id="switches",
            switch=True,
        ),
    ],
)

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

Dash Bootstrap 组件：跨组件替换原色

Dash Bootstrap Components: Replace primary color across components

css

python

bootstrap-4

plotly-dash

dash-bootstrap-components