Skip to main content

Theme Guide

This document provides an overview of using themes in Dash with YipitMuiProvider, showcasing available palette colors, chart colors, and examples of overriding and using the theme dynamically.

Using the YipitMuiProvider in Dash with Theme Switcher and Persistence​

To use the theme in Dash, wrap your application with the YipitMuiProvider, set the desired mode (light or dark), and include a theme switcher for dynamic toggling. This guide also covers how to save the currently selected theme.

Example​

import dash
from dash import html, dcc, Output, Input
import yipit_dash_mui_components as ymc

dash._dash_renderer._set_react_version('18.2.0')

app = dash.Dash(__name__)

app.layout = html.Div([
    dcc.Store(id="theme-store", data={}),  # Store for saving theme data
    dcc.Store(id="mode-store", data="light"),  # Store for saving mode data
    ymc.YipitMUIProvider(
        id="theme-provider",
        mode="light",  # Default mode
        children=[
            ymc.ThemeSwitcher(id="theme-switcher", mode="light"),  # Theme switcher
            ymc.Box(
                sx={
                    "padding": 4,
                    "margin": 4,
                    "backgroundColor": "primary.main",
                    "color": "primary.contrastText",
                    "borderRadius": 2,
                    "textAlign": "center",
                },
                children="Hello, world!"
            ),
        ]
    ),
])

# Callback to save theme data to the theme store
@app.callback(
    Output("theme-store", "data"),
    Input("theme-provider", "theme")
)
def store_theme(theme):
    return theme

# Callback to save mode to the mode store
@app.callback(
    Output("mode-store", "data"),
    Input("theme-switcher", "mode")
)
def store_mode(mode):
    return mode

# Callback to update the mode in the theme provider
@app.callback(
    Output("theme-provider", "mode"),
    Input("mode-store", "data")
)
def update_theme_provider(mode):
    return mode

if __name__ == "__main__":
    app.run_server(debug=True)

Main Palette​

Overriding the Theme​

You can override the theme by passing custom colorSchemes for light and dark modes. Below is an example:

Example​

custom_theme = {
    "colorSchemes": {
        "light": {
            "palette": {
                "primary": {
                    "main": "#1976d2",
                    "light": "#63a4ff",
                    "dark": "#004ba0",
                },
                "chart": {
                    "color-1": "#ff5722",
                    "color-2": "#4caf50",
                    "color-3": "#2196f3",
                },
            },
        },
        "dark": {
            "palette": {
                "primary": {
                    "main": "#90caf9",
                    "light": "#e3f2fd",
                    "dark": "#42a5f5",
                },
                "chart": {
                    "color-1": "#ff7043",
                    "color-2": "#66bb6a",
                    "color-3": "#29b6f6",
                },
            },
        },
    },
}

Pass this theme to the YipitMUIProvider:

app.layout = ymc.YipitMUIProvider(
    id="theme-provider",
    mode="dark",
    theme=custom_theme,
    children=[
        ymc.Box("Custom themed application", sx={"padding": 4 })
    ]
)

Now you can fully customize and use the theme dynamically in your Dash projects!