Light/dark theming via CSS in Dash Mantine Components

Dash Python
,
1

The theming capacity in DMC is fantastic, but sometimes I have to do some specific alterations for dark/light themes. I thought I’d share some of the css code if its useful to others:

Invert images/icons when theme is switched. Set className = “invertible-image”

/* invert images in dark mode */
html[data-mantine-color-scheme='dark'] .invertible-image {
    -webkit-filter: invert(100%);
    filter: invert(100%);
}
/* invert images in light mode */
html[data-mantine-color-scheme='light'] .invertible-image {
    -webkit-filter: invert(0%);
    filter: invert(0%);
}

Make active tabs more clearly selected (in particular for variant=“default”):

/*make the active tabs look better in dark mode */
html[data-mantine-color-scheme='dark'] .mantine-Tabs-tab[data-active="true"] {
    background-color: #212121;
}

/*make the active tabs look better in light mode */
html[data-mantine-color-scheme='light'] .mantine-Tabs-tab[data-active="true"] {
    background-color: #f3f3f3; 
}

Improve row hovering aesthetics in dash data table:

/* set table hover colors in dark mode */
html[data-mantine-color-scheme='dark'] .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner table tbody tr:hover {
    background-color:  #191919;
    color: inherit !important;
}

/* set table hover colors in light mode */
html[data-mantine-color-scheme='light'] .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner table tbody tr:hover {
    background-color: #f3f3f3;
    color: inherit !important;
}```
3 Likes