# Switch the local CSS sheets in the Python code

**URL:** <https://community.plotly.com/t/switch-the-local-css-sheets-in-the-python-code/26864>\
**Category:** Dash Python\
**Created:** [August 6, 2019, 5:46am UTC](https://community.plotly.com/t/switch-the-local-css-sheets-in-the-python-code/26864 "2019-08-06T05:46:00Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![sangsang](https://avatars.discourse-cdn.com/v4/letter/s/e5b9ba/32.png) [@sangsang](https://community.plotly.com/u/sangsang)\
**Post date:** [August 6, 2019, 5:46am UTC](https://community.plotly.com/t/switch-the-local-css-sheets-in-the-python-code/26864/1 "2019-08-06T05:46:00Z")

</div>

@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.

---

<div class="post-metadata">

**Author:** ![nedned](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/nedned/32/8795_2.png) [@nedned](https://community.plotly.com/u/nedned)\
**Post date:** [August 6, 2019, 7:19am UTC](https://community.plotly.com/t/switch-the-local-css-sheets-in-the-python-code/26864/2 "2019-08-06T07:19:31Z")

</div>

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](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.

---

<div class="post-metadata">

**Author:** ![sangsang](https://avatars.discourse-cdn.com/v4/letter/s/e5b9ba/32.png) [@sangsang](https://community.plotly.com/u/sangsang)\
**Post date:** [August 6, 2019, 8:32am UTC](https://community.plotly.com/t/switch-the-local-css-sheets-in-the-python-code/26864/3 "2019-08-06T08:32:01Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![sangsang](https://avatars.discourse-cdn.com/v4/letter/s/e5b9ba/32.png) [@sangsang](https://community.plotly.com/u/sangsang)\
**Post date:** [August 6, 2019, 9:24am UTC](https://community.plotly.com/t/switch-the-local-css-sheets-in-the-python-code/26864/4 "2019-08-06T09:24:37Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![bala\_bala](https://avatars.discourse-cdn.com/v4/letter/b/96bed5/32.png) [@bala\_bala](https://community.plotly.com/u/bala_bala)\
**Post date:** [August 6, 2019, 9:36am UTC](https://community.plotly.com/t/switch-the-local-css-sheets-in-the-python-code/26864/5 "2019-08-06T09:36:41Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![sangsang](https://avatars.discourse-cdn.com/v4/letter/s/e5b9ba/32.png) [@sangsang](https://community.plotly.com/u/sangsang)\
**Post date:** [August 6, 2019, 9:57am UTC](https://community.plotly.com/t/switch-the-local-css-sheets-in-the-python-code/26864/7 "2019-08-06T09:57:02Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![sangsang](https://avatars.discourse-cdn.com/v4/letter/s/e5b9ba/32.png) [@sangsang](https://community.plotly.com/u/sangsang)\
**Post date:** [August 7, 2019, 6:00am UTC](https://community.plotly.com/t/switch-the-local-css-sheets-in-the-python-code/26864/8 "2019-08-07T06:00:10Z")

</div>

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