Custom Theme Values

[DavidScicluna]

Hi, Is it possible to edit the theme values?

For example, I would like to add more font sizes other than the pre-defined theme values.

Something similar like colors would be great as I feel the theme forces us to only have values ranging from xs-xl

Thanks.

[rtivital]

You can add any amount of extra values to theme.other, other values of Mantine theme cannot be changed. https://mantine.dev/theming/extend-theme/#add-your-own-properties-to-theme

[DavidScicluna]

Yes, I understand, is there a reason why the theme cannot be changed?

[rtivital]

It would be impossible to type it with TypeScript if we allow dynamic values.

[DavidScicluna]

Oh okay understood, thank you for the quick reply @rtivital

[alexis-exaud]

It's not impossible to type it if you let us extend MantineTheme and type it ourselves.
As it is currently, colors can be overridden with MantineThemeColorsOverride, but MantineThemeOverride is useless since createTheme() won't acknowledge it, and useMantineTheme() also returns an object of type MantineTheme, not MantineThemeOverride

[rj-wowza]

How can I access existing theme values from theme.other in order to create second-class/alias design tokens?

For example:

const MyTheme: MantineThemeOverride = {
  colors: { 
    blue: BRAND_BLUE_COLOR_ARRAY,
    red: BRAND_RED_COLOR_ARRAY
  },
  primaryColor: 'blue',
  primaryShade: 4,
  ...,
  other: {
    secondaryColor: theme.colors.red[4],
    logo: {
      color: theme.other.secondaryColor,
      width: '8rem'
    }
  }
}

Alternatively, how can I add new component variants to the theme that extend existing variants, so that I do not need to re-define all of the component styles (e.g. hover, disabled states) for each custom variant?

For example:

const MyTheme: MantineThemeOverride = {
  components: {
    Button: {
      variants: {
        danger: (theme) => ({
          // suggested approach
          variant: theme.components.Button.filled,
          defaultProps: {
            color: theme.colors.red[7],
          },
          // possible alternative approach
          root: {
            ...theme.components.Button.filled,  // include border, active/hover/disabled, etc. 
            backgroundColor: theme.colors.red[7]
          }
        })
      }
    }
  }
}

[rj-wowza]

Well that's easy enough. Thanks for your prompt reply.

One thing to note is that the spread syntax is a shallow merge and could cause some values to be overwritten instead of combined. Maybe nesting MantineProvider is the answer for those cases.

[toddgeist]

trying to figure out how to add custom variants to my theme If anyone has a more complete example of this, I would appreciate it.

[rj-wowza]

@toddgeist You can declare new variants following the documentation here, but I never figured out a way to extend or inherit existing variants in a similar way to ThemeUI or Chakra. All of the styles for a variant must be declared "from scratch," or existing variants must be modified & adapted for new purposes. We ended up dropping Mantine because of these complexities and challenges related to theming.

[Stuj1]

@toddgeist v7 (in alpha) has Color Variant Resolver that I think will provide the extensibility you require.

[tombohub]

@rj-wowza what did you choose? Which one allows to inherit variants?