Can anyone let me know the design pattern to use a SharePoint styling colour like themePrimary in a .tsx file (but not a css class).

Can only find references on how to use these variables in .scss or as css classes in a .tsx file via the Microsoft docs.

I would like to use it on this calendar component:

    eventColor={themePrimary} //#000000

1 Answer 1


You can follow the same methodology as outlined in the Supporting section backgrounds article.

Here's the summary:

  • Set supportsThemeVariants to true in your manifest
  • Add import { ThemeProvider, ThemeChangedEventArgs, IReadonlyTheme } from '@microsoft/sp-component-base'; to your webpart
  • Setup a ThemeProvider using this.context.serviceScope.consume(ThemeProvider.serviceKey);
  • Get access to the theme using this._themeProvider.tryGetTheme();
  • Use the theme doing something like this:

Alternatively, a less safe way is to do something like this:

let primaryThemeColor = window["__themeState__"].theme.themePrimary;

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.