Automatic Mantine light/dark integration.

Theming

Automatic Mantine light/dark integration.

Follows your Mantine theme

DashFlexLayout watches the document's data-mantine-color-scheme attribute with a MutationObserver, so it restyles itself whenever your app toggles light/dark — no extra wiring needed. Try the sun/moon switch in the header: the dock below follows it.

# File: docs/theming/example.py

from dash import html
import flexlayout_dash as dfl

# DashFlexLayout watches the document's `data-mantine-color-scheme` attribute,
# so it follows the site's light/dark toggle (top-right) automatically — no
# extra wiring. You can also force it with the `colorScheme` prop.
model = {
    "global": {"tabEnableClose": False, "tabEnableFloat": True},
    "layout": {
        "type": "row",
        "children": [
            {
                "type": "tabset",
                "weight": 50,
                "children": [{"type": "tab", "name": "Light/Dark", "id": "theming-a"}],
            },
            {
                "type": "tabset",
                "weight": 50,
                "children": [{"type": "tab", "name": "Follows Mantine", "id": "theming-b"}],
            },
        ],
    },
}


def _panel(children):
    return html.Div(children, style={"padding": "16px"})


component = dfl.DashFlexLayout(
    id="theming-dock",
    model=model,
    useStateForModel=True,
    style={"height": "340px"},
    children=[
        dfl.Tab(id="theming-a", children=[_panel("Toggle the sun/moon switch in the header — this dock restyles to match.")]),
        dfl.Tab(id="theming-b", children=[_panel("The component reads `data-mantine-color-scheme` from <html> via a MutationObserver.")]),
    ],
)

Forcing a scheme

To pin the scheme regardless of the page, pass the colorScheme prop:

dfl.DashFlexLayout(id="dock", model=model, children=tabs, colorScheme="dark")

Custom styling

The component renders under .dash-dock-container with a .dash-dock-light or .dash-dock-dark modifier, so you can target FlexLayout's classes in your own CSS:

.dash-dock-dark .flexlayout__tabset { background: #1a1b1e; }
.dash-dock-dark .flexlayout__tab    { background: #16213e; color: #eee; }

Source: /theming

Note for AI agents: This is the static, prerendered view of an interactive Dash application served because we detected a non-JS user agent. Full prose docs: