Quick branded light and dark modes with Fluent UI React v9

When building Teams Apps, Office Add-ins, or any kind of Microsoft 365 integration there's always a balance of retaining your apps brand and aligning with the hosting apps UX.

However, if you are building an experience and your app maybe only has a brand color, then I'd recommend aligning with the hosting application UX so that your end customers have a consistent experience using your add-in, extension, or app.

This can be easily achieved by using the brand theming capabilities with Fluent UI React v9.

The library comes with light mode and dark modes built in with the ability to supply your own brand variants.

1. Create a BrandVariants object

The BrandVariant interface is just a color palette of 16 stops. There are tools available to create color palettes (which we are looking to make that easier in the future.) but for this example I've created a simple one here:

const myBrand = {
"10":"#000000",
"20":"#011800",
"30":"#002700",
"40":"#00360c",
"50":"#004612",
"60":"#005618",
"70":"#00671f",
"80":"#007826",
"90":"#218935",
"100":"#3e9949",
"110":"#59a85e",
"120":"#73b776",
"130":"#8ec68f",
"140":"#aad5a9",
"150":"#c6e4c5",
"160":"#e2f2e2"
};

2. Create a light and dark theme

Once you have your custom BrandVariants object, then you simply create a light theme and a dark theme calling createLightTheme and createDarkTheme respectively.

const light = createLightTheme(myBrand);
const dark = createDarkTheme(myBrand);

3. Pass your Theme to the FluentProvider

Now that you have a light and dark theme, you can pass that into the FluentProvider for your application and all the components within that scope will pick up colors from the custom BrandVariants.

<FluentProvider theme={light}>
  <Button appearance="primary">Button</Button>
  <Switch defaultChecked label="Switch" />
  <TabList defaultSelectedValue="tab1">
    <Tab value="tab1">Tab 1</Tab>
    <Tab value="tab2">Tab 2</Tab>
    <Tab value="tab3">Tab 2</Tab>
  </TabList>
  <Slider defaultValue={50} />
</FluentProvider>

The best part here is that Fluent UI React v9 will apply the BrandVariants values across the components in the rest, hover, and pressed states so that you don't need override each component individually.

So there you have it. A quick way to create light and dark mode support with a splash of brand color for your Microsoft 365 apps, add-ins, and extensions.

As always, you can find the full CodesandBox here:

For more on Fluent UI React v9:

• GitHub: https://github.com/microsoft/fluentui
• Docs: https://react.fluentui.dev
• Twitter: https://twitter.com/fluentui

Enjoy!