## Colors How to use colors with Dash Mantine Components. Category: Theming Mantine uses [open-color](https://yeun.github.io/open-color/) in default theme with some additions. Each color has 10 shades. ### Colors in the default theme Colors are stored in the [theme object](/theme-object) as an array of strings. Each color is indexed from `0` (lightest) to `9` (darkest). The default theme is available as `dmc.DEFAULT_THEME`, which contains all theme properties with their default values. For example, access a specific shade by using the color name and index: `dmc.DEFAULT_THEME['colors']['blue'][1]` Colors with larger indices are darker. ```python import dash_mantine_components as dmc from dash import html component = html.Div( " This is a blue element", style={ "backgroundColor": dmc.DEFAULT_THEME["colors"]["blue"][1], "color": dmc.DEFAULT_THEME["colors"]["blue"][9], "padding": dmc.DEFAULT_THEME["spacing"]["lg"] } ) ``` When using the `color` or other style props like `c`, `bd` or `bg` prop, you can use just the color.index: ```python import dash_mantine_components as dmc component = dmc.Group([ dmc.Button("Button", color="blue.3"), dmc.Button("Button", variant="light", color="blue.3"), dmc.Button("Button", variant="outline", color="blue.3") ]) ``` ### Colors as CSS Variables Mantine also exposes colors as CSS variables. A complete list of Mantine CSS variables is available in the [Mantine Docs](https://mantine.dev/styles/css-variables-list/). If you define custom colors in the `theme` object (via the `MantineProvider` component), these will also be included as CSS variables. ```python import dash_mantine_components as dmc from dash import html component = html.Div( " This is a blue theme", style={ "backgroundColor": "var(--mantine-color-blue-1)", "color": "var(--mantine-color-blue-9)", "padding": "var(--mantine-spacing-lg)", } ) ``` ### Adding extra colors You can add any number of extra colors to `theme.colors` object. This will allow you to use them in all components that support color prop, for example `Button`, `Badge` and `Switch`. ```python import dash_mantine_components as dmc dmc.MantineProvider( theme={ "colors": { "myColor": [ "#F2FFB6", "#DCF97E", "#C3E35B", "#AAC944", "#98BC20", "#86AC09", "#78A000", "#668B00", "#547200", "#455D00", ] }, }, children=[dmc.Button("Custom Colors!", color="myColor")], ) ``` ### Changing colors You can override named theme colors as well, by providing your own list of 10 colors ```python dmc.MantineProvider( theme={ "colors": { "blue": [... ] # your 10 colors for "blue" theme color } } ) ``` > 10 shades per color > > Colors override must include at least 10 shades per color. Otherwise, you will get a TypeScript error and some > variants will not have proper colors. If you only have one color value, you can either pick the remaining colors > manually or use the [colors generator tool](https://mantine.dev/colors-generator/). > > You can add more than 10 shades per color: these values will not be used by Mantine components with the default > colors resolver, but you can still reference them by index, for example, color="blue.11". ### Supported color formats You can use the following color formats in theme.colors: - HEX: `#fff`, `#ffffff` - RGB: `rgb(255, 255, 255)`, `rgba(255, 255, 255, 0.5)` - HSL: `hsl(0, 0%, 100%)`, `hsla(0, 0%, 100%, 0.5)` - OKLCH: `oklch(96.27% 0.0217 238.66)`, `oklch(96.27% 0.0217 238.66 / 0.5)` ### Changing Theme Object defaults You can change the defaults for `primaryColor` and `primaryShade` in the [theme object](/theme-object) in the `MantineProvider` component. #### primaryColor The value of `theme.primaryColor` must be defined as key of `theme.colors`, it is used: - As a default value for most of the components that support color prop - To set default focus ring outline color You can customize the primary color by changing it from its default value of `blue` to another predefined theme color. This example changed the default primary color to `green`: ```python dmc.MantineProvider( theme={"primaryColor": "green"}, children=[] # your layout here ) ``` > Note You cannot assign CSS color values to `defaultColor` It must be a defined color in the `theme` object. #### primaryShade `theme.primaryShade` is a number from 0 to 9. It determines which shade will be used for the components that have color prop. ```python dmc.MantineProvider( theme={"primaryShade": 3}, children=dmc.Group([ dmc.Button("Button",), dmc.Button("Button", variant="light"), dmc.Button("Button", variant="outline") ]) ) ``` You can also customize primary shade for dark and light color schemes separately (This is the default): ```python dmc.MantineProvider( theme={"primaryShade": { "light": 6, "dark": 8 }}, children=[] # your layout here ) ``` ### Color prop Components that support changing their color have color prop. This prop supports the following values: - Key of `theme.colors`, for example, `blue` or `green` - Key of `theme.colors` with color index, for example, `blue.5` or `green.9` - CSS color value, for example, #fff or rgba(0, 0, 0, 0.5) ```python import dash_mantine_components as dmc component= dmc.Box([ dmc.Text("Filled variant", size="sm", mb=5, fw=500), dmc.Group([ dmc.Button("Theme color", color="cyan"), dmc.Button("Hex color", color="#1D72FE") ]), dmc.Text("Light variant", size="sm", mb=5, mt="md", fw=500), dmc.Group([ dmc.Button("Theme color", variant="light", color="cyan"), dmc.Button("Hex color", variant="light", color="#1D72FE") ]), dmc.Text("Outline variant", size="sm", mb=5, mt="md", fw=500), dmc.Group([ dmc.Button("Theme color", variant="outline", color="cyan"), dmc.Button("Hex color", variant="outline", color="#1D72FE") ]) ]) ``` ### Colors index reference You can reference colors by index in `color` prop and style props, for example `c` prop: ```python dmc.Text("Text with blue.5 color", c="blue.5") dmc.Button("Button", color="blue.5") ``` ### Difference between color and c props `color` prop is used to control multiple CSS properties of the component. These properties can vary across different components, but usually `color` prop controls `background`, `color` and `border-color` CSS properties. For example, when you set `color='#C3FF36'` on `Button` component (with `variant='filled'`), it will set the following CSS properties: - `background-color` to `#C3FF36` - `background-color` when button is hovered to `#B0E631` (`#C3FF36` darkened by 10%) - color to `var(--mantine-color-white)` - `border-color` to `transparent` `c` is a [style prop](/style-props) – it is responsible for setting a single CSS property `color` (color of the text). You can combine both props to achieve better contrast between text and background. In the following example: - `color` prop sets all background: #C3FF36 and color: `var(--mantine-color-white)` - `c` prop overrides color styles to `color: var(--mantine-color-black)` ```python import dash_mantine_components as dmc component = dmc.Button("Button with color and c props", color="#C3FF36", c="black") ``` ### Colors in light and dark mode #### Using light-dark() CSS Function The [light-dark()](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/light-dark) function allows defining different styles for light and dark color schemes. ```css background-color: light-dark(white, black); ``` - The first argument applies in light mode. - The second argument applies in dark mode. Note that the light-dark() function is not supported in older browsers. ```python import dash_mantine_components as dmc component = dmc.Box([ dmc.Text( "Click the theme switch in the header to see how the background changes in different modes:" ), # Using CSS color names dmc.Text( "light-dark(whitesmoke, gray)", style={"backgroundColor": "light-dark(whitesmoke, gray)"}, p="lg", m="md" ), # Using Mantine CSS variables dmc.Text( "light-dark(var(--mantine-color-blue-1), var(--mantine-color-blue-9))", style={"backgroundColor": "light-dark(var(--mantine-color-blue-1), var(--mantine-color-blue-9))"}, p="lg", m="md" ) ]) ``` #### CSS Class Names for Light/Dark Mode Since light-dark() is not supported in older browsers, you can use class-based styling instead: ```python import dash_mantine_components as dmc component = dmc.Box([ dmc.Text( "Click the theme switch in the header to see how the background changes in different modes" ), dmc.Text( "CSS class defined for light and dark scheme", className="light-dark-demo", p="lg", m="md" ), ]) ``` ```css /* applied in light color-scheme */ .light-dark-demo { background-color: #ffec99 } /* applied in dark color-scheme */ [data-mantine-color-scheme='dark'] .light-dark-demo { background-color: #ff6b6b } /* You can also use mantine colors .light-dark-demo { background-color: var(--mantine-color-blue-1) } [data-mantine-color-scheme='dark'] .light-dark-demo { background-color: var(--mantine-color-blue-1) */ ``` #### CSS Variables for Light/Dark Mode Defining CSS variables on the `:root` element allows global styling across your app, including the `body` element. Here is an example using a CSS variable: ```python import dash_mantine_components as dmc component = dmc.Box([ dmc.Text( "Click the theme switch in the header to see how the background changes in different modes:" ), dmc.Text( "CSS variable defined for light and dark scheme", style={"backgroundColor": "var(--my-light-dark-colors"}, p="lg", m="md" ), ]) ``` ```css :root { --my-light-dark-colors: aliceblue; } :root[data-mantine-color-scheme="dark"] { --my-light-dark-colors: blue; } /* You can also use mantine colors :root { --my-light-dark-colors: var(--mantine-color-blue-1); } :root[data-mantine-color-scheme="dark"] { --my-light-dark-colors: var(--mantine-color-blue-1); } */ /* The --mantine-color-body CSS variable is used for body background and as background color of some components (Modal, Paper, etc.). You can change it like this: :root { --mantine-color-body: #f9f9f9; } :root[data-mantine-color-scheme="dark"] { --mantine-color-body: #333; } */ ``` ### Default colors ```python import dash_mantine_components as dmc colors = dmc.DEFAULT_THEME["colors"] component= dmc.SimpleGrid([ dmc.Card([ dmc.Box(h=100, w=100, bg=f"{c}.{i}" ), dmc.Text(f"{c} {i}", size="sm"), dmc.Text(f"{colors[c][i]}", size="sm", c="dimmed") ]) for c in list(colors) for i in range(10) ], cols={ "base": 5, "lg": 10 }, spacing="xs") ``` ### Default colors: CSS Variables list For a list of all Mantine CSS variables that are generated from default theme, see the [CSS Variables](/css-variables/) section.