Dash Core Components Gets a Design-Driven Refresh with Dash 4

Dash Python
3

Hi @the.oldest.house

If you are using Dash Mantine Components, you can see examples of styling in dark mode in our new Dash 4 Components page:

If you are using Dash Bootstrap Components you can see this forum post for examples:

Here’s a .css file to get you started for light/dark mode in DBC. Just add className="dbc" to a component or the outer container of the app.


.dbc {
    --Dash-Stroke-Strong: var(--bs-border-color);
    --Dash-Fill-Interactive-Strong: var(--bs-primary);
    --Dash-Fill-Inverse-Strong: var(--bs-body-bg);
    --Dash-Text-Primary: var(--bs-body-color);
    --Dash-Text-Strong: var(--bs-body-color);
}


:root[data-bs-theme="dark"] .dbc {
    --Dash-Stroke-Weak: rgba(255, 255, 255, 0.15);
    --Dash-Fill-Weak: rgba(255, 255, 255, 0.06);
    --Dash-Fill-Primary-Hover: rgba(255, 255, 255, 0.08);
    --Dash-Fill-Primary-Active: rgba(255, 255, 255, 0.12);
    --Dash-Fill-Disabled: rgba(255, 255, 255, 0.2);
    --Dash-Text-Disabled: rgba(255, 255, 255, 0.3);
    --Dash-Text-Weak: rgba(255, 255, 255, 0.3);
}