Custom Teams theming with fluentui/-react-northstar

Question

Docs for fluentui-react-northstar theming can be found here.

I am struggling to understand how to make use of a custom theme. It seems I need one provider for the Teams base theme, and then a nested one for my own theme (which may well be wrong)

   <Provider theme={teamsTheme}>
       <Provider theme={myTheme}>

But I only want to make a few changes to the base theme, for example making the brand colour red. The documentation doesn't really explain how to make use of it.

For example, the docs show this:


const theme = {
  siteVariables: {
    brand: 'darkred',
    ...

but this does nothing to change the primary colour in the app...

Any pointers would be greatly appreciated.

NOTE: I originally went to post this question on the github page, but it said questions should be asked here

I'm having the same problem. have you gotten anywhere with this? — zcaudate, Jan 17 '21 at 09:16

score 2 · Answer 1 · answered Jan 17 '21 at 11:12

After a bit of trial and error, I found that this works:

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Button, Provider, mergeThemes, teamsTheme } from '@fluentui/react-northstar';

const customTheme = {
    siteVariables: {
      colorScheme: {
        brand: {
          'background': 'darkred',
        }
      }
    }
  }
  
ReactDOM.render(
    <Provider theme={mergeThemes(teamsTheme, customTheme)}>
      <Button primary content="Hello" />
    </Provider>
,
  document.getElementById('app'),
)

Gives this:

Custom Teams theming with fluentui/-react-northstar

1 Answers1