Dash Mantine Components Theme Builder

[AnnMarieW]

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: https://github.com/AnnMarieW/dmc-theme-builder
Try the app live on PyCafe: https://py.cafe/app/dash.mantine.components/dash-mantine-theme-builder

---

Dash Mantine Components Theme Builder

---

Explore the app live: DMC Theme Builder on Pycafe

---

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