WebSpark.Bootswatch
1.0.3
There is a newer version of this package available.
See the version list below for details.
See the version list below for details.
dotnet add package WebSpark.Bootswatch --version 1.0.3
NuGet\Install-Package WebSpark.Bootswatch -Version 1.0.3
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.
<PackageReference Include="WebSpark.Bootswatch" Version="1.0.3" />
For projects that support PackageReference, copy this XML node into the project file to reference the package.
<PackageVersion Include="WebSpark.Bootswatch" Version="1.0.3" />
<PackageReference Include="WebSpark.Bootswatch" />
For projects that support Central Package Management (CPM), copy this XML node into the solution Directory.Packages.props file to version the package.
paket add WebSpark.Bootswatch --version 1.0.3
The NuGet Team does not provide support for this client. Please contact its maintainers for support.
#r "nuget: WebSpark.Bootswatch, 1.0.3"
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package.
#:package WebSpark.Bootswatch@1.0.3
#:package directive can be used in C# file-based apps starting in .NET 10 preview 4. Copy this into a .cs file before any lines of code to reference the package.
#addin nuget:?package=WebSpark.Bootswatch&version=1.0.3
#tool nuget:?package=WebSpark.Bootswatch&version=1.0.3
The NuGet Team does not provide support for this client. Please contact its maintainers for support.
WebSpark.Bootswatch
A .NET Razor Class Library for integrating Bootstrap 5 themes from Bootswatch into ASP.NET Core applications. This library simplifies the process of applying modern, responsive themes to your web applications, leveraging the power of Bootstrap 5.
Features
- Seamless integration of Bootswatch themes with ASP.NET Core applications.
- Built on Bootstrap 5, offering modern, responsive, and mobile-first design.
- Easy runtime theme switching.
- Includes custom themes (e.g., Mom, Texecon) alongside standard Bootswatch themes.
- Caching for improved performance.
- Fully documented with IntelliSense support.
Benefits of Bootstrap 5
- Responsive Design: Build mobile-first, responsive web applications effortlessly.
- Modern Components: Access a wide range of pre-designed components.
- Customizable: Easily customize themes to match your branding.
- No jQuery Dependency: Bootstrap 5 removes the dependency on jQuery, making it lighter and faster.
Installation
Install the package via NuGet Package Manager:
Install-Package WebSpark.Bootswatch
Or via .NET CLI:
dotnet add package WebSpark.Bootswatch
Quick Start
1. Register Services
In the Program.cs file of your ASP.NET Core application, register the Bootswatch services:
var builder = WebApplication.CreateBuilder(args);
// Add services to the container
builder.Services.AddRazorPages();
builder.Services.AddBootswatchStyles(); // Add Bootswatch services
var app = builder.Build();
// Configure the HTTP request pipeline
if (!app.Environment.IsDevelopment())
{
app.UseExceptionHandler("/Error");
app.UseHsts();
}
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseBootswatchStaticFiles(); // Enable Bootswatch static files
app.UseRouting();
app.MapRazorPages();
app.Run();
2. Create a Theme Switcher Component
Create a partial view _ThemeSwitcher.cshtml to allow users to change themes:
@using WebSpark.Bootswatch.Model
@inject IStyleProvider StyleProvider
@{
var styles = await StyleProvider.GetAsync();
}
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Change Theme
</button>
<ul class="dropdown-menu">
@foreach (var style in styles)
{
<li><a class="dropdown-item" href="?theme=@style.name">@style.name</a></li>
}
</ul>
</div>
3. Use Theme in Layout
Update your _Layout.cshtml file to use the current theme:
@using WebSpark.Bootswatch.Model
@inject IStyleProvider StyleProvider
@{
var theme = Context.Request.Query["theme"].ToString() ?? "default";
var currentStyle = await StyleProvider.GetAsync(theme);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - WebSpark.Bootswatch.Demo</title>
@if (!string.IsNullOrEmpty(currentStyle.cssCdn))
{
<link rel="stylesheet" href="@currentStyle.cssCdn" />
}
else
{
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
}
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
</head>
<body>
<partial name="_ThemeSwitcher" />
@RenderBody()
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
@await RenderSectionAsync("Scripts", required: false)
</body>
</html>
Advanced Usage
Caching Themes
For improved performance, you can implement a caching service:
public class StyleCache
{
private readonly IStyleProvider _styleProvider;
private readonly IMemoryCache _memoryCache;
private const string CacheKey = "BootswatchStyles";
public StyleCache(IStyleProvider styleProvider, IMemoryCache memoryCache)
{
_styleProvider = styleProvider;
_memoryCache = memoryCache;
}
public async Task<IEnumerable<StyleModel>> GetStylesAsync()
{
if (!_memoryCache.TryGetValue(CacheKey, out IEnumerable<StyleModel> styles))
{
styles = await _styleProvider.GetAsync();
_memoryCache.Set(CacheKey, styles, TimeSpan.FromHours(1));
}
return styles;
}
}
Custom Theme Implementation
You can create your own theme provider by implementing the IStyleProvider interface:
public class CustomStyleProvider : IStyleProvider
{
public Task<IEnumerable<StyleModel>> GetAsync()
{
// Return your custom themes
}
public Task<StyleModel> GetAsync(string name)
{
// Return a specific theme by name
}
}
Demo Project
For a complete example of how to integrate WebSpark.Bootswatch, refer to the WebSpark.Bootswatch.Demo project included in this repository. It demonstrates:
- Registering Bootswatch services.
- Using the theme switcher component.
- Applying themes dynamically in the layout.
License
This project is licensed under the MIT License - see the LICENSE file for details.
| Product | Versions Compatible and additional computed target framework versions. |
|---|---|
| .NET | net9.0 is compatible. net9.0-android was computed. net9.0-browser was computed. net9.0-ios was computed. net9.0-maccatalyst was computed. net9.0-macos was computed. net9.0-tvos was computed. net9.0-windows was computed. net10.0 was computed. net10.0-android was computed. net10.0-browser was computed. net10.0-ios was computed. net10.0-maccatalyst was computed. net10.0-macos was computed. net10.0-tvos was computed. net10.0-windows was computed. |
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.
-
net9.0
- Microsoft.AspNetCore.StaticFiles (>= 2.2.0)
- Microsoft.Extensions.FileProviders.Embedded (>= 9.0.0)
- WebSpark.HttpClientUtility (>= 1.0.5)
NuGet packages
This package is not used by any NuGet packages.
GitHub repositories
This package is not used by any popular GitHub repositories.
| Version | Downloads | Last Updated |
|---|---|---|
| 1.34.0 | 301 | 12/4/2025 |
| 1.32.0 | 319 | 11/13/2025 |
| 1.30.0 | 151 | 9/27/2025 |
| 1.20.1 | 247 | 7/1/2025 |
| 1.10.3 | 236 | 5/21/2025 |
| 1.10.2 | 219 | 5/20/2025 |
| 1.10.1 | 239 | 5/18/2025 |
| 1.10.0 | 312 | 5/15/2025 |
| 1.0.7 | 317 | 5/15/2025 |
| 1.0.6 | 259 | 5/5/2025 |
| 1.0.5 | 238 | 5/5/2025 |
| 1.0.4 | 232 | 5/4/2025 |
| 1.0.3 | 232 | 5/4/2025 |
| 1.0.2 | 212 | 5/4/2025 |
Initial release with Bootswatch themes for ASP.NET Core applications.
Includes custom themes and styles for easy integration with MVC or Razor Pages.