We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Problems with implementing dark themes.


I'm quite new to Blazor and HTML and am probably just doing something wrong, if one of you could help me with that it would be great.

I tried to implement a dark theme in my completely new Blazor WASM app, that was created in VS2022 with the Synfusion extension.

When I reference a dark theme like fabrik-dark.css or bootstrap5-dark.css in my index.html like this

<link rel='nofollow' href="_content/Syncfusion.Blazor/styles/fabric-dark.css" rel="stylesheet" />

it only changes the appearance of the Synfusion components. Normal text, the background color and so on stay the same.

I tried to implement the theme switcher as described here, but that didn't work and as far as I see it it just switches around the implemented .css.

Downloading a theme from the Theme Builder and referencing it the same way doesn't work either.

5 Replies

JL Joshna Lingala Uthama Reddy Lingala Syncfusion Team January 19, 2022 04:38 AM UTC

Hi Joschka, 
Greetings from Syncfusion. 
We have prepared a sample in which when any dark theme is selected then the background of the browser along with Syncfusion components will be changed into dark. Please find the sample and image references, code snippets for the same below 
Code Snippets: 
public void OnThemeChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, ThemeDetails> args) 
        if (args.ItemData.ID.Contains("dark") || args.ItemData.ID.Contains("highcontrast")) 
            JS.InvokeAsync<object>("setTheme", args.ItemData.ID, true); 
            JS.InvokeAsync<object>("setTheme", args.ItemData.ID, false); 
    . . . 
    <link id="apptheme" rel='nofollow' href="css/app.css" rel="stylesheet" /> 
    <link id="theme" rel="stylesheet" rel='nofollow' href="_content/Syncfusion.Blazor.Themes/bootstrap.css" /> 
        function setTheme(theme, isThemeDark) {  
            document.getElementsByTagName('body')[0].style.display = 'none'; 
            let applink = document.getElementById('apptheme'); 
            let synclink = document.getElementById('theme'); 
            synclink.rel='nofollow' href = '_content/Syncfusion.Blazor.Themes/' + theme + '.css'; 
            applink.rel='nofollow' href = isThemeDark ? 'css/app-dark.css' : 'css/app.css'; 
            setTimeout(function () { document.getElementsByTagName('body')[0].style.display = 'block'; }, 200); 
Light Theme: 
Dark Theme: 
Kindly try with the above information and get back to us if you have any queries. 
Joshna L  

BO Bogdan replied to Joshna Lingala Uthama Reddy Lingala April 18, 2022 11:08 AM UTC

The example doesn't work with version 20 of your packages

JL Joshna Lingala Uthama Reddy Lingala Syncfusion Team April 19, 2022 10:28 AM UTC

Hi Bogdan,

We have prepared a sample for your reference with 20.* version. Please find the sample from below link

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ThemeSwitcher-279801909

Kindly try with the sample and get back to us if you have any queries.


Joshna L

BO Bogdan April 20, 2022 07:31 AM UTC

Hi Joshna

Please find attached a sample of my application. I don't know what's wrong with the theme change not working.

You can help?



Attachment: OrganizerPRO2__TEST_2741808e.zip

JL Joshna Lingala Uthama Reddy Lingala Syncfusion Team May 5, 2022 11:17 AM UTC

Hi Bogdan,

Sorry for the delay.

We suspect that due to installing of the bootstrap NuGet, and adding the external CSS files in the application, the theme was not applied properly. If you want to change the themes along with controls you can change by adding dark theme CSS for the application. However, we have modified the sample which you can download the sample from the below link

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/OrganizerPRO2-909026598

Removed the commented line, added “site-dark.css” file in the application to change the background theme along with controls in the application.

Kindly try with the above information and get back to us if you have any queries.


Joshna L

Live Chat Icon For mobile
Up arrow icon