# Dash Theme Toggle

**URL:** <https://community.plotly.com/t/dash-theme-toggle/25645>\
**Category:** Dash Python\
**Created:** [July 9, 2019, 2:10pm UTC](https://community.plotly.com/t/dash-theme-toggle/25645 "2019-07-09T14:10:44Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![datadrinkr](https://avatars.discourse-cdn.com/v4/letter/d/eb8c5e/32.png) [@datadrinkr](https://community.plotly.com/u/datadrinkr)\
**Post date:** [July 9, 2019, 2:10pm UTC](https://community.plotly.com/t/dash-theme-toggle/25645/1 "2019-07-09T14:10:44Z")

</div>

Any thoughts on how I can build a dark/light theme toggle control on my Dash App (Python API)?

Currently I am using a series of CSS variables to store all my fill/font colors, sizes, etc.

for example

```
:root{
  --pg_bg: rgb(0,0,0);
  --pg_col: rgb(255,255,255);
  --vz_bg: rgb(30,30,30);
  --tab_bg: rgb(0,0,0);
}

```

and then

```
body {
  background-color: var(--pg_bg);
  color: var(--pg_col);
  font-size: var(--text_font_size);
  line-height: 1.6;
  font-weight: 400;
  font-family: var(--text_fam);
}

```

is there a way to pass variable names from dash somehow? so i could have a pg-bg-dark, and a pg-bg-light variable?

I would prefer not to create light and dark versions of every class and change the class of each page element using a long chain of callbacks…

Any other options?

---

<div class="post-metadata">

**Author:** ![danielhhowell](https://avatars.discourse-cdn.com/v4/letter/d/b5e925/32.png) [@danielhhowell](https://community.plotly.com/u/danielhhowell)\
**Post date:** [July 25, 2020, 9:27pm UTC](https://community.plotly.com/t/dash-theme-toggle/25645/2 "2020-07-25T21:27:30Z")

</div>

Did you ever figure out a way to do this?

---

<div class="post-metadata">

**Author:** ![adamschroeder](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/adamschroeder/32/17280_2.png) [@adamschroeder](https://community.plotly.com/u/adamschroeder)\
**Post date:** [July 26, 2020, 3:30am UTC](https://community.plotly.com/t/dash-theme-toggle/25645/3 "2020-07-26T03:30:21Z")

</div>

Try these resources for themes and CSS and background color change.  
[https://romanonatacha.github.io/dash\_trich\_components/](https://romanonatacha.github.io/dash_trich_components/)

[![](https://img.youtube.com/vi/vqVwpL4bGKY/maxresdefault.jpg "Introduction to Dash Bootstrap - Styling your App") ](https://www.youtube.com/watch?v=vqVwpL4bGKY)