If theme colors are specified in OKLCH format, fallback colors are not generated for older browsers

[andrictham]

Dependencies check up

• I have verified that I use latest version of all @mantine/* packages

What version of @mantine/* packages do you have in package.json?

7.15.2

What package has an issue?

@mantine/core

What framework do you use?

Next.js

Describe the bug

As per the official Colors documentation, OKLCH is a supported color format.

Mantine inserts colors as inline CSS variables into the body inside of <style data-mantine-styles="true">.

When specifying OKLCH colors as theme colors, these variables will only be defined in OKLCH notation, without any fallback value in HEX.

This means older browsers (such as Safari on iOS 15) will not be able to render the color.

A common solution when using OKLCH colors is to install a polyfill for supporting older browsers, such as the PostCSS OKLab Function plugin.

I’ve already configured the PostCSS OKLab Function plugin in my project, postcss.config.cjs:

module.exports = {
  plugins: {
    "postcss-preset-mantine": {},
    "postcss-simple-vars": {
      variables: {
        "mantine-breakpoint-xs": "36em",
        "mantine-breakpoint-sm": "48em",
        "mantine-breakpoint-md": "62em",
        "mantine-breakpoint-lg": "75em",
        "mantine-breakpoint-xl": "88em",
      },
    },
    "@csstools/postcss-oklab-function": { preserve: true },
  },
};

This will help process any custom CSS modules I write, but it doesn’t seem to affect the theme color variables generated by Mantine.

Possible fix

When OKLCH color values are used in the theme object, Mantine should use a polyfill like the PostCSS OKLab Function plugin to generate fallback colors in HEX.

This could be included as part of postcss-preset-mantine, with an optional configuration option for supporting Display P3 colors.

[rtivital]

Mantine generates colors at runtime and injects them with style tag, it is not possible to process these values with PostCSS. Currently, it is not planned to provide an option to generate fallback values for OKLCH colors.

[andrictham]

@rtivital Is it possible to allow specifying a fallback color array in the theme object, which is then used as a fallback value for the color variables?

I don't mind pre-computing these fallback values myself, as long as it is possible.

I don't want to have to override the Mantine CSS variables at runtime if it is possible to do it via the theme object.