Create a Theme / Use Multiple Stylesheets

Dash Python
1

Is it possible - and if so - any suggestions on how to create a custom theme for your CSS assets?

e.g., I want to be able to alternate between different themes based upon what I define as the value for environment variable ‘THEME’.

2

Hi @dani_m

You can check out the theme switch components below.
It’s an AIO component that uses a client side callback to switch the style sheet.

3

Thanks @AnnMarieW!

I did see this; using the theme switch components – is it possible to set a theme based on some logic, and not allow the user to change that theme?

4

Yes, you can set the theme in the app constructor

5

Thanks for the quick response, @AnnMarieW! I want to be able to alternate between different themes – based upon some logic that I define – and do ‘not’ want the user to be able to change the theme via the UI. I have not seen an example of this yet. Do you know if it’s possible and if so, do you have any recommendations as to how I should go about this?

6

If you set the theme when the app starts by setting the style sheet in the app constructor, then the user cannot change it.

For example,

app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP, dbc_css])

You could also include a theme switch component and hide it with the className or style prop, but access it through a callback.

2 Likes
8

Hello @dani_m,

If you want more control across completely different apps, you could use a flask static folder instead with folder subdirectories in order to get the css structure that you desire. (If every file is named the exact way as the other)

The tricky part is not trying to route on the server, but making sure that the path for the browser is correct.

In order to swap these, you would target these stylesheets and replace the subdirectory target, similar to how the dbc template ThemeSwitch works.

Or, you could load all the asset files and then differentiate via a body class:

style1:

.style1 div {
    background-color: "black"
}

style2:

.style2 div {
    background-color: "black"
}

Then in order to swap themes, you change the class on the body, or even the “#react-entry-point”.

Typically, I recommend congregation of styling to help keep your sanity, and making it easier to adjust in the future, without going on a goose chase each time.

1 Like