blazor webapp theme

[Sarah]

Hello,

I have reviewed many samples from the forum regarding my question but have not reached a conclusion. I would appreciate it if you could provide a sample for the issue I am facing.

I am using Blazor Web App Server-Side Rendering (.NET 9). In MainLayout, the user can switch the theme between light and dark modes. By default, the theme is light. The selected theme is saved so that the next time the user visits the site, the last chosen theme is applied by default.

If the current theme is light, the user should see the dark mode icon to switch to dark mode. If the current theme is dark, the user should see the light mode icon to switch back to light mode.

I used the Bootstrap4 theme for the light mode and the Tailwind-Dark theme for the dark mode.

[Arun Kumar Ragu]

Hi Sarah,

Thank you for reaching out. Based on your query, it appears to be more general rather than specific to Syncfusion libraries. However, we have created a Blazor Web App (Server-Side Rendering, .NET 9) sample that allows users to seamlessly switch between light (Bootstrap 4) and dark (Tailwind Dark) themes. The selected theme is stored in localStorage, ensuring it persists across sessions. We have provided the sample implementation below for your reference.

App.razor - Theme Initialization:

This script retrieves the stored theme from localStorage.

<script>

    (async function () {

        var savedTheme = localStorage.getItem("theme") || "bootstrap4";

        var link = document.createElement("link");

        link.id = "themeStylesheet";

        link.rel = "stylesheet";

        link.rel='nofollow' href = "_content/Syncfusion.Blazor/styles/" + savedTheme + ".css";

        document.head.appendChild(link);

        link.onload = function () {

            document.getElementById("blazor-loader").style.display = "none";

            document.getElementById("blazor-app").style.display = "block";

        };

    })();

</script>

<script>

    window.themeManager = {

        getTheme: function () {

            return localStorage.getItem("theme") || "bootstrap4";

        },

        setTheme: function (theme) {

            localStorage.setItem("theme", theme);

        },

        applyTheme: function (theme) {

            document.getElementById("themeStylesheet").setAttribute(

                "rel='nofollow' href", "_content/Syncfusion.Blazor/styles/" + theme + ".css"

            );

        }

    };

</script>

ThemeSwitcher.razor - Toggle Theme Component:

This component allows users to switch between themes using a toggle button.

@inject IJSRuntime JS

<div class="theme-toggle-container">

    <span class="theme-text"> @(isDarkMode ? "Dark" : "Light") </span>

    <label class="theme-switch">

        <input type="checkbox" checked="@isDarkMode" @onchange="ToggleTheme" />

        <span class="slider"></span>

    </label>

</div>

@code {

    private string currentTheme = "bootstrap4";

    private bool isDarkMode = false;

    protected override async Task OnAfterRenderAsync(bool firstRender)

    {

        if (firstRender)

        {

            currentTheme = await JS.InvokeAsync<string>("themeManager.getTheme");

            isDarkMode = currentTheme.Contains("dark");

            StateHasChanged();

        }

    }

    private async Task ToggleTheme(ChangeEventArgs e)

    {

        isDarkMode = (bool)e.Value;

        currentTheme = isDarkMode ? "tailwind-dark" : "bootstrap4";

        await JS.InvokeVoidAsync("themeManager.setTheme", currentTheme);

        await JS.InvokeVoidAsync("themeManager.applyTheme", currentTheme);

    }

}

Please get back us if you have any Syncfusion Libraries related queries.

Regards,

Arun Kumar R

Attachment: ThemeSwitching_1bd38c38.zip

[Sarah]

Hi,

Thank you for your response. I used your source code and encountered two issues:

1-Since some clients do not have internet access, switching the theme from light to dark causes an issue, displaying the message "Loading...".

Based on my investigations, the dark theme uses a fonts.googleapi.com, which requires an internet connection for the client to download the font. 

While the "Loading..." message was displayed, I connected the client's internet, and the site loaded correctly.

How can I set the font locally instead of fetching it from the internet?

2-Changing the theme happens quickly on Windows 10 and 11, but on Windows 7, I tested it on three client systems, and switching the theme takes around 10 seconds.

[Arun Kumar Ragu]

Hi Sarah,

Query 1: Google Fonts Dependency

The Material and Tailwind themes of Syncfusion require Google Fonts, whereas other themes do not. If your application does not require these specific themes, you can use any of the other Syncfusion themes(eg: bootstrap, fluent etc.,) without depending on external font resources.

However, if your application requires the Material or Tailwind themes and you want to avoid Google Fonts, Syncfusion provides customized versions of these themes that eliminate the Google Fonts dependency:

• For Syncfusion.Blazor package:
  _content/Syncfusion.Blazor/styles/customized/tailwind-dark.css

• For Syncfusion.Blazor.Themes package:
   _content/Syncfusion.Blazor.Themes/customized/tailwind-dark.css

Using these customized themes ensures fonts load locally, preventing issues when an internet connection is unavailable. We have attached the sample for your reference.

Query 2: Slow Theme Switching on Windows 7

If theme switching is slow on Windows 7, consider these optimizations:

1. Use an Updated Browser

   • Ensure you are running the latest versions of Chrome, Edge, or another modern browser for optimal CSS and JavaScript performance.

2. Optimize Theme Loading with CRG

   • Syncfusion themes include styles for all components, which may lead to unnecessary loading overhead. To improve performance, use the Blazor Custom Resource Generator (CRG) to generate a stylesheet containing only the styles needed for your application. This reduces file size and improves load times, especially on slower machines.
   • Syncfusion provides a Theme Studio that allows you to customize themes and download optimized styles to use in your application.
     

Let us know if you need further assistance!

Regards,

Arun Kumar R

Attachment: ThemeSwitching_823dea8f.zip

[Sarah]

Hello,

The font issue has been resolved, and I appreciate your response.

However, a new issue has arisen: after using the link below for version 28.1.33, the icons of SfTab items are not being displayed.

<SfTab CssClass="drag-drop-tab e-tab-custom-class mt-4" AllowDragAndDrop="true" SelectedItem="@intTabIndex" LoadOn="ContentLoad.Demand">

    <TabItems>

        <TabItem>

            <HeaderTemplate>

                <div class="e-avatar e-avatar-xsmall  my-image"></div>

                <div class="e-title" style="padding-left:10px">title</div>

            </HeaderTemplate>

            <ContentTemplate>

                 

            </ContentTemplate>

        </TabItem>

    </TabItems>

</SfTab>

.e-tab-custom-class .e-avatar {

    background-repeat: no-repeat;

    background-size: cover;

    background-position: center;

}

    .e-tab-custom-class .e-avatar.my-image {

        background-image: url(...) !important;

        margin-left: 5px;

    }

https://blazor.syncfusion.com/crg/

[Arun Kumar Ragu]

Hi Sarah,

Thank you for bringing this to our attention.

We found that the Avatar component was not included in the CRG. This has been resolved in version 28.2.11. Starting from this version, you can download the necessary styles for the Avatar component directly from the blazor CRG.

The issue with the missing icons in the SfTab component is due to the Avatar component's styles not being included in your CRG download. Since you are using the e-avatar class in your tab headers, the required styles for the Avatar component are missing, which is causing the icons not to display correctly.

To resolve this issue, please ensure that you download the Avatar component styles and Tab component styles from blazor CRG. This should restore the correct display of the icons.

Let us know if you need any further assistance!

Regards,

Arun Kumar R