Metronic and Blazor - data-bs-theme being removed
I've been trying to convert Metronic demo39 HTML to a Blazor project, and it loads and renders fine on the first load, but as soon as I navigate to a different route, the data-bs-theme that Metronic adds onto the <html> element is being removed, causing formatting from the CSS/SCSS to break.
I've been trying to add a few breakpoints onto the various bits of code in scripts.bundle.js as well as the inline javascript at the top of the body element which handles this, but I can't figure out what's causing the HTML data element to be removed on clicks.
Any Suggestions?
Replies (4)
Hi,
Thank you for reaching out to us.
Do you initialize KTThemeMode component?
JS.InvokeVoidAsync("KTThemeMode.init");Also, please let us know if you have any errors in your console.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
I am using a Blazor Web App, rather than a Blazor Server or WebAssembly, on .NET 8.0.
I've tried the execution of the KTThemeMode.init using the following on the MainLayout.razor file:
@inject IJSRuntime JsRuntime
@code {
protected override void OnAfterRender(bool firstRender)
{
JsRuntime.InvokeVoidAsync("KTThemeMode.init");
}
}However it's not hitting that method, the breakpoints are not hitting on KTThemeMode.init() - This is obviously where my problem lies, but I can't figure out how to get the javascript invocation on this to run.
There's App.razor which contains the HTML, HEAD and Body, then inside that is <Routes /> which contains the router using MainLayout as its main HTML content.
I've tried invokign KTThemeMode.init from the App and MainLayout levels but none of them seem to be hitting the method. I appreciate this is obviously a problem outside of the scope of Metronic since it's my project not hitting what it should do at the right time.
I've been trying to use the Blazor sample that comes with the latest Metronic as reference, and I note that is a Blazor Server app, is this likely to be the problem? Are there any samples for using a Blazor Web app instead?
I've managed to get it working by changing some of the rendering mode.
I will look at what other things need to be initialised on navigation, thanks for the help.
Hi,
Glad to hear you managed to fix it. Please don't hesitate to reach out if you need any additional help.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
