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.

Light

Dark

System

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.

Toggle Dark Mode

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.

Default

High Contrast

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.

Primary Button

Secondary Button

Outline Button

Destructive

Neutral

Disabled

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.