## ColorSchemeToggle  
Use ColorSchemeToggle to switch light and dark color schemes.  
Category: Buttons  

The `ColorSchemeToggle` is a button that lets users switch between light and dark color themes.

It is built on the `ActionIcon` component. See the [ActionIcon documentation](/components/actionicon) for examples of 
styling with props such as `size`, `color`, and `gradient`.


### Usage

Copy this app to run it locally. For a live demo, click the `ColorSchemeToggle` in the header of these docs.

Note that the toggle switches themes automatically and does not require a Dash callback.

```python
import dash_mantine_components as dmc
from dash import Dash
from dash_iconify import DashIconify

app = Dash()

component = dmc.ColorSchemeToggle(
    lightIcon=DashIconify(icon="radix-icons:sun", width=20),
    darkIcon=DashIconify(icon="radix-icons:moon", width=20),
    color="yellow",
    size="lg",
    m="xl",
)

app.layout = dmc.MantineProvider(component)

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

```

### lightIcon and darkIcon

The `lightIcon` and `darkIcon` props accept any Dash component. For example, you can pass `DashIconify` to display icons 
for each theme. You can also wrap the icon with a tooltip component to show text on hover:

```python
import dash_mantine_components as dmc
from dash_iconify import DashIconify

dmc.ColorSchemeToggle(
    lightIcon=dmc.Tooltip(DashIconify(icon="radix-icons:sun"), label="Light mode"),
    darkIcon=dmc.Tooltip(DashIconify(icon="radix-icons:moon"), label="Dark mode"),
)
```

### computedColorScheme

The `computedColorScheme` prop is read-only and can be used as an `Input` in a Dash callback. This is useful when
you need to update Plotly figures or components such as `dash-ag-grid` based on the current Mantine theme. See examples
in the [Figure Templates](/components/figure-templates) and [Dash Ag Grid](/dash-ag-grid) sections.

`computedColorScheme` always returns `"light"` or `"dark"`, even if the toggle is set to `"auto"`.

```python
from dash import Input, Output
import dash_mantine_components as dmc

@app.callback(
    Output("color-scheme-output", "children"),
    Input("color-scheme-toggle", "computedColorScheme"),
)
def update(scheme):
    return f"Current color scheme: {scheme}"
```

### Custom theme switch components

If you want to create your own custom theme switch or need more control over how themes toggle, check out 
the [Theme Switch Components](/theme-switch) page for and example using `Switch`.


### Setting theme when the app is loading

The selected color scheme from `ColorSchemeToggle` is saved in `localStorage` under `mantine-color-scheme-value`, allowing
the correct styles to be applied before the app renders and preventing flashes of the wrong color on page load or refresh.

Use `pre_render_color_scheme()` at the top of your app to initialize the Mantine color scheme immediately, matching the
user’s preference or system theme:

```python
import dash_mantine_components as dmc

dmc.pre_render_color_scheme()
```

Note:  `pre_render_color_scheme()` required dash>=3.0

### Styles API


This component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.


#### ColorSchemeToggle Selectors

| Selector | Static selector               | Description                                                |
|----------|--------------------------------|------------------------------------------------------------|
| root     | .mantine-ActionIcon-root       | Root element                                               |
| icon     | .mantine-ActionIcon-icon       | Inner icon wrapper                                         |


#### ColorSchemeToggle CSS Variables

| Selector | Variable        | Description                                  |
|----------|-----------------|----------------------------------------------|
| root     | --ai-bg         | Controls background                         |
|          | --ai-hover      | Controls background when hovered            |
|          | --ai-bd         | Controls border                             |
|          | --ai-color      | Controls icon color                         |
|          | --ai-hover-color| Controls icon color when hovered            |
|          | --ai-radius     | Controls border-radius                      |
|          | --ai-size       | Controls width, height, min-width, and min-height styles |


#### ActionIcon Data Attributes

| Selector      | Attribute       | Condition                  |
|---------------|-----------------|----------------------------|
| root          | data-disabled   | `disabled` prop is set     |




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

- aria-* (string; optional):
    Wild card aria attributes.

- attributes (boolean | number | string | dict | list; optional):
    Passes attributes to inner elements of a component.  See Styles
    API docs.

- autoContrast (boolean; optional):
    If set, adjusts text color based on background color for `filled`
    variant.

- className (string; optional):
    Class added to the root element, if applicable.

- classNames (dict; optional):
    Adds custom CSS class names to inner elements of a component.  See
    Styles API docs.

- color (optional):
    Key of `theme.colors` or any valid CSS color. default
    `theme.primaryColor`.

- computedColorScheme (a value equal to: 'dark', 'light'; optional):
    Read-only Color Scheme.

- darkHidden (boolean; optional):
    Determines whether component should be hidden in dark color scheme
    with `display: none`.

- darkIcon (a list of or a singular dash component, string or number; optional):
    Icon shown when scheme is dark.

- data-* (string; optional):
    Wild card data attributes.

- disabled (boolean; optional):
    Sets `disabled` attribute, prevents interactions.

- gradient (dict; optional):
    Gradient values used with `variant="gradient"`. default
    `theme.defaultGradient`.

    `gradient` is a dict with keys:

- hiddenFrom (string; optional):
    Breakpoint above which the component is hidden with `display:
    none`.

- lightHidden (boolean; optional):
    Determines whether component should be hidden in light color
    scheme with `display: none`.

- lightIcon (a list of or a singular dash component, string or number; optional):
    Icon shown when scheme is light.

- loading_state (dict; optional):
    Object that holds the loading state object coming from
    dash-renderer. For use with dash<3.

    `loading_state` is a dict with keys:

- mod (string | dict | list of string | dicts; optional):
    Element modifiers transformed into `data-` attributes. For
    example: "xl" or {"data-size": "xl"}. Can also be a list of
    strings or dicts for multiple modifiers. Falsy values are removed.

- radius (number; optional):
    Key of `theme.radius` or any valid CSS value to set border-radius.
    Numbers are converted to rem. default `theme.defaultRadius`.

- size (number; optional):
    Controls width and height of the button. Numbers are converted to
    rem. default `'md'`.

- styles (boolean | number | string | dict | list; optional):
    Adds inline styles directly to inner elements of a component.  See
    Styles API docs.

- tabIndex (number; optional):
    tab-index.

- variant (string; optional):
    variant.

- visibleFrom (string; optional):
    Breakpoint below which the component is hidden with `display:
    none`.