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

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