Adding Themes

In the Blazor Library, a theme pack consists of multiple themes. To add a new theme to a theme pack, developers can modify the Components value in the theme pack configuration. It is important to define all components and their variants for both built-in and developer components. Here's an example of adding a new component to a theme pack configuration:

{
    "Name": "Default Pack",
    "Author": "Blazor Library",
    "Themes":
    [
        {
            "Name": "My theme",
            "Imports":
            [
                ...
            ],
            "Components":
            {
                ...
            }
        },
        {
            "Name": "My theme 2",
            "Imports":
            [
                ...
            ],
            "Components":
            {
                ...
            }
        }
    ]
}

Once you have added the new themes to the theme pack configuration, you can inform the Blazor Library to use the new theme pack configuration as an extension to the built-in theme pack in the Program.cs file using the following code:

builder.Services.AddBlazorComponents(options => options.ExtendedThemePackPath = "theme-packs/MyThemePack.json");

Alternatively, if you want to use the new theme pack configuration as the base theme pack, you can use the following code:

builder.Services.AddBlazorComponents(options => options.ThemePackPath = "theme-packs/MyThemePack.json");

In both cases, adjust the path "theme-packs/MyThemePack.json" to the actual path and filename of your theme pack configuration file.

By incorporating these changes in the Program.cs file, you can integrate the new themes into your Blazor application and utilize them for enhanced customization.

Switching between themes

In Blazor Library, developers can leverage the BlazorThemeSwitcher component to create a flexible user interface that allows end users to switch between different themes. The UI element used for switching themes can vary, such as a radio group, a dropdown menu, or multiple buttons. Here's an example of using a set of buttons to enable theme switching:

<BlazorThemeSwitcher Context="ThemeSwitcher">
    @foreach (string themeName in ThemeSwitcher.Themes)
    {
        <BlazorButton type="button" @onclick="_ => ThemeSwitcher.ChangeTheme(themeName)">Switch to @themeName </BlazorButton>
    }
</BlazorThemeSwitcher>

In this example, the BlazorThemeSwitcher component is used to encapsulate the theme switching functionality. Inside the component, a loop iterates over the available theme names, and for each theme, a button is rendered. When a button is clicked, the ChangeTheme method of the BlazorThemeSwitcher is invoked, triggering the theme switch to the corresponding theme.

By implementing a similar approach in your Blazor application, you can provide users with an interactive and dynamic experience, allowing them to effortlessly switch between different themes at runtime.

An error has occurred. This application may no longer respond until reloaded. Reload 🗙