Mantine theme is an object where your application's colors, fonts, spacing, border-radius and other design tokens are stored. You can either create your own theme object or use themes that provide from refine. There are two types of themes:
LightTheme tend to have dark text on a light background, while
DarkTheme have light text on a dark background. Theme provides a way to your app's design to meet them.
<MantineProvider/> component can be used to change theme. It is not required if you decide to use the default theme. You can also use
DarkTheme provided by refine.
Overriding the refine themes
You can override or extend the default refine themes. You can also create your own theme. Let's see how to do this.
You can switch between themes as Mantine mentioned in its documentation. You can see an example of using local storage to store the theme below.