[SOLVED] ThemeProvider - override primaryColor set primaryColor as name, not as hex

[rancid pagoda]

Hi! I faced some strange behaviour during overriding theme - I followed instruction from the docs, and override colors with some additional palette. When I try to override primaryColor and apply it to some place, it uses name of the color, and not hex. Maybe I'm doing something wrong - so the question is - how to actually use primaryColor in createStyles, when you have it overwritten, or what is the proper way to override primaryColor to use it then everywhere?
P.S. attach1 - how I override colors and primaryColor ('' instead of "" doesnt work as well), attach2 - how I use it in createStyles, attach3 - how it is applied
P.P.S other overwritten colors work well, and I can directly call them from the createStyles, you can see it on screenshot2

[past oar]

theme.primaryColor stores what you've set on theme, it must be a key of theme.colors. Too use it in theme: theme.colors[theme.primaryColor][6] or theme.fn.primaryColor()

[rancid pagoda]

oh wow, thank you very much for the quick answer!

one more question - do you know how to then use color variable in the same overriding block? Like here neutral[2] doesnt work (of course) - but how to call it from here?

[past oar]

theme.colors.neutral[2]

[rancid pagoda]

it cannot find it here, because we are already inside theme

[past oar]

See example – https://mantine.dev/styles/global-styles/#global-styles-on-theme

[rancid pagoda]

doesnt work for me as well( even if I'll copypaste code from the example

[past oar]

https://codesandbox.io/s/xenodochial-panini-ux8go0?file=/src/App.tsx

[rancid pagoda]

get it! I didnt throw theme in props 😬 🤪

thank you so much!