Variable mantineThemeConst

Type Declaration

• OptionalactiveClassName?: string

  Class added to the elements that have active styles, for example, Button and ActionIcon

• OptionalautoContrast?: boolean

  Determines whether text color must be changed based on the given color prop in filled variant For example, if you pass color="blue.1" to Button component, text color will be changed to var(--mantine-color-black) Default value – false

• Optionalblack?: string

  Black color

• Optionalbreakpoints?: {
      lg?: string;
      md?: string;
      sm?: string;
      xl?: string;
      xs?: string;
      [key: string & {}]: string | undefined;
  }

  Object of values that are used to control breakpoints in all components, values are expected to be defined in em

• Optionalcolors?: {
      blue?: MantineColorsTuple;
      cyan?: MantineColorsTuple;
      dark?: MantineColorsTuple;
      grape?: MantineColorsTuple;
      gray?: MantineColorsTuple;
      green?: MantineColorsTuple;
      indigo?: MantineColorsTuple;
      lime?: MantineColorsTuple;
      orange?: MantineColorsTuple;
      pink?: MantineColorsTuple;
      red?: MantineColorsTuple;
      teal?: MantineColorsTuple;
      violet?: MantineColorsTuple;
      yellow?: MantineColorsTuple;
      [key: string & {}]: MantineColorsTuple | undefined;
  }

  Object of colors, key is color name, value is an array of at least 10 strings (colors)

• Optionalcomponents?: {
      [key: string]:
          | { classNames?: any; defaultProps?: any; styles?: any; vars?: any }
          | undefined;
  }

  Allows adding classNames, styles and defaultProps to any component

• OptionalcursorType?: "default" | "pointer"

  Determines which cursor type will be used for interactive elements

  • default – cursor that is used by native HTML elements, for example, input[type="checkbox"] has cursor: default styles
  • pointer – sets cursor: pointer on interactive elements that do not have these styles by default

• OptionaldefaultGradient?: { deg?: number; from?: string; to?: string }

  Default gradient configuration for components that support variant="gradient"

• OptionaldefaultRadius?: MantineRadius

  Key of theme.radius or any valid CSS value. Default border-radius used by most components

• OptionalfocusClassName?: string

  Class added to the elements that have focus styles, for example, Button or ActionIcon. Overrides theme.focusRing property.

• OptionalfocusRing?: "auto" | "always" | "never"

  Controls focus ring styles. Supports the following options:

  • auto – focus ring is displayed only when the user navigates with keyboard (default value)
  • always – focus ring is displayed when the user navigates with keyboard and mouse
  • never – focus ring is always hidden (not recommended)

• OptionalfontFamily?: string

  Font-family used in all components, system fonts by default

• OptionalfontFamilyMonospace?: string

  Monospace font-family, used in code and other similar components, system fonts by default

• OptionalfontSizes?: {
      lg?: string;
      md?: string;
      sm?: string;
      xl?: string;
      xs?: string;
      [key: string & {}]: string | undefined;
  }

  Object of values that are used to control font-size property in all components

• OptionalfontSmoothing?: boolean

  Determines whether font-smoothing property should be set on the body, true by default

• Optionalheadings?: {
      fontFamily?: string;
      fontWeight?: string;
      sizes?: {
          h1?: { fontSize?: string; fontWeight?: string; lineHeight?: string };
          h2?: { fontSize?: string; fontWeight?: string; lineHeight?: string };
          h3?: { fontSize?: string; fontWeight?: string; lineHeight?: string };
          h4?: { fontSize?: string; fontWeight?: string; lineHeight?: string };
          h5?: { fontSize?: string; fontWeight?: string; lineHeight?: string };
          h6?: { fontSize?: string; fontWeight?: string; lineHeight?: string };
      };
      textWrap?: "wrap"
      | "nowrap"
      | "balance"
      | "pretty"
      | "stable";
  }

  Controls various styles of h1-h6 elements, used in Typography and Title components

• OptionallineHeights?: {
      lg?: string;
      md?: string;
      sm?: string;
      xl?: string;
      xs?: string;
      [key: string & {}]: string | undefined;
  }

  Object of values that are used to control line-height property in Text component

• OptionalluminanceThreshold?: number

  Determines which luminance value is used to determine if text color should be light or dark. Used only if theme.autoContrast is set to true. Default value is 0.3

• Optionalother?: { [key: string]: any }

  Any other properties that you want to access with the theme objects

• OptionalprimaryColor?: string

  Key of theme.colors, hex/rgb/hsl values are not supported. Determines which color will be used in all components by default. Default value – blue.

• OptionalprimaryShade?:
      | MantineColorShade
      | {
          dark?: MantineColorShade | undefined;
          light?: MantineColorShade | undefined;
      }

  Index of theme.colors[color]. Primary shade is used in all components to determine which color from theme.colors[color] should be used. Can be either a number (0–9) or an object to specify different color shades for light and dark color schemes. Default value { light: 6, dark: 8 }

  For example, { primaryShade: 6 } // shade 6 is used both for dark and light color schemes { primaryShade: { light: 6, dark: 7 } } // different shades for dark and light color schemes

• Optionalradius?: {
      lg?: string;
      md?: string;
      sm?: string;
      xl?: string;
      xs?: string;
      [key: string & {}]: string | undefined;
  }

  Object of values that are used to set border-radius in all components that support it

• OptionalrespectReducedMotion?: boolean

  Determines whether user OS settings to reduce motion should be respected, false by default

• Optionalscale?: number

  Rem units scale, change if you customize font-size of <html /> element default value is 1 (for 100%/16px font-size on <html />)

• Optionalshadows?: {
      lg?: string;
      md?: string;
      sm?: string;
      xl?: string;
      xs?: string;
      [key: string & {}]: string | undefined;
  }

  Object of values that are used to add box-shadow styles to components that support shadow prop

• Optionalspacing?: {
      lg?: string;
      md?: string;
      sm?: string;
      xl?: string;
      xs?: string;
      [key: number]: string | undefined;
      [key: string & {}]: string | undefined;
  }

  Object of values that are used to set various CSS properties that control spacing between elements

• OptionalvariantColorResolver?: VariantColorsResolver

  Function to resolve colors based on variant. Can be used to deeply customize how colors are applied to Button, ActionIcon, ThemeIcon and other components that use colors from theme.

• Optionalwhite?: string

  White color