Is there any Plotly friendly theme css files to theme my Dash dashboards without adding a module to my project?

Dash Python
1

Greetings,

I understand that there is a big emphasis on using Dash Bootstrap Components for adding themes to my dashboard:

https://dash-bootstrap-components.opensource.faculty.ai/

I expect I should be able to improve my dashboard look and feel by simply adding a CSS file to my dashboard. I am not sure why it has to be done by adding a module ( import dash_bootstrap_components as dbc ) .

Is there any simple set of css files that enhances the fonts and look of my dashboards?

Thank you,

2

Hi @python-trader

It’s not necessary to import a module. To find out more about adding css to your dashboard see: Adding CSS & JS and Overriding the Page-Load Template | Dash for Python Documentation | Plotly

If you are not using Bootstrap, a good place to start is the basic stylesheet defined here: https://codepen.io/chriddyp/pen/bWLwgP.css

You can add it to your app as an exernal stysheet like this:

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = Dash(__name__, external_stylesheets=external_stylesheets)

Or download it, modify it as you like, and add it to .css file in the assets/ folder.

2 Likes
3

Hi @AnnMarieW ,

Thank you for help.

I am aware that we can add custom css files to Dash. I am trying to avoid creating my own CSS themes. With this question, I a looking for read-made CSS files created for Dash/Plotly. Do we have a set of such CSS files?

I wonder how do you know about https://codepen.io/chriddyp/pen/bWLwgP.css ? It seems that bWLwgP.css file is specifically designed for Plotly. Who created it? Is it official Plotlyl code? Do we have more of such css code created for Plotly?

Thank you,

1 Like
4

@python-trader I think it was created by Chris Palmer (co-founder of Plotly). It has been posted numerous time on the forum. I believe it is your best bet to “just enhance the looks”. I you want “more” out of the box, the best approach would probably be to use a UI library such as dash-bootstrap-components (as AnnMarie mentioned) or dash-mantine-components (I migrated to the latter some time ago, and I have been very happy with it),

2 Likes
5

Thank you @AnnMarieW and @Emil for help.

I understand that there are open source “components+ csslook” packages available for Plotly. Two examples are mentioned in this thread. I was hoping I can find more CSS only files for branding.

Is it safe to assume that other than bWLwgP.css , there is no other popular branding CSS stylesheet file for Plotly?

6

You can look at the apps in the app gallery - many of the open source apps have custom stylesheets. Dash Enterprise.
Plus if you work for a company, you may be interested in the Dash Enterprise Design Kit. Dash Design Kit

1 Like
7

It is easy to extract CSS files from Dash enterprise and use them in free opensource Dash?