Dash Theme Toggle

Dash Python
1

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?

1 Like
2

Did you ever figure out a way to do this?

3

Try these resources for themes and CSS and background color change.
https://romanonatacha.github.io/dash_trich_components/