Dash bootstrap components background color

Question

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()

Components

Accordion
Alert
Badge
Breadcrumb
Button
ButtonGroup
Card
Carousel
Collapse
DropdownMenu
Fade
Form
Input
InputGroup
Jumbotron
Layout
ListGroup
Modal
Nav
Navbar
Offcanvas
Pagination
Popover
Progress
Spinner
Table
Tabs
Toast
Tooltip

Components

Accordion
Alert
Badge
Breadcrumb
Button
ButtonGroup
Card
Carousel
Collapse
DropdownMenu
Fade
Form
Input
InputGroup
Jumbotron
Layout
ListGroup
Modal
Nav
Navbar
Offcanvas
Pagination
Popover
Progress
Spinner
Table
Tabs
Toast
Tooltip

Hello, guys.
I'm facing another small issue that I can't find a way to solve.

I've created a project with 2columns. In the first one, I've placed a sidebar. On the other one, my dash/plotly components.
When I try to interact with the components, the screen starts to shake, as you can see in the gif I've made:
https://media.giphy.com/media/vxh3TewRzCpFmI1y2U/giphy.gif

After some investigation, it looks like the problem is caused by the use of the css "height: 100vh".

Here's a small snipped to reproduce the error.

Code

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


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

app.layout = dbc.Container([
    dbc.Row([
        dbc.Col([
        ], style={"background-color": "#FF0000", "height": "100vh"}),

        dbc.Col([
            dcc.Dropdown(
                    options=[{"label": "test", "value": "test"}],
                    id='dd-campaign'),
            ]),
        ])
    ], fluid="True")

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

- dash version: `2.0.0`
- dash-bootstrap-components version: `1.0.3`


Thank you so much in advance.

Hi @rtadewald

Thanks for raising this and apologies for the slow reply.

This is very strange, I can clearly see the issue in the attached gif, but running your code at my end is not reproducing the issue.

My best guess is that maybe it's because the dropdown is flush with the right edge of the screen, which is causing something strange to happen when the options are expanded. I don't know if this will help, since I can't reproduce and hence can't test, but could you try adding a small horizontal margin to the Container to see if it helps? You can add className="mx-1" to accomplish this. I.e.

app.layout = dbc.Container(..., fluid=True, className="mx-1")

Let me know if that helps? If not, can you share a few more details of the OS and browser that you are using, any additional CSS that might be in your assets/ folder, and also share the exact versions of all Dash related packages in your environment (I think from the Gif you're running macOS? In which case you should be able to do pip list | grep dash)