Skip to main content

I’m developiong a custom board view with React, the text on my page is not having the correct colors applied.

The color CSS property of a text element does have the value var(--primary-text-color) but since I’m on the dark theme, I would expect that the text color is white.


image


In my layout.tsx file, I have the following import:


import "monday-ui-react-core/tokens";

Do I need to do anything more in my code to apply the theme colors?

Should I use the ThemeProvider in my code? I’ve tried it, but it doesn’t make a difference for now.

Hello there @ngruson,


I checked with the team in charge of Vibe!


The best thing would be to use the ThemeProvider, in the Usage section in the docs there is some explanation:


Control themes in your application by setting theme classes (e.g. .light-app-theme) on your body and render everything else inside it. Or use systemTheme prop to make ThemeProvider set the theme class on the body for you.


Applying these classes on the body or using ThemeProvider should apply the dark theme values to the tokens.


If it does not, please open a ticket for us here and we will take a look!


Cheers,

Matias

Thanks Matias,

Now it works at my end. The page you mentioned has some example code for React, with some minor tweaks I was able to make it work and set the themeConfig and systemTheme props of the ThemeProvider.

I am glad that is the case @ngruson !!


Happy to help!

Reply


Terms & ConditionsCookie settings