Use SharePoint Theme colors in SASS exported variables

Question

I want to apply the color palette of the selected SharePoint theme to a SPFx webpart by setting a set of variables I export from the SPFx webpart's .scss. I want to define the colors as exported variables, rather than specifying classes, because I want to apply these colors inline in the outputted HTML and I need to be able to dynamically select the various color variables. The intent is to apply the various exported color variables to an array per the event's category, then set inline styles in the outputted HTML with the color of that event's category. I had thought I would be able to define the exported variables in the .scss such as:

@import "~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss";
@import "./node_modules/spfx-uifabric-themes/office.theme.vars";

//category color variables (in order to get theme's actual colors)
$categoryColor1: $ms-color-themePrimary;
$categoryColor2: $ms-color-themeSecondary;

:export {
  themeDark: $ms-color-themePrimary;

  //event category colors
  categoryColor1: $ms-color-themePrimary;
  categoryColor2: $ms-color-themeSecondary;
  categoryColor3: $ms-color-themeTertiary;
  categoryColor4: $ms-color-themeDark;
  categoryColor5: $ms-color-themeDarker;
  categoryColor6: $ms-color-themeDarkAlt;
}

Then apply them to the array per event such as:

  const categoryDropdownOption = await this.getChoiceFieldOptions(siteUrl, listId, 'Category');
  let categoryColor: { category: string, color: string }[] = [];
          let x = 1;
  for (const cat of categoryDropdownOption) {
    if (x == 1) {
      categoryColor.push({ category: cat.text, color: styles.categoryColor1});
    }
    if (x == 2){
      categoryColor.push({ category: cat.text, color: styles.categoryColor2});
    }
    if (x == 3){
      categoryColor.push({ category: cat.text, color: styles.categoryColor3});
    }
    if (x == 4){
      categoryColor.push({ category: cat.text, color: styles.categoryColor4});
    }
    if (x == 5) {
      categoryColor.push({ category: cat.text, color: styles.categoryColor5});
    }
    if (x == 6) {
      categoryColor.push({ category: cat.text, color: styles.categoryColor6});
    }
    if (x > 6){
      categoryColor.push({ category: cat.text, color: await this.colorGenerate() });
    }
    x++;
  }

And finally apply to the SPFx webpart's HTML (where the array items have been set to the "color" property of an event object:

<Icon iconName='MapPin' className={styles.locationIcon} style={{ color: event.color }} />

But when debugging the results I find that the color set in the exported variable is a string literal such as "'[theme:themeDarkAlt, default: #106ebe]'" instead of being the actual theme color. If I specify the exact colors in my exported variables, such as the following, the colors are applied as intended. Therefore, I've concluded the issue is that the Sass does not set the exported variable's color per the theme. Any suggestions?

:export {
  themeDark: $ms-color-themePrimary;

  //event category colors
  categoryColor1: #A4262C;
  categoryColor2: #5d1418;
  categoryColor3: rgb(199, 3, 13);
  categoryColor4: #222222;
  categoryColor5: #ca5a27;
  categoryColor6: #b9350c;
}

Answer 1

The @pnp/spfx-controls-react controls use code that isn't available from outside the library to achieve the results you're looking for. However, you can use the code in your own solution.

Take a look at: https://github.com/SharePoint/sp-dev-fx-controls-react/blob/43d85b46798a055b4f30bcc3a6eb04c0911bd092/src/common/utilities/ThemeColorHelper.ts

In your code, you'd simply call:

const yourDecodedColor: string = ThemeColorHelper.GetThemeColor(yourThemedColor)

I hope it helps?