WebSpark.Bootswatch provides Bootswatch themes for ASP.NET Core applications. It includes custom themes and styles that can be easily integrated with ASP.NET Core MVC or Razor Pages applications. Supports .NET 8.0, 9.0, and 10.0. ⚠️ IMPORTANT: This package requires WebSpark.HttpClientUtility to be installed and registered separately. SETUP: 1. Install: dotnet add package WebSpark.HttpClientUtility 2. Register: builder.Services.AddHttpClientUtility(); (BEFORE AddBootswatchThemeSwitcher) 3. Configure appsettings.json with HttpRequestResultPollyOptions section See package README for complete setup guide.
$ dotnet add package WebSpark.BootswatchA .NET 9 Razor Class Library that provides seamless integration of Bootswatch themes into ASP.NET Core applications. Built on Bootstrap 5, this library offers modern, responsive theming with dynamic theme switching, light/dark mode support, and comprehensive caching mechanisms.
StyleCache service<bootswatch-theme-switcher /> for easy UI integration<PackageReference Include="WebSpark.Bootswatch" Version="1.30.0" />
<PackageReference Include="WebSpark.HttpClientUtility" Version="1.2.0" />
Add to your appsettings.json for dynamic theme fetching:
{
"CsvOutputFolder": "c:\\temp\\WebSpark\\CsvOutput",
"HttpRequestResultPollyOptions": {
"MaxRetryAttempts": 3,
"RetryDelaySeconds": 1,
"CircuitBreakerThreshold": 3,
"CircuitBreakerDurationSeconds": 10
}
}
Install-Package WebSpark.Bootswatch
Install-Package WebSpark.HttpClientUtility
dotnet add package WebSpark.Bootswatch
dotnet add package WebSpark.HttpClientUtility
<PackageReference Include="WebSpark.Bootswatch" Version="1.30.0" />
<PackageReference Include="WebSpark.HttpClientUtility" Version="1.2.0" />
Program.cs)var builder = WebApplication.CreateBuilder(args);
// Add services
builder.Services.AddRazorPages();
builder.Services.AddHttpContextAccessor();
builder.Services.AddBootswatchThemeSwitcher();
var app = builder.Build();
// Configure pipeline
if (!app.Environment.IsDevelopment())
{
app.UseExceptionHandler("/Error");
app.UseHsts();
}
app.UseHttpsRedirection();
app.UseBootswatchAll(); // Must be before UseStaticFiles()
app.UseStaticFiles();
app.UseRouting();
app.MapRazorPages();
app.Run();
_Layout.cshtml)@using WebSpark.Bootswatch.Services
@using WebSpark.Bootswatch.Helpers
@inject StyleCache StyleCache
<!DOCTYPE html>
<html lang="en" data-bs-theme="@(BootswatchThemeHelper.GetCurrentColorMode(Context))">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"]</title>
@{
var themeName = BootswatchThemeHelper.GetCurrentThemeName(Context);
var themeUrl = BootswatchThemeHelper.GetThemeUrl(StyleCache, themeName);
}
<link id="bootswatch-theme-stylesheet" rel="stylesheet" href="@themeUrl" />
<script src="/_content/WebSpark.Bootswatch/js/bootswatch-theme-switcher.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg">
<div class="container">
<!-- Your navigation items -->
<ul class="navbar-nav flex-grow-1">
<!-- Nav items here -->
</ul>
<!-- Theme switcher -->
<bootswatch-theme-switcher />
</div>
</nav>
<main>
@RenderBody()
</main>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
@await RenderSectionAsync("Scripts", required: false)
</body>
</html>
_ViewImports.cshtml)@addTagHelper *, WebSpark.Bootswatch
public class HomeController : Controller
{
private readonly StyleCache _styleCache;
public HomeController(StyleCache styleCache)
{
_styleCache = styleCache;
}
public IActionResult Index()
{
// Get all available themes
var allThemes = _styleCache.GetAllStyles();
// Get specific theme
var defaultTheme = _styleCache.GetStyle("default");
return View(allThemes);
}
}
// Get current theme information
var currentTheme = BootswatchThemeHelper.GetCurrentThemeName(Context);
var colorMode = BootswatchThemeHelper.GetCurrentColorMode(Context);
var themeUrl = BootswatchThemeHelper.GetThemeUrl(StyleCache, currentTheme);
// Generate theme switcher HTML
var switcherHtml = BootswatchThemeHelper.GetThemeSwitcherHtml(StyleCache, Context);
// Add custom themes to your StyleCache
public void ConfigureServices(IServiceCollection services)
{
services.AddBootswatchThemeSwitcher();
services.Configure<BootswatchOptions>(options =>
{
options.CustomThemes.Add(new StyleModel
{
Name = "custom-theme",
Description = "My Custom Theme",
CssPath = "/css/custom-theme.css"
});
});
}
Explore the complete implementation in our demo project:
git clone https://github.com/MarkHazleton/WebSpark.Bootswatch.git
cd WebSpark.Bootswatch
dotnet run --project WebSpark.Bootswatch.Demo
The demo showcases:
| Component | Purpose | Lifecycle |
|---|---|---|
StyleCache | Theme data caching | Singleton |
BootswatchStyleProvider | Theme management | Scoped |
BootswatchThemeHelper | Static utilities | Static |
BootswatchThemeSwitcherTagHelper | UI component | Transient |
The correct middleware order is crucial:
app.UseBootswatchStaticFiles(); // 1. Bootswatch static files
app.UseStaticFiles(); // 2. Application static files
app.UseRouting(); // 3. Routing
// Full configuration
app.UseBootswatchAll();
// Or individual components
app.UseBootswatchStaticFiles();
app.UseBootswatchThemeRoutes();
services.AddBootswatchThemeSwitcher(options =>
{
options.DefaultTheme = "bootstrap";
options.EnableCaching = true;
options.CacheDurationMinutes = 60;
});
StyleCache singleton| Issue | Solution |
|---|---|
| Themes not loading | Check middleware order: UseBootswatchAll() before UseStaticFiles() |
| Theme switcher not visible | Ensure @addTagHelper *, WebSpark.Bootswatch in _ViewImports.cshtml |
| Missing dependencies | Install WebSpark.HttpClientUtility package |
| Configuration errors | Add required appsettings.json configuration |
Enable detailed logging:
builder.Services.AddLogging(config =>
{
config.AddConsole();
config.SetMinimumLevel(LogLevel.Debug);
});
| Browser | Version | Status |
|---|---|---|
| Chrome | 90+ | ✅ Fully Supported |
| Firefox | 88+ | ✅ Fully Supported |
| Safari | 14+ | ✅ Fully Supported |
| Edge | 90+ | ✅ Fully Supported |
| IE | 11 | ❌ Not Supported |
We welcome contributions! Please see CONTRIBUTING.md for guidelines.
# Clone repository
git clone https://github.com/MarkHazleton/WebSpark.Bootswatch.git
cd WebSpark.Bootswatch
# Restore dependencies
dotnet restore
# Build solution
dotnet build
# Run tests
dotnet test
# Run demo
dotnet run --project WebSpark.Bootswatch.Demo
This project is licensed under the MIT License - see the LICENSE file for details.
See NOTICE.txt for complete attribution.