Overview

Customize a single instance

Global customization

CSS Module patterns

Universal style props

Set default Color Scheme

Button case study

Default theme

Gray Palette

Dark Palette

Colors and color schemes

Flex

Group

Stack

SimpleGrid

Container

Center

Divider

Space

Paper

Accordion

Appshell

Tabs

Table data

Table with explicit structure

Table from data prop

TextInput

NumberInput

FileInput

Native Select

SegmentedControl

Button

Button.Group

ActionIcon

Pagination

Modal

Title

Text

Bar Chart

Progress

RingProgress

Avatar

Notifications

useForm

useLocalStorage

useDisclosure

useMantineColorTheme

Mantine

# Set default Color Scheme



Mantine defaults to light mode.

We can change it to `dark` or `auto`. The latter conforms to the user's device color scheme:

```tsx
<MantineProvider defaultColorScheme="auto"></MantineProvider>
```