Dash Mantine Components Theme Builder

Introducing the DMC Theme Builder

I just wanted to share a new project I’ve been working on to help you get started with customizing themes in Dash Mantine Components (DMC).

If you’re familiar with Bootstrap, you’ve probably used one of the predefined themes in the Dash Bootstrap Components library. These themes are typically added to your app either as an external stylesheet or by including them in a .css file inside the /assets folder.

DMC takes a different approach. It comes with a built-in default theme that looks great in both light and dark mode . You can easily customize the defaults by updating the theme prop in the MantineProvider. This allows you to configure global defaults like colors, border radius, shadows, and more—without needing external stylesheets. For even finer control, you can customize individual components using the Styles API, style props, (or the style and className props, just like other Dash components).

This new project lets you explore how to modify the global default theme for your app. With the DMC Theme Builder, you can:

  • Experiment with setting a primary color, border radius, shadows, and more.
  • See how your changes affect the overall look and feel of a sample app in real time.
  • Copy the theme code you create and use it in your own projects for a consistent and customized design.

Github: GitHub - AnnMarieW/dmc-theme-builder: Dash Mantine Components Theme Builder
Try the app live on PyCafe: PyCafe - Dash - Dash Mantine Components Theme Builder


Dash Mantine Components Theme Builder


Explore the app live: DMC Theme Builder on Pycafe

DMC Theme Builder Screenshot


How to Use Your Custom Theme

Once you’ve customized your theme, click the “Copy theme code” button in the app. This will generate the code for the theme you’ve configured. Apply theme to your Dash app like this:

import dash_mantine_components as dmc

theme = {
    "primaryColor": "teal",
    "defaultRadius": "xl",
    "components": {
        "Card": {
            "defaultProps": {
                "shadow": "xl"
            }
        }
    }
}

app.layout = dmc.MantineProvider(
    children=[],  # Add your app layout here
    theme=theme,
    forceColorScheme="dark"  # "light" is the default    
)

This approach ensures a consistent, customized design across all components in your Dash app.


Learn More

For further details and advanced theming techniques, visit the Dash Mantine Components documentation:

  • Mantine API Overview: High-level overview of Mantine’s styling and theming options.
  • Theme Object: In-depth guide to customizing the default theme.
  • Styles API: How to override styles globally or at the component level.

This project is inspired by Mantine Theme Builder

20 Likes

That is great, thank you!

I love this theme customization capability… and with so little code. Thank you @AnnMarieW :pray:

@AnnMarieW I really like the theme builder. It was always a trial and error process for me to build themes.

I have some ideas on it, and if you like I would be open to join to build it out.
For example, what I am thinking of:

  1. Adding new colour via hex code list or the colour selector
  2. Adding continuously the properties of components, so a general customisation to components

Maybe you also have some other ideas on it :smiley:

Happy to have a chat

Hi @simon-u

Glad you like the theme builder! I’d be delighted to hear your ideas.

Adding custom colors is already a popular request - see the PR #1 to add this feature by @idling-mind :trophy:

Feel free to comment on that PR and open a new GitHub issue to discuss your second point regarding general component customization. Looking forward to working with you on this :slight_smile: