Black Lives Matter. Please consider donating to Black Girls Code today.
Learn how to use COVID-19 data in open source Dash apps. Register for the Sept 23rd webinar with IQT!

Change list of css files via radio buttons

Hello!
Is there a way to switch between lists of css files which I want to append. I have tried callback with radio buttons but no luck so far.

external_css = [“https://rawgit.com/.../application.css”, “https://rawgit.com/.../toolkit-inverse.css”]

@app.callback(
Output(‘hidden_div’, ‘children’),
[Input(‘radio_style’, ‘value’)])
def update_style(radio_style):
if radio_style == ‘Dark’:
external_css = [“https://rawgit.com/.../application.css”, “https://rawgit.com/.../toolkit-inverse.css”]
return external_css
elif radio_style == ‘Light’:
external_css = [“https://rawgit.com/.../application.css”, “https://rawgit.com/.../toolkit-light.css”]
return external_css

for css in external_css:
app.css.append_css({“external_url”: css})

Thank you )

This won’t work with the app.css.append_css functions but you might be able to do this by dynamically adding different html.Meta(rel='stylesheet', href='https://rawgit.com/...') tags. I’m not sure if the browser will fetch and apply the stylesheet if a <meta ... /> tag is applied after page-load, but it’s worth a shot.

1 Like

Thank you, Chris.
At the end of the day, it was not a good idea to change styles.
Btw, Dash is a great framework. We widely use it in our organization.

1 Like