@fluentui/azure-themes

@fluentui/azure-themes

Azure theme for Fluent UI React (formerly Office UI Fabric React)

The Azure themes require the following import statements:

import {
  AzureThemeDark,
  AzureThemeLight,
  AzureCustomizationsLight,
  AzureCustomizationsDark,
} from '@uifabric/azure-themes';

The theme may subsequently be set to either the Azure or Azure-Dark themes.

In case of applying theme using Customizer:

  import { Customizer } from '@fluentui/react';
  const customizations = AzureCustomizationsDark; // or alternatively AzureCustomizationsLight

  <Customizer {...customizations}>
    <div>{child component}</div>
  </Customizer>

In case of applying theme using ThemeProvider:

  import { ThemeProvider } from '@fluentui/react';
  const theme = AzureThemeDark; // or alternatively AzureThemeLight

  <ThemeProvider theme={theme}>
    <div>{child component}</div>
  </ThemeProvider>