Theme Switcher Example

Current Theme Settings

Current Theme: default

Color Mode: light

Theme URL: /lib/bootstrap/dist/css/bootstrap.min.css

Theme Switcher (Preferred Tag Helper):

Manual Helper (Alternative):

Implementation Instructions

1. Register services in Program.cs

// Add Bootswatch theme switcher services
builder.Services.AddBootswatchThemeSwitcher();

// ... other services

// Add Bootswatch static files and cache
app.UseBootswatchAll();

2. Add the theme stylesheet and script to your layout

<head>
    <!-- Other head elements -->
    <link id="bootswatch-theme-stylesheet" rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.min.css" />
    <script src="/_content/WebSpark.Bootswatch/js/bootswatch-theme-switcher.js"></script>
</head>

3. Add the theme attribute to your html tag

<html lang="en" data-bs-theme="light">

4. Add the theme switcher component to your layout