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.
Hey,
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.
|
MainLayout.razor:
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);
}
else
{
JS.InvokeAsync<object>("setTheme", args.ItemData.ID, false);
}
}
index.html:
<head>
. . .
<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" />
</head>
<script>
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);
}
</script>
|
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.
Regards,
Joshna L
