How to set the user's preferred theme when starting the Syncfusion Blazor app?

2 mins read

The user's preferred theme can be set when starting the Syncfusion Blazor app, as shown in the code snippet below:

_Host.cshtml

@page "/"@using Blazored.LocalStorage;
@using Microsoft.AspNetCore.Components.Web
@namespace Sample.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="~/" />
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
    <link href="css/site.css" rel="stylesheet" />
    <link href="Sample.styles.css" rel="stylesheet" />
    <link rel="icon" type="image/png" href="favicon.png"/>
    <link id="theme" href="_content/Syncfusion.Blazor.Themes/bootstrap4.css" rel="stylesheet" />
    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
    <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
</head>
<body>
    <component type="typeof(App)" render-mode="ServerPrerendered" />

    <div id="blazor-error-ui">
        <environment include="Staging,Production">
            An error has occurred. This application may no longer respond until reloaded.
        </environment>
        <environment include="Development">
            An unhandled exception has occurred. See browser dev tools for details.
        </environment>
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>
    <script>
        function setTheme(theme) {
            document.getElementsByTagName('body')[0].style.display = 'none';
            let synclink = document.getElementById('theme');
            synclink.href = '_content/Syncfusion.Blazor.Themes/' + theme + '.css';
            setTimeout(function () { document.getElementsByTagName('body')[0].style.display = 'block'; }, 200);
        }
    </script>
    <script src="_framework/blazor.server.js"></script>
</body>
</html>

MainLayout.razor

@inherits LayoutComponentBase@inject IJSRuntime JSRuntime;

<PageTitle>Sample</PageTitle>
@if (isPreferredThemeRendered)
{
<div class="page">
    <div class="sidebar">
        <NavMenu />
    </div>

    <main>
        <div class="top-row px-4">
            <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
        </div>

        <article class="content px-4">
                <div class="theme-switcher">
                    @*Theme switcher*@
                    <SfDropDownList TItem="ThemeDetails" TValue="string" @bind-Value="themeName" DataSource="@Themes" Placeholder="Select Theme" EnablePersistence="true">
                        <DropDownListFieldSettings Text="Text" Value="ID"></DropDownListFieldSettings>
                        <DropDownListEvents TItem="ThemeDetails" TValue="string" ValueChange="OnThemeChange"></DropDownListEvents>
                    </SfDropDownList>
                </div>
                <br/>
            @Body
        </article>
    </main>
</div>
}
@code{
    bool isPreferredThemeRendered = false;
    string selectedTheme = null;
    [Inject]
    public ILocalStorageService LocalStorage { get; set; }
    public string themeName { get; set; }

    public class ThemeDetails
    {
        public string ID { get; set; }
        public string Text { get; set; }
    }

    private List<ThemeDetails> Themes = new List<ThemeDetails>() {
        new ThemeDetails(){ ID = "material", Text = "Material" },
        new ThemeDetails(){ ID = "bootstrap", Text = "Bootstrap" },
        new ThemeDetails(){ ID = "fabric", Text = "Fabric" },
        new ThemeDetails(){ ID = "bootstrap4", Text = "Bootstrap 4" },
        new ThemeDetails(){ ID = "tailwind", Text = "TailWind"},
        new ThemeDetails(){ ID = "tailwind-dark", Text = "TailWind Dark" },
        new ThemeDetails(){ ID = "material-dark", Text = "Material Dark" },
        new ThemeDetails(){ ID = "bootstrap-dark", Text = "Bootstrap Dark" },
        new ThemeDetails(){ ID = "fabric-dark", Text = "Fabric Dark" },
        new ThemeDetails(){ ID = "highcontrast", Text = "High Contrast" }
    };


    public void OnThemeChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, ThemeDetails> args)
    {
        JSRuntime.InvokeAsync<object>("setTheme", args.ItemData.ID);
        LocalStorage.SetItemAsync("selectedColorTheme", args.ItemData.ID);
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            selectedTheme = await LocalStorage.GetItemAsync<string>("selectedColorTheme");
            if (selectedTheme != null){
                await JSRuntime.InvokeAsync<object>("setTheme", selectedTheme);
            }
            else
            {
                selectedTheme = "bootstrap4";
            }
            isPreferredThemeRendered = true;
            themeName = selectedTheme;
            StateHasChanged();
        }
    }
}

Here is a sample for reference: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Sample1595890303

Note: Due to pre-rendering in Blazor Server, any JS interop cannot be called until the OnAfterRender lifecycle method.

Refer to the following links for reference:

https://github.com/Blazored/LocalStorage#usage-blazor-server

https://learn.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/call-javascript-from-dotnet?view=aspnetcore-7.0#prerendering

Did you find this information helpful?

Yes

Comments (0)

How to set the user's preferred theme when starting the Syncfusion Blazor app?

Access denied