this.gui
    Preparing search index...

    Interface MuiTheme

    Our TypeScript guide on theme customization explains in detail how you would add custom properties.

    interface MuiTheme {
        applyStyles: ApplyStyles<"light" | "dark">;
        breakpoints: Breakpoints;
        components?: Components<BaseTheme>;
        containerQueries: (name: string) => ContainerQueries & ContainerQueries;
        cssVariables?: false;
        custom?: Record<string, any>;
        direction: Direction;
        GUI: { [key: string]: unknown };
        insets?: Partial<Insets>;
        layout: { insets: Insets };
        mixins: Mixins;
        palette: Palette;
        shadows: Shadows;
        shape: Shape;
        spacing: Spacing;
        transitions: Transitions;
        typography: Typography;
        unstable_strictMode?: boolean;
        unstable_sx: (props: SxProps<MuiTheme>) => CSSObject;
        unstable_sxConfig: SxConfig;
        updateInsets?: (next: Partial<Insets>, source?: string) => void;
        visuals: {
            accents: {
                aurora: {
                    chip:
                        | "primary"
                        | "secondary"
                        | "success"
                        | "warning"
                        | "error"
                        | "info"
                        | "default";
                    soft: string;
                    strong: string;
                };
                ember: {
                    chip: | "primary"
                    | "secondary"
                    | "success"
                    | "warning"
                    | "error"
                    | "info"
                    | "default";
                    soft: string;
                    strong: string;
                };
                monolith: {
                    chip: | "primary"
                    | "secondary"
                    | "success"
                    | "warning"
                    | "error"
                    | "info"
                    | "default";
                    soft: string;
                    strong: string;
                };
            };
        };
        zIndex: ZIndex;
    }

    Hierarchy

    • BaseTheme
    • CssVarsProperties
      • MuiTheme
    Index

    Properties

    applyStyles: ApplyStyles<"light" | "dark">
    breakpoints: Breakpoints
    components?: Components<BaseTheme>
    containerQueries: (name: string) => ContainerQueries & ContainerQueries
    cssVariables?: false
    custom?: Record<string, any>

    Parking spot for all design tokens not mapped natively to MUI

    direction: Direction
    GUI: { [key: string]: unknown }
    insets?: Partial<Insets>

    Optional legacy field for back-compat (some code reads theme.insets)

    layout: { insets: Insets }

    Runtime layout insets coordinated by NavBar/Drawers (pixels).

    mixins: Mixins
    palette: Palette
    shadows: Shadows
    shape: Shape
    spacing: Spacing
    transitions: Transitions
    typography: Typography
    unstable_strictMode?: boolean
    unstable_sx: (props: SxProps<MuiTheme>) => CSSObject
    unstable_sxConfig: SxConfig
    updateInsets?: (next: Partial<Insets>, source?: string) => void

    Callback to update insets; injected by Theme

    visuals: {
        accents: {
            aurora: {
                chip:
                    | "primary"
                    | "secondary"
                    | "success"
                    | "warning"
                    | "error"
                    | "info"
                    | "default";
                soft: string;
                strong: string;
            };
            ember: {
                chip: | "primary"
                | "secondary"
                | "success"
                | "warning"
                | "error"
                | "info"
                | "default";
                soft: string;
                strong: string;
            };
            monolith: {
                chip: | "primary"
                | "secondary"
                | "success"
                | "warning"
                | "error"
                | "info"
                | "default";
                soft: string;
                strong: string;
            };
        };
    }
    zIndex: ZIndex