This content originally appeared on DEV Community and was authored by Zalla Abdessamed
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
register the service in the Program.cs file:
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!
This content originally appeared on DEV Community and was authored by Zalla Abdessamed
Zalla Abdessamed | Sciencx (2025-07-03T22:09:44+00:00) Introducing BlazorThemes –Theme Management for Blazor Apps. Retrieved from https://www.scien.cx/2025/07/03/introducing-blazorthemes-theme-management-for-blazor-apps/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.