Office UI Fabric theming

Question

I want to use the body text color in my web part, so if the theme is black, it would display text in white, if the background is white, it'd display it in black. Currently I am referencing this in my.scss file:

@import '~office-ui-fabric-react/dist/sass/References.scss'

I'm looking at these files under office-ui-fabric-react/dist/sass : _Font.scss and _Color.scss, but I'm not finding anything related to bodytext color.

Any help is appreciated.

Answer 1

You can reference theme colors within your scss files like so:

.myClass {
  color: "[theme: themePrimary, default: #0078d7]";
}

I believe in your situation you would use "black" or "neutralPrimary" for your color as it should invert when using a theme that is inverted (dark or black background).