Theme Provider

The ThemeProvider manages dark/light mode switching, persists user preference to localStorage, and follows the FOD Design System pattern using data-theme attribute.

Current Theme State

Displays the current theme context values including mode, dark state, and active palette.

Mode

Light

Is Dark

False

Palette

default

csharp

[CascadingParameter] private ThemeContext? ThemeContext { get; set; }

// Access properties:
// ThemeContext.Mode - Current mode (Light, Dark, System)
// ThemeContext.IsDark - Whether dark mode is active
// ThemeContext.PaletteName - Current palette name

Theme Mode Switching

Click the buttons below to switch between Light, Dark, and System modes. System mode follows your OS preference.

csharp

// Set specific mode
ThemeService.SetMode(ThemeMode.Light);
ThemeService.SetMode(ThemeMode.Dark);
ThemeService.SetMode(ThemeMode.System);

Toggle Dark Mode

Use ToggleDarkMode() to quickly switch between light and dark modes.

csharp

// Quick toggle between light and dark
ThemeService.ToggleDarkMode();

Color Palettes

Palettes allow overriding semantic color tokens for branding or accessibility. The High Contrast palette increases color contrast ratios for better visibility.

csharp

// Set color palette
ThemeService.SetPalette("default");
ThemeService.SetPalette("high-contrast");

Component Theming

These components automatically adapt to the current theme using FOD Design System CSS variables.

Usage

How to integrate the theme provider in your application.

1. Register Services

csharp

// Program.cs
builder.Services.AddFod();

2. Wrap App with FodThemeProvider

razor

&lt;FodThemeProvider&gt;
    &lt;Router AppAssembly="typeof(App).Assembly"&gt;
        ...
    &lt;/Router&gt;
&lt;/FodThemeProvider&gt;

3. Access ThemeContext via CascadingParameter

csharp

[CascadingParameter]
private ThemeContext? ThemeContext { get; set; }

4. Use IThemeService for Control

csharp

ThemeService.SetMode(ThemeMode.Dark);
ThemeService.ToggleDarkMode();

API Reference

IThemeService methods and ThemeContext properties.

IThemeService Methods

No properties defined.

ThemeContext Properties

No properties defined.