Menu
I am currently writing a Dash application, mostly using Dash Bootstrap Components. I am quite happy with the layout, but want to adjust the primary color to match my companies color scheme. In the picture below, I basically want to replace all the blue stuff with a different color.
Additional challenge is that due to the hosting environment, I am unfortunately limited to a single big Python file - I cannot have additional .css files.
I am using BOOTSTRAP_STYLESHEET = [dbc.themes.SPACELAB]. I know that I can replace single components' colors by using, e.g. style={'background-color':COMPANY_MAIN_COLOR}. Is there a way to instead replace SPACELAB's primary color with a different one? Or at least, to replace each component's default instead of having to do it manually for each component?
216
If you could add a css file I would go with that approach. Then you could simply overwrite the primary styles.
But since you indicated that isn't an option, you could create a wrapper function for your button that sets a default background color style:
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()
This only sets default values so you can overwrite the color by setting the style property. If you don't want the gradient by default you can remove the background-image part from the setdefault call.
Update
Alternatively you could overwrite the styles with css by Customizing Dash's HTML Index Template.
The SPACELAB styles define a --primary css color variable, but it annoyingly doesn't use this variable anywhere. Different elements also might change the color in different ways so I don't think there's an easy catch-all way to do this. But you can use the following approach and add styles to it until it is as you want it to be
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()
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
