Search code examples
reactjsuser-interfacecolorsmantine

Mantine Primary Color

I want to know the Mantine primary color properties so that I can just change the primary color of all components in the theme object:

const theme = {
  fontFamily:
    'Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif,Apple Color Emoji, Segoe UI Emoji',
  primaryColor: 'blue',
};

export default theme;

I only know two properties so far, that is var(--mantine-primary-color-filled) and var(--mantine-primary-color-light-hover).

Are there any other properties that I can find or any ways to define these? Thanks.

Solution

  • All the Mantine default CSS variables are in the CSS variables list documentation. The CSS variables resolver utility allows you to redefine existing Mantine variables and/or define your own.