bgkyer / blazor-dynamic-themes-sample

How to implement multiple themes in BlazorWasm app

How to implement multiple themes in BlazorWasm app

By Kelvin Binh

The simple project demonstrates how to implement multiple themes in BlazorWasm app

Usage with careful: The project is in experimental research for BlazorWasm with .NET Core 3.0 SDK

Screenshots

Default Theme

RainyDay Theme

Redwood Theme

Table of contents

• Build Up And Running
• Test Switch Theme

Build Up And Running

1. Install the latest .NET Core 3.0 SDK release.

2. Build project and all of its dependencies.

   dotnet build
   

3. Or run run source code without any explicit compile or launch commands

   dotnet run
   

4. From browser, open https://localhost:5001

Test Switch Theme

To switch an existed themes (Default, RainyDay, Redwood), simply changing value of activeTheme from ./wwwroot/sample-data/settings.json file

{
    "activeTheme": "Default"
}