How to change color of dbc 'switch' button

Dash Python
1

I have tried have tried input_style and input_class_name per the docs, but none are changing the color. I am attempting to change it to the ‘success’ green.

I have also looked in the Bootstrap docs and do see that the color of this component is able to be changed, but I am not sure how to make this change.

Any help is appreciated!

dbc.Switch(
    value=True,
    id='restricted_search',
    label='Restricted Search',
    input_style={'onColor': 'success'},
    input_class_name ='success'
),
2

hi @anarchocaps

Good question. Try input_class_name:

dbc.Switch(
    value=True,
    id='restricted_search',
    label='Restricted Search',
    input_class_name='bg-success'
)
3

Thank you Adam. This did successfully change the color. However, now the switch stays ‘lit’ even when toggling it off, rather than going ‘dim’ when toggling it off. I just looked at the args for this and did not see a separate one that would control this.

4

you’re right. I couldn’t find a Switch prop that deactivates the class/color when False. A quick work-around is to build this through the callback:

# Import packages
from dash import Dash, dcc, Input, Output, html
import dash_bootstrap_components as dbc

# Initialise the App
app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

# App Layout
app.layout = dbc.Container(
    [
    dbc.Row([
        dbc.Col([
            dbc.Switch(
                value=True,
                id='restricted_search',
                label='Restricted Search',
                inputClassName = None
            ),
        ], width=6)])
    ]
)

@app.callback(
    Output('restricted_search', 'inputClassName'),
    Input('restricted_search', 'value')
)
def update_switch(activated):
    if activated:
        return 'bg-success',
    return None


# Run the App
if __name__ == '__main__':
    app.run_server()