SPFX - What is the scss variable for the themes primary colour?

Question

What is the scss variable for the themes primary color (orange)?

I am using: $ms-color-themePrimary

But this is giving me a blue color and not the orange one displayed in the image below:

Answer 1

I would suggest you to follow below Microsoft documentation to use theme colors in your SharePoint Framework customizations:

Use theme colors in your SharePoint Framework customizations

You can also check all the available theme color values on your SharePoint site by typing __themeState__ into the console.

The variables for use in the styles come from Microsoft's Fluent UI Theme Slots.

As per my knowledge the HEX for orange color used in SharePoint is #CA5010.

Additional Reference: How to use Theme Colors in SPFX Web Parts

Answer 2

"[theme: themePrimary, default: #000000]";

That is how to use the default theme primary color.