Dash Bootstrap Theme Explorer

Dash Python
1

Hey Dash Community,

I just wanted the share the latest project I’m working on. This is still a work in progress and I’m planning to add a lot more content. I would love to hear comments and suggestions for improvements!

Dash Bootstrap Theme Explorer

The easy way to see Bootstrap themes and Plotly templates and colors in your Dash app

See it at: https://hellodash.pythonanywhere.com/

  • The Theme Explorer App makes it easy to see how different Bootstrap themes, Plotly figure templates and colors
    will look in your Dash app.

  • The Component Gallery shows a sample of all the components available from the dash-boostrap-components library,
    dash-core-components, and the Dash DataTable. (Dash DAQ coming soon!) You can see how the style of the component changes when you change the Bootstrap theme. For the DataTable and some Dash Core Components, there are examples of how to use the style and className properties and custom CSS to make them look great with your selected theme.

  • The App Gallery has examples of Dash Apps made with Bootstrap. Add your app to the gallery!

  • The Cheatsheet has some of my favorite links to help with app design.

Theme Explorer App demo: See a sample Dash app updated as you choose from:

These two images are the same app! Only 1 line of code is changed to update the design.

(note- scroll right to see the other app)

Light Theme app Dark Theme app
theme_explorer_light theme_explorer_dark
Bootstrap Theme: MINTY DARKLY
Graph Template: simple_white plotly_dark
Graph Color Sequences: Pastel Dark24
Graph Continuous Colorscales: darkmint ice
App Background Color: #F3F6F3 “”

If you have an app that you would like to add to the gallery, please open an issue and include the following information:

  1. An image of your app
  2. A short title to appear on the card in the gallery
  3. A link to the Github/GitLab etc. for your code
  4. An extended description of your app. This will be displayed in a dcc.Markdown component, so feel free to include any
    compatible Markdown formatting and links etc.

Special thanks to @tcbegley and @adamschroeder for their helpful input on this project, and to @Emil for the advice on how to make the screen flicker less when the theme is switched.

6 Likes
2

Thank you for creating this post, @AnnMarieW . It’s souseful to test the themes and see all of them in one place. I also loved the cheat sheet :yellow_heart:

3

This is great! Now I don’t have to change my code to try out various themes before picking the one that works well for my use cases. Well done!!

4

I’m glad you like it :grin:

I’m also starting to collect information on how to style Dash components so they look good with different themes. You can find that in the Component Gallery.

My plan is to make this a good reference for the CSS needed to do things that are a little tricky – like changing the color of the Dropdown menu or the color of the slider bar etc.

If anyone has good CSS tips, please let me know!

1 Like