Fluentui: getTheme() Does Not Return Current SharePoint Online Site Theme Colors

[Arknev]

I have searched extensively for solutions to the issue in this question:
https://stackoverflow.com/questions/54768206/how-to-get-the-current-theme-in-a-spfx-webpart-using-the-new-ts-based-styling-ap

I've been following the guidance here:
https://developer.microsoft.com/en-us/fabric#/styles/web/colors/theme-slots
and here:
https://github.com/OfficeDev/office-ui-fabric-react/wiki/Component-Styling

All works well until the theme is changed. The colors that are returned are always the default.

Is there a minimum version for this functionality or is this experimental?

[maxwellred]

Thank you for the issue @Arknev! I'll look around and get back to you.

[cliffkoh]

cc @phkuo who likely knows...

[cliffkoh]

@Arknev can you please provide the SPFx version and UI Fabric version you're using?

[Arknev]

I think this is what you are looking for:

npm list office-ui-fabric-react
+-- @microsoft/[email protected]
| +-- @microsoft/[email protected]
| | -- [email protected] |-- [email protected]
+-- @microsoft/[email protected]
| +-- @microsoft/[email protected]
| | -- [email protected] |-- [email protected]
+-- @microsoft/[email protected]
| +-- @uifabric/[email protected]
| | -- [email protected] deduped |-- [email protected]
+-- @pnp/[email protected]
| -- [email protected] +-- @pnp/[email protected] |-- [email protected]
+-- @uifabric/[email protected]
| +-- @uifabric/[email protected]
| | -- [email protected] deduped |-- [email protected] deduped
`-- [email protected]

npm list @uifabric/styling
+-- @microsoft/[email protected]
| +-- @microsoft/[email protected]
| | +-- @uifabric/[email protected]
| | | -- @uifabric/[email protected] deduped | |-- [email protected]
| | -- @uifabric/[email protected] deduped |-- [email protected]
| -- @uifabric/[email protected] deduped +-- @microsoft/[email protected] | +-- @microsoft/[email protected] | |-- [email protected]
| | -- @uifabric/[email protected] deduped |-- [email protected]
| -- @uifabric/[email protected] deduped +-- @microsoft/[email protected] |-- [email protected]
| -- @uifabric/[email protected] deduped +-- @pnp/[email protected] |-- [email protected]
| +-- @uifabric/[email protected]
| | -- @uifabric/[email protected] deduped |-- @uifabric/[email protected]
+-- @pnp/[email protected]
| -- [email protected] | +-- @uifabric/[email protected] | |-- @uifabric/[email protected] deduped
| -- @uifabric/[email protected] +-- @uifabric/[email protected] |-- @uifabric/[email protected]
-- [email protected] +-- @uifabric/[email protected] |-- @uifabric/[email protected] deduped
+-- @uifabric/[email protected]
| -- @uifabric/[email protected] deduped -- @uifabric/[email protected]

npm list @microsoft/sp-core-library
+-- @microsoft/[email protected]
+-- @microsoft/[email protected]
| +-- @microsoft/[email protected]
| | -- @microsoft/[email protected] deduped | +-- @microsoft/[email protected] deduped | +-- @microsoft/[email protected] | |-- @microsoft/[email protected] deduped
| -- @microsoft/[email protected] |-- @microsoft/[email protected] deduped
+-- @microsoft/[email protected]
| +-- @microsoft/[email protected] deduped
| +-- @microsoft/[email protected]
| | -- @microsoft/[email protected] deduped | +-- @microsoft/[email protected] | |-- @microsoft/[email protected] deduped
| -- @microsoft/[email protected] |-- @microsoft/[email protected] deduped
+-- @microsoft/[email protected]
| +-- @microsoft/[email protected]
| | +-- @microsoft/[email protected] deduped
| | -- @microsoft/[email protected] | |-- @microsoft/[email protected] deduped
| -- @microsoft/[email protected] deduped -- [email protected]
`-- @microsoft/[email protected]

[phkuo]

This is not a Fabric issue but an SPFX issue, you should ask on their forums instead.
In terms of common mistakes I see:

• Do not use getTheme(). That only returns the theme at the current time and doesn't update when the theme updates.
• Within components themselves, you should follow the Fabric patterns of "inheriting" the theme from props, so that you automatically get subscribed to theme updates. It sounds like you're already doing this?
• SPFX provides its own way to get the theme, you'll want to consult their documentation. The patterns and APIs laid out there take priority over the APIs recommended here in Fabric.

[phkuo]

Additionally I recently introduced a bug in v6.50.4 of @uifabric/styling that prevented theming from working, if you're using that version you'll want to update to at least v6.50.5.

[phkuo]

The buggy version of @uifabric/styling in v7 (master) was v7.4.1, fixed in v7.5.1.

[Arknev]

For anyone else who finds this, the best answer I found to get the theme in SPFx is here: https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/guidance/supporting-section-backgrounds

Which uses the ThemeProvider service.

Edit 9/9/19
The above solution allows you to adjust to section backgrounds. If you only want to get the current theme and NOT adjust to variants, like setting your own BG colors, I used this:

Build the theme at the root ts file

const ThemeColorsFromWindow: any = (window as any).__themeState__.theme;
const siteTheme: ITheme = createTheme({ //pass this object to your components
  palette: ThemeColorsFromWindow
});

Then I passed the theme to my components where needed.

<MyButton
    ButtonText={this.props.itemButtonText}
    ButtonType={'dark'}
    ButtonURL={this.props.itemButtonURL}
    siteTheme={siteTheme} //site theme is passed to component
/>

Build my CSS-in-JS object

  const siteTheme: IReadonlyTheme = this.props.siteTheme; //shortening the path a little

  ButtonStyles: IButtonStyles = { //the interface here varies by component
    root:{
      backgroundColor: siteTheme.palette.themeTertiary, //get theme colors like this
    },
    label:{
      color: siteTheme.palette.white,
    },
    rootHovered:{
      backgroundColor: siteTheme.palette.themePrimary,
    },
    labelHovered:{
      color: siteTheme.palette.white
    }
  };

Then I set the styles prop of the component

<PrimaryButton
    styles={ButtonStyles} //pass the styles to the component here
    onClick={() => GoToPage()}
    text={this.props.ButtonText ? this.props.ButtonText : 'BUTTON TEXT'}
/>