How to get theme primary color hex value

[rexkenley]

I am using a component from another ui library. I want to use Fluent UI theme provider primary color as the "primary color" of that component.

How do I do that and can I get the hex value?

[pradeept95]

Hi @rexkenley,
I believe you can achieve this by using tokens (or css variables if you using .css or .scss, etc. file) to style your custom or third party components.

Here is the example that uses the primary/brand color scheme.
https://codesandbox.io/p/sandbox/competent-bas-tcclqd?file=%2Fsrc%2Fexample.tsx%3A26%2C11

This might not exactly answer your question but if you provide the more detail, there must be some solution. Please provide few more details like how and where you traying to use primary/brand color.

[rexkenley]

@pradeept95

Thanks for you reply. I did try the token, but like your screenshot it returns a name. I need the color hex value.

https://mui.com/material-ui/guides/creating-themed-components/#introduction

[pradeept95]

@rexkenley ,
Oh I see, if you need hex color code, you can directly access it from the theme object like webLightTheme for instance. You can use the same theme object that you're using in you FluentProvider.

I have updated my example to get the hex value. Hope this will help!

https://codesandbox.io/p/sandbox/competent-bas-tcclqd?file=%2Fsrc%2Fexample.tsx%3A37%2C23

[rexkenley]

But what if I am using a custom theme? Does that mean I have to pass the theme via props?

Is there a way to get theme from the parent without the use of props?

[tombohub]

@pradeept95 thank you, this is good

[tombohub]

@rexkenley if you are using custom theme following these guide then import that theme in component where you need to use the token and do const color = customTheme.colorBrandBackground

[rexkenley]

#31171