Hello,
I am hoping to use a custom css for my dash app and following one of CharmingData videos I tried downloading css file for one of the built-in themes and tweak it. But it is 62 pages long! I am far from being a CSS pro, so tweaking this is way out of my league.
Is there a minimalist css available - with just the basics:
Thanks for helping.
Hi @FunBandit and welcome to the Dash community
If you are just getting started, I recommend using one of the 26 themes from the Dash Bootstrap Components library. You can check out each theme at this site:
If you want to create and customize your own theme, a great option is to use the Dash Mantine Components library
Note that you can’t style a Plotly figure with CSS. You need to make the updates in the figures. You can find a lot of info in the Plotly docs - here’s one page to help you get started:
Thanks for replying. My problem is what I like is spread over few different built themes from Dash Bootstrap Components - I want font from one theme, background from other theme etc.
What would you suggest is the easiest way to go about cherry-picking bits from different themes.
Hi @FunBandit
It’s certainly possible to do this, but I’ve found it’s tricky to make a consistent design when cherry-picking. But it depends on how much you want to change. For smaller changes most components can be customized either by using the className and/or Style props or by targeting certain selectors in a custom stylesheet.
For more global theme changes, I think the Dash Mantine Components library is the easiest to use - see more here: Dash .
If you are using Bootstrap, you can create your own custom theme as well. More info here Sass · Bootstrap v5.3
Note that changes will only apply to the components of those libraries. If you are using dcc, or daq components, DataTable or Dash AG Grid, each of those components will need to have your custom theme applied if you want a pixel perfect design.