While this component is needed to work for any basic usage, you can do much, much more.

While you can access the ThemeProvider to change the theme and you can still access theme properties the way it is described below, to apply theme properties to your razor/html code, you should be using the global css variables that are generated by BFUTheme.

For example, in order to use Theme.Palette.White as the style for a span's color, you can apply it using var(--palette-White). Css global variables always start with two dashes and a lowercase name. Instead of a dot, use a dash followed by capitalized names

The current theme can be captured as a CascadingParameter in any component you create. Simply add:

[CascadingParameter(Name = "Theme")]
public ITheme Theme { get; set; }

The Theme property will contain color palettes, semantic colors (named for function rather than color), font styling, and effect defaults.

Another way to access the theme is to subclass FabricComponentBase.

To control what theme is applied, you'll first need to inject ThemeProvider into one of your components.

[Inject]
public ThemeProvider ThemeProvider { get; set; }

Once you've got this injected, you can access the UpdateTheme method and insert any theme you want.

BlazorFabric includes two default themes to use out of the box. Without doing anything, the light theme is automatically set. However, if you want to set it explicitly, you can use the DefaultPalette class like this:

ThemeProvider.UpdateTheme(new DefaultPalette());

The dark theme is slightly more complicated because while DefaultPaletteDark has all of the correct colors, some of the colors don't work under certain scenarios. For instance, white backgrounds work well with a popup because of drop shadows. A black background (the opposite color) would not work well, because there are no white drop shadows. So the SemanticColors have to be adjusted, too. Use the overload of UpdateTheme like this:

var palette = new DefaultPaletteDark();
ThemeProvider.UpdateTheme(palette, new DefaultSemanticColorsDark(palette), new DefaultSemanticTextColorsDark(palette));

If you want to create your own theme, the best tool for doing that will be here: UI Fabric Theme Designer

Adjust three main palette colors and the tool will generate a complete palette that works with those colors. You can then create your own class that implements IPalette and then insert it as your theme using UpdateTheme.