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.
Hi.
i used your info available here https://blazor.syncfusion.com/documentation/appearance/themes?cs-save-lang=1&cs-lang=csharp but this theme switcher only applies to syncfusion components like Grids, etc.
The page itself, navbar topbar or page background, don't apply the changes.
How can we apply the changes from the theme switcher to the all page?
Hi Carlos,
Greetings from Syncfusion.
We have added a Theme Switcher in our documentation that applies the selected theme to Syncfusion components alone. If you want to theming for other page UI elements (navbar, top bar or page background), we need to customize it through CSS file for the dark mode.
However, we have prepared a sample for your reference. In which, when dark theme is selected, then the background of browser along with Syncfusion components will be changed to dark.
Please find the sample and image references for the same below
Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorServer-1476657587
Code Snippets:
|
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); } }
_Layout.cshtml:
<head> .... <link id="apptheme" rel='nofollow' href="css/site.css" rel="stylesheet" />
<link id="theme" rel='nofollow' href="_content/Syncfusion.Blazor/styles/bootstrap5.css" rel="stylesheet" /> .... </head> <body> ....
<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/styles/' + theme + '.css'; applink.rel='nofollow' href = isThemeDark ? 'css/site-dark.css' : 'css/site.css'; setTimeout(function () { document.getElementsByTagName('body')[0].style.display = 'block'; }, 200); } </script>
</body>
|
Light Theme:
Dark Theme:
Kindly try with the above solution and confirm whether it comes close to your requirements.
Regards,
Joshna L
