Mantine theme provides several functions that can be used to simplify writing styles.
All functions available at
theme.fn object, for example
You can use theme functions everywhere Mantine theme is available. There are 4 main ways to work with theme:
- createStyles function
All Mantine components have custom focus ring styles which are based on :focus-visible
pseudo-class. It is important to keep styles consistent across all of your application components and you should
include Mantine focus styles to your custom interactive elements.
theme.fn.focusStyles function lets you spread Mantine focus styles
without providing any additional parameters:
theme.fn.fontStyles function you can add font styles from your Mantine theme to any element.
Function returns font-family and font-smoothing styles:
theme.fn.largerThan function can help you write responsive styles with
You can use both functions as a replacement for regular media query syntax in
theme.fn.radialGradient can be used to generate simple gradients with equal colors distributions.
If you need anything more complex – you will need to write it from scratch:
theme.fn.gradient function returns string value with given gradient or with
if argument is not provided:
cover function returns styles to fully cover parent element:
theme.fn.darken functions can be used to lighten or darken a color by a given percentage.
Both functions work with hex, rgb and rgba formats and always return color in rgba format:
theme.fn.rgba function converts color to rgba format with given alpha channel:
theme.fn.primaryShade function returns primary shade for current or given color scheme:
theme.fn.primaryColor function returns primary color based on current or given color scheme: