Theme
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. Theme provides a way to your app's design to meet them.
For more information, refer to the Mantine documentation →
Predefined Themes
If you don't want to use the default Mantine theme, RefineThemes
has predefined themes for you. You can import predefined themes from the @refinedev/mantine
package.
const { Blue, Purple, Magenta, Red, Orange, Yellow } = RefineThemes;
import { Refine } from "@refinedev/core";
import { ThemedLayoutV2, RefineThemes } from "@refinedev/mantine";
import { MantineProvider } from "@mantine/core";
const App: React.FC = () => {
return (
<MantineProvider theme={RefineThemes.Blue}>
<Refine
/* ... */
>
<ThemedLayoutV2>{/* ... */}</ThemedLayoutV2>
</Refine>
</MantineProvider>
);
};
Theme customization
<MantineProvider/>
component can be used to change the theme. It is not required if you decide to use the default theme. You can also use RefineThemes
provided by refine.
For more information, refer to the
<MantineProvider/>
documentation →
Overriding the refine themes
You can override or extend the default refine themes. You can also create your own theme. Let's see how you can do this:
For more information, refer to the Mantine colors documentation →
Theme switching
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.
For more information, refer to the Mantine dark theme documentation →
If you want to customize the default layout elements provided with @refinedev/mantine
package, check out the Custom ThemedLayout tutorial.