## MantineProvider  
Use MantineProvider component to manage themes in your app globally.  
Category: Theming  

Wrap your `app.layout` with a single `MantineProvider` to enable theming and styling features across your app. There should only be one `MantineProvider` in your app.

The `MantineProvider`:

1. Sets the global theme, including colors, spacing, and fonts.
2. Handles light and dark mode toggling.
3. Provides Mantine CSS variables according to the selected theme.

### Usage

Your app must be wrapped inside a MantineProvider, and it must be used only once.

```python
import dash_mantine_components as dmc

app.layout = dmc.MantineProvider(
    theme = {...},
    children={...}
)
```

### Theme object

See the [Theme Object](/theme-object) section to learn how to customize the default Mantine theme.


### Custom Colors

See the [Colors](/colors) section to learn how to customize the theme colors.

### Light and Dark Color Schemes
Mantine supports both light and dark color schemes.  The default color scheme is "light".
When the `MantineProvider` is added to your app, it automatically sets the `data-mantine-color-scheme` attribute at the 
top level of the app. This attribute controls whether the app uses light or dark mode. All components in the app 
reference this attribute to decide which colors to apply.

You can change the color scheme with the `forceColorScheme` prop.

In the [Theme Switch Components](/theme-switch) section, learn how to add a component to allow users to select either light or dark mode.

```python
import dash_mantine_components as dmc

app.layout = dmc.MantineProvider(
    forceColorScheme="dark",
    theme = {...},
    children={...}
)
```


### Keyword Arguments


#### MantineProvider

- children (a list of or a singular dash component, string or number; optional):
    Your application.

- id (string; optional):
    Unique ID to identify this component in Dash callbacks.

- classNamesPrefix (string; optional):
    A prefix for components static classes (for example
    {selector}-Text-root), `mantine` by default.

- colorSchemeManager (dict; optional):
    Used to retrieve/set color scheme value in external storage, by
    default uses `window.localStorage`.

    `colorSchemeManager` is a dict with keys:

- cssVariablesResolver (dict; optional):
    Function to generate CSS variables based on theme object.

    `cssVariablesResolver` is a dict with keys:

- cssVariablesSelector (string; optional):
    CSS selector to which CSS variables should be added, by default
    variables are applied to `:root` and `:host`.

- deduplicateCssVariables (boolean; optional):
    Determines whether CSS variables should be deduplicated: if CSS
    variable has the same value as in default theme, it is not added
    in the runtime. @,default,`True`.

- defaultColorScheme (a value equal to: 'auto', 'dark', 'light'; optional):
    Default color scheme value used when `colorSchemeManager` cannot
    retrieve value from external storage, `light` by default.

- env (a value equal to: 'default', 'test'; optional):
    Environment at which the provider is used, `'test'` environment
    disables all transitions and portals.

- forceColorScheme (a value equal to: 'dark', 'light'; optional):
    Forces color scheme value, if set, MantineProvider ignores
    `colorSchemeManager` and `defaultColorScheme`.

- getStyleNonce (boolean | number | string | dict | list; optional):
    getStyleNonce is a function to generate
    [nonce](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce)
    attribute added to dynamic generated `<style />` tags.

- stylesTransform (dict; optional):
    An object to transform `styles` and `sx` props into css classes,
    can be used with CSS-in-JS libraries.

    `stylesTransform` is a dict with keys:

- theme (dict; optional):
    Theme override object.

    `theme` is a dict with keys:

- withCssVariables (boolean; optional):
    Determines whether theme CSS variables should be added to given
    `cssVariablesSelector` @,default,`True`.

- withGlobalClasses (boolean; optional):
    Determines whether global classes should be added with `<style />`
    tag. Global classes are required for `hiddenFrom`/`visibleFrom`
    and `lightHidden`/`darkHidden` props to work. @,default,`True`.

- withStaticClasses (boolean; optional):
    Determines whether components should have static classes, for
    example, `mantine-Button-root`. @,default,`True`.