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
classNameproperties 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:
- 22 Bootstrap Bootswatch themes
- 11 Plotly Graph Templates
- 18 Plotly Graph Discrete Color Sequences
- 94 Plotly Graph Continuous Colorscales
- Any background color selected from a colorpicker
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|
|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:
- An image of your app
- A short title to appear on the card in the gallery
- A link to the Github/GitLab etc. for your code
- 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.