Blazor Apply Theme

Effortlessly customize the visual appearance of components, ensuring a consistent and polished user interface.

Features:

JavaScript Independence: This component operates seamlessly without requiring JavaScript, offering a lightweight and straightforward solution.

Learn about core component features

Simple theme section

Learn Blazor at Blazor School Free
<BlazorApplyTheme ThemePackPath="..." InitialTheme="Theme 1">
    <BlazorBadge>
        <BlazorButton href="https://blazorschool.com" RenderAs="a" Variants="new[] {BaseVariants.Primary}">Learn Blazor at Blazor School</BlazorButton>
        <BlazorBadgeContent Variants="new[] {BaseVariants.Secondary, BaseRadius.Pill}" Horizontal="HorizontalPosition.Middle" Vertical="VerticalPosition.Bottom">Free</BlazorBadgeContent>
    </BlazorBadge>
    <BlazorThemeSwitcher Context="themeSwitcher">
        <label>
            <input type="radio" name="g1" @onchange="_ => themeSwitcher.ChangeTheme(themeSwitcher.Themes[0])" checked/>
            @themeSwitcher.Themes[0]
        </label>
        <label>
            <input type="radio" name="g1" @onchange="_ => themeSwitcher.ChangeTheme(themeSwitcher.Themes[1])" />
            @themeSwitcher.Themes[1]
        </label>
    </BlazorThemeSwitcher>
</BlazorApplyTheme>

Multiple theme sections

Section 1
Learn Blazor at Blazor School Free
Section 2
Learn Blazor at Blazor School Free
// Section 1
<BlazorApplyTheme ThemePackPath="..." InitialTheme="Theme 1">
    <BlazorBadge>
        <BlazorButton href="https://blazorschool.com" RenderAs="a" Variants="new[] {BaseVariants.Primary}">Learn Blazor at Blazor School</BlazorButton>
        <BlazorBadgeContent Variants="new[] {BaseVariants.Secondary, BaseRadius.Pill}" Horizontal="HorizontalPosition.Middle" Vertical="VerticalPosition.Bottom">Free</BlazorBadgeContent>
    </BlazorBadge>
    <BlazorThemeSwitcher Context="themeSwitcher">
        <label>
            <input type="radio" name="g1" @onchange="_ => themeSwitcher.ChangeTheme(themeSwitcher.Themes[0])" checked/>
            @themeSwitcher.Themes[0]
        </label>
        <label>
            <input type="radio" name="g1" @onchange="_ => themeSwitcher.ChangeTheme(themeSwitcher.Themes[1])" />
            @themeSwitcher.Themes[1]
        </label>
    </BlazorThemeSwitcher>
</BlazorApplyTheme>
// Section 2
<BlazorApplyTheme ThemePackPath="..." InitialTheme="Theme 1">
    <BlazorBadge>
        <BlazorButton href="https://blazorschool.com" RenderAs="a" Variants="new[] {BaseVariants.Primary}">Learn Blazor at Blazor School</BlazorButton>
        <BlazorBadgeContent Variants="new[] {BaseVariants.Secondary, BaseRadius.Pill}" Horizontal="HorizontalPosition.Middle" Vertical="VerticalPosition.Bottom">Free</BlazorBadgeContent>
    </BlazorBadge>
    <BlazorThemeSwitcher Context="themeSwitcher">
        <label>
            <input type="radio" name="g2" @onchange="_ => themeSwitcher.ChangeTheme(themeSwitcher.Themes[0])"/>
            @themeSwitcher.Themes[0]
        </label>
        <label>
            <input type="radio" name="g2" @onchange="_ => themeSwitcher.ChangeTheme(themeSwitcher.Themes[1])" checked/>
            @themeSwitcher.Themes[1]
        </label>
    </BlazorThemeSwitcher>
</BlazorApplyTheme>

Independent BlazorThemeSwitcher

Moreover, the BlazorThemeSwitcher can be employed independently of BlazorApplyTheme. Developers can link the BlazorThemeSwitcher to BlazorApplyTheme by using the same token

Learn Blazor at Blazor School Free
<BlazorApplyTheme Token="theme-section-3" ThemePackPath="..." InitialTheme="Theme 1">
    ...
</BlazorApplyTheme>
<BlazorThemeSwitcher Context="themeSwitcher" TargetToken="theme-section-3">
    @foreach (string theme in themeSwitcher.Themes)
    {
        <BlazorButton type="button" Variants="new[]{BaseVariants.Primary}" @onclick
="_ => themeSwitcher.ChangeTheme(theme)">Switch to @theme</BlazorButton>
    }
</BlazorThemeSwitcher>
An error has occurred. This application may no longer respond until reloaded. Reload 🗙