[Mantine UI Series] The Theming System

[reboottime]

Overview

This article discuss the Mantine UI theming system and the real world practices.

[reboottime]

What is for, the theme object on MantineProvider

Mantine theme is an object where your application's colors, fonts, spacing, border-radius and other design tokens are stored.

Mantine UI provides global-level access to theme configuration, allowing users to easily update the theme. For instance,

import { MantineProvider } from '@mantine/core';

function Demo() {
  return (
    <MantineProvider
      withGlobalStyles
      withNormalizeCSS
      theme={{
        colorScheme: 'light',
        colors: {
          // Add your color
          deepBlue: ['#E9EDFC', '#C1CCF6', '#99ABF0' /* ... */],
          // or replace default theme color
          blue: ['#E9EDFC', '#C1CCF6', '#99ABF0' /* ... */],
        },

        shadows: {
          md: '1px 1px 3px rgba(0, 0, 0, .25)',
          xl: '5px 5px 3px rgba(0, 0, 0, .25)',
        },

        headings: {
          fontFamily: 'Roboto, sans-serif',
          sizes: {
            h1: { fontSize: '2rem' },
          },
        },
      }}
    >
      <App />
    </MantineProvider>
  );
}

Which could be helpful for design system extension if the design system given from designer has difference with the default mantine system.

• the color system
• the font system
• and the box model systems

[reboottime]

The color system

Mantine UI uses open color standard to organize its colors and respective shades , utilizing an indexed approach ranging from 0 to 9.

When applying the color property on any components that supports color property, Mantine UI applies the default shade value on the theme for that color.

You can explore the default colors available within the Mantine UI color system here(https://mantine.dev/theming/colors/#default-colors) you can find the default colors for Mantine UI color system.

---

FAQs

• Primary Secondary: Unlike element ui, Mantine UI applies the color property as the way to define a component's theme, so there is no primary, secondary color concepts in mantine ui system
• What is primary applied as in mantine ui system: the default color value when there is no color provided on a component.

[reboottime]

The typography system

In CSS theme system, Typography takes an important part in expressing.

Mantine Ui provides exposure to update the font system globally, including

• font applied on heading and all components except title. code, kbd
• font size applied on heading and all components
• you can also load custom font via [Global](https://mantine.dev/styles/global-styles/#global-styles-on-theme)

Here is

[reboottime]

Theme functions

Mantine theme provides several functions that can be used to simplify writing styles, including

• responsive media query range
• gradient color
• color functions
  • darken
  • shade