Introducing BlazorThemes –Theme Management for Blazor Apps

Zalla Abdessamed — Thu, 03 Jul 2025 22:09:44 +0000

Hey folks! After struggling with clean theme switching in multiple Blazor projects, I built a library to solve it once and for all. It’s called BlazorThemes and it’s now at v1.0.1!

Key Features:

Auto dark/light mode that follows OS preferences
Time-based scheduling for automatic theme switching
Custom themes with CSS variables
Cross-tab synchronization
Zero flash on load

How To Use:
install the package:

dotnet add package BlazorThemes

builder.Services.AddBlazorThemes(options => {
    options.Themes = new[] { "light", "dark", "auto" };
    options.EnableSystem = true;
    options.TransitionType = "fade";
});

or simply for default use case:

builder.Services.AddBlazorThemes();

Add Theme Provider:

<BlazorThemesProvider>
    <Router AppAssembly="@typeof(App).Assembly">
        <!-- Your app content -->
    </Router>
</BlazorThemesProvider>

set the theme easily :

<div class="theme-controls">
    <button @onclick='() => ThemesService.SetThemeAsync("light")' 
            class="btn btn-light">
        ☀️ Light
    </button>

    <button @onclick='() => ThemesService.SetThemeAsync("dark")' 
            class="btn btn-dark">
        🌙 Dark
    </button>

    <button @onclick='() => ThemesService.SetThemeAsync("auto")' 
            class="btn btn-auto">
        🔄 Auto
    </button>
</div>

and you can style your component like this way :

/* Theme-specific variables */
[data-theme="light"] {
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --text-primary: #1e293b;
    --accent-primary: #3b82f6;
    /* ...other variables */
}

[data-theme="dark"] {
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --text-primary: #f1f5f9;
    --accent-primary: #60a5fa;
    /* ...other variables */
}

/* Component styling using variables */
.component {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border-primary);
}

.button {
    background-color: var(--accent-primary);
    color: var(--text-on-accent);
}

Check it out for more features:
GitHub: BlazorThemes

NuGet: BlazorThemes Package

This is Version 1.0.1, and I’d love it if you gave it a spin. Bug reports, feature ideas, or any suggestions are more than welcome. I'm open to feedback, collaborations, or anything that helps improve it!

DEV Community: Zalla Abdessamed

Introducing BlazorThemes –Theme Management for Blazor Apps