Color text in primary color without hard coding color code/name | Mantine | Page 1

silk thorn Mar 14, 2026, 4:08 PM

#

Consider the following:

const theme = createTheme({ primaryColor: "teal" });

<Title>
  <Text c="teal" inherit span>
    primary color text
  </Text>{" "}
  normal color text
</Title>

It seems that --mantine-color-primary-text doesn't exist, so setting c="primary" will do nothing. Is there a way I could color a text in primary color, without hard coding c="teal"?

odd agate Mar 14, 2026, 4:21 PM

#

@silk thorn I believe it's by using the theme object

#

theme.colors.primaryColor

#

https://mantine.dev/theming/theme-object/

Theme object | Mantine

React components and hooks library with native dark theme support and focus on usability, accessibility and developer experience

silk thorn Mar 14, 2026, 4:25 PM

#

I wonder if there's a way of not accessing the theme. I'm using Next.js, and doing so means that I have to extract that rather simple code into a dedicated client component, just for the sake of accessing a context

odd agate Mar 15, 2026, 4:20 PM

#

Maybe using the CSS variables like --mantine-primary-color-0

#

https://mantine.dev/styles/css-variables-list/

#

color="var(--mantine-primary-color-8)"

#

But it forces you to choose the right shade explicitly, and it might not be ideal in some cases.

#Color text in primary color without hard coding color code/name