Switch the local CSS sheets in the Python code

Dash Python
1

@chriddyp I have created a dash app and styled it using css. I have one css for light and one for dark theme. I would like to set up a toggle switch using dash-daq components and let the Boolean value toggle between the two css sheets.
Is there a way to choose the style-sheet from the user’s choice in the app’s toggle switch.
Or if there is any other simple way of doing it please suggest them.

2

I don’t have much experience with alternate stylesheets, but it looks like there is an HTML API for this: https://developer.mozilla.org/en-US/docs/Web/CSS/Alternative_style_sheets

That allows users to change the page style in Firefox through the View -> Page Style menu, but I’m not sure about how that works for Chrome. It’s possible it’s not a native feature.

An alternative to your described approach would be to to have to have the one set of styles, but use selectors with constraints that namespace your different logical themes:

.light-theme.other-class {color: white}

Your callback could change all the components of the layout of your Dash app so that className gets the right value. eg:

html.Div(className=f"{theme_name} other-class")

There’s probably a few ways to achieve this, but that’s one idea.

3

Thank you for the response. Can you please illustrate a pseudo code for the callback suggestion?

4

I am relatively new to programming and plotly-dash too. So it would be great to see a small pseudo code or the logic of how it works.

5

Use button to switch css and give the css id

app.layout = html.Button('Click Me', id='my-button')
app.layout = html.Button('Click Me', id='my-button2')


@app.callback(Output(your css id 1), [Input('my-button', 'n_clicks')])
def on_click(number_of_times_button_has_clicked):

@app.callback(Output(your css id 2), [Input(‘my-button2’, ‘n_clicks’)])
def on_click(number_of_times_button_has_clicked):

7

Thank you for the response. Also, what property of the component should I mention in callback’s output?

8

Another alternate solution could be the addition of dash daq’s Darkthemeprovider for switching between dark and light theme with a toggle switch.