Variable for theme text color

Question

I have a custom web part that I want to have styled correctly no matter what color theme is installed on the site. I have this working correctly for my button background colors like this:

.myButtons {
    background-color: $ms-color-themePrimary;
}

.myButtons:hover {
    background-color: $ms-color-themeDarkAlt;
}

My problem is that I need to know what foreground color to use. The stock web parts, for example, will change the foreground color to black or white depending on what color theme is selected and I'd like my web part to do the same so that users aren't forced to try to read white text on a yellow background or something.

Is there a variable to get the correct text color?

Answer 1

Short Answer

Here's the variable I was looking for:

color: $ms-color-white

Explanation

According to this Microsoft Docs page, modern sites only have values for the following variables:

backgroundImageUri  
accent
themeDark
themeDarkAlt
themeDarker
themeLight
themeLightAlt
themeLighter
themeLighterAlt
themePrimary
themeSecondary  
themeTertiary

I found this to be untrue, though.

Typing __themeState__ into the console will retrieve all the available color values and I found that several more were being populated by the various color themes.

The variables for use in the styles come from Microsoft's UI Fabric Core so finding the right value for me was just a matter of switching around the color themes until I found the right property in the __themeState__ (white in my case) and then matching it up with the correct UI Fabric Core variable ($ms-color-white).

Answer 2

Here you can find the documentation to use theme colors in your SPFx solution.