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:
Add a comment
|
2 Answers
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
answered Oct 26, 2020 at 17:59
-
1Seems like you are using correct variable but it is applying default blue color. Commented Oct 26, 2020 at 18:15
-
1However 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. Commented Oct 26, 2020 at 18:17 -
"[theme: themePrimary, default: #000000]";
That is how to use the default theme primary color.