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:

enter image description here

2 Answers 2


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

  • 1
    Seems like you are using correct variable but it is applying default blue color. Oct 26, 2020 at 18:15
  • 1
    However in scss, you can also define your own variable like $ms-themePrimary: "[theme:themePrimary, default: #0078d7]"; and use them in your solution. check the last link provided in my answer for more details. Oct 26, 2020 at 18:17
  • Thanks mate all working now :)
    – BennKingy
    Oct 26, 2020 at 18:19

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

That is how to use the default theme primary color.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.