Blazor Themes in Syncfusion Components
23 May 202324 minutes to read
The following list of themes are included in the Syncfusion Blazor components library.
Theme | Style Sheet Name |
---|---|
Bootstrap 5 | bootstrap5.css |
Bootstrap 5 Dark | bootstrap5-dark.css |
Bootstrap 4 | bootstrap4.css |
Bootstrap 3 | bootstrap.css |
Bootstrap 3 Dark | bootstrap-dark.css |
Google’s Material | material.css |
Google’s Material-Dark | material-dark.css |
Tailwind CSS | tailwind.css |
Tailwind CSS Dark | tailwind-dark.css |
Fluent | fluent.css |
Fluent Dark | fluent-dark.css |
Microsoft Office Fabric | fabric.css |
Microsoft Office Fabric Dark | fabric-dark.css |
High Contrast | highcontrast.css |
The Syncfusion Blazor Bootstrap Theme is designed based on Bootstrap v3, whereas the Bootsrap4 theme is designed based on Bootstrap v4.
Reference themes in Blazor application
Syncfusion Blazor themes can be used in your Blazor application by referencing the style sheet.
- For Blazor WebAssembly application, refer style sheet inside the
<head>
of wwwroot/index.html file. - For Blazor Server application, refer style sheet inside the
<head>
of- ~/Pages/_Host.cshtml file for .NET 3, .NET 5 and .NET 7.
- ~/Pages/_Layout.cshtml for .NET 6.
Using the below approaches the themes can be referenced in the Blazor application,
- Static Web assets - Used to reference complete css via static web assests.
- CDN - Used to reference complete css via static web assests.
- CRG - Used to generate resources only for the selected (used) components.
- Theme Studio - Used to customize and generate themes only for the selected (used) components.
- NPM packages - Used to customize the existing themes and bundle stylesheet’s in an application.
Instead of using Static Web assets or a CDN reference, you can reference the style sheet into your projects to customize the theme or bundle it with the other style sheets using NPM packages.
Static Web Assets
Enable static web assets usage
To use static web assets, ensure UseStaticFiles method is called as follows,
- For .NET 6 and .NET 7 app, open the ~/Program.cs file and call
UseStaticFiles
method. - For .NET 5 and .NET 3.X app, open the ~/Startup.cs file and call
UseStaticFiles
method.
NOTE
For Blazor WASM App, call
UseStaticFiles
method in Server project in the above mentioned file.
Refer theme style sheet from static web assets
Syncfusion Blazor themes are available as static web assets in the Syncfusion.Blazor.Themes and Syncfusion.Blazor NuGet Packages.
- For Blazor WebAssembly application, refer style sheet inside the
<head>
element of wwwroot/index.html file. - For Blazor Server application, refer style sheet inside the
<head>
element of- ~/Pages/_Host.cshtml file for .NET 3, .NET 5 and .NET 7.
- ~/Pages/_Layout.cshtml for .NET 6.
When using individual NuGet packages in your application, add Syncfusion.Blazor.Themes NuGet Package and reference style sheet as below,
<head>
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
</head>
When using Syncfusion.Blazor NuGet package,
<head>
<link href="_content/Syncfusion.Blazor/styles/bootstrap5.css" rel="stylesheet" />
</head>
CDN reference
Instead of using a local resource on your server, you can use a cloud CDN to reference the theme style sheets. CDN Stands for “Content Delivery Network”. A CDN is a group of servers distributed in different locations. While CDNs are often used to host websites, they are commonly used to provide other types of downloadable data as well. Examples include software programs, images, videos, and streaming media.
Syncfusion Blazor Themes are available in the CDN. Make sure that the version in the URLs matches the version of the Syncfusion Blazor Package you are using.
<head>
<link href="https://cdn.syncfusion.com/blazor/21.1.35/styles/bootstrap5.css" rel="stylesheet"/>
</head>
Theme Name | CDN Reference |
---|---|
Bootstrap 5 | https://cdn.syncfusion.com/blazor/21.1.35/styles/bootstrap5.css |
Bootstrap 5 Dark | https://cdn.syncfusion.com/blazor/21.1.35/styles/bootstrap5-dark.css |
Bootstrap 4 | https://cdn.syncfusion.com/blazor/21.1.35/styles/bootstrap4.css |
Bootstrap 3 | https://cdn.syncfusion.com/blazor/21.1.35/styles/bootstrap.css |
Bootstrap 3 Dark | https://cdn.syncfusion.com/blazor/21.1.35/styles/bootstrap-dark.css |
Google’s Material | https://cdn.syncfusion.com/blazor/21.1.35/styles/material.css |
Google’s Material Dark | https://cdn.syncfusion.com/blazor/21.1.35/styles/material-dark.css |
Tailwind CSS | https://cdn.syncfusion.com/blazor/21.1.35/styles/tailwind.css |
Tailwind CSS Dark | https://cdn.syncfusion.com/blazor/21.1.35/styles/tailwind-dark.css |
Fluent | https://cdn.syncfusion.com/blazor/21.1.35/styles/fluent.css |
Fluent Dark | https://cdn.syncfusion.com/blazor/21.1.35/styles/fluent-dark.css |
Microsoft Office Fabric | https://cdn.syncfusion.com/blazor/21.1.35/styles/fabric.css |
Microsoft Office Fabric Dark | https://cdn.syncfusion.com/blazor/21.1.35/styles/fabric-dark.css |
High Contrast | https://cdn.syncfusion.com/blazor/21.1.35/styles/highcontrast.css |
LibMan
Library Manager (LibMan) is a client-side library acquisition tool that is simple to use. LibMan is a program that downloads popular libraries and frameworks from a file system or a content delivery network (CDN).
LibMan offers the following advantages,
- Only the library files you need are downloaded.
- Additional tooling, such as Node.js, npm, and WebPack, isn’t necessary to acquire a subset of files in a library.
- Files can be placed in a specific location without resorting to build tasks or manual file copying.
Client-Side Library dialog
1.Right-click the project folder where the files should be added. Select Add -> Client-Side Library. Then Add Client-Side Library dialog appears like below.
2.Select the unpkg in the provider dropdown to get the Syncfusion control themes.
3.You can refer the combined component styles by using @syncfusion/blazor-themes@21.1.35
in the library textbox.
4.You can choose to select specific files or include all library files, as shown below.
For example, select specific files and choose the Bootstrap 5 theme in the dialog.
5.By using the target location textbox, you can specify the location of where files will be stored in the application.
For example, the default location wwwroot/lib/syncfusion/blazor-themes/
has been modified to wwwroot/themes/syncfusion/blazor-themes/
.
6.Click the install button then libman.json
file is added to the root application with the following content.
{
"version": "1.0",
"defaultProvider": "unpkg",
"libraries": [
{
"library": "@syncfusion/blazor-themes@21.1.35",
"destination": "wwwroot/themes/syncfusion/blazor-themes/",
"files": [
"SCSS-Themes/bootstrap5.scss"
]
}
]
}
NOTE
If you use individual component styles, you should install the styles of their dependent components as well. Refer to this to find the dependent components.
7.You can add the SCSS theme
for Blazor applications through LibMan and compile it by using the Web Compiler 2022+ by following steps.
-
Open Visual Studio 2022 and click the Extensions in the toolbar.
-
Search the
Web Compiler 2022+
in search box and download the extension. -
Right-click the
SCSS
file and click the Web Compiler to compile the file.
- The
compilerconfig.json
file is created by default as shown in the following code snippet.
[
{
"outputFile": "wwwroot/themes/syncfusion/blazor-themes/SCSS-Themes/bootstrap5.css",
"inputFile": "wwwroot/themes/syncfusion/blazor-themes/SCSS-Themes/bootstrap5.scss"
}
]
* The `SCSS` file has been compiled to the `CSS` file. Then, add the compiled CSS file to the `<head>` element of the Host page.
<div class="tabs">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a data-target="#itwanmzxxfoggmg5367tb9bigmvnb6ey-csharp" aria-controls="home" role="tab" data-toggle="tab" data-original-lang="csharp">~/_Layout.cshtml</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="itwanmzxxfoggmg5367tb9bigmvnb6ey-csharp" data-original-lang = "csharp" ><div class="highlight"><pre><code class="prettyprint language-csharp" data-lang="csharp"><span></span><span class="p"><</span><span class="n">head</span><span class="p">></span>
<span class="p">...</span>
<span class="p"><!--</span> <span class="n">Syncfusion</span> <span class="n">Blazor</span> <span class="n">components</span><span class="err">'</span> <span class="n">styles</span> <span class="p">--></span>
<span class="p"><</span><span class="n">link</span> <span class="n">href</span><span class="p">=</span><span class="s">"~/themes/syncfusion/blazor-themes/scss-themes/bootstrap5.css"</span> <span class="n">rel</span><span class="p">=</span><span class="s">"stylesheet"</span> <span class="p">/></span>
<span class="p"></</span><span class="n">head</span><span class="p">></span></code></pre></div>
</div>
</div>
</div>
8.Run the application and see the bootstrap5 themes downloaded from LibMan were applied.
NOTE
NPM package reference
The Blazor Themes NPM package contains SCSS
files for all themes supported by Syncfusion Blazor components. These SCSS files customize theme variables using a web compiler. The package includes component wise SCSS files and overall components SCSS files.
You can add the SCSS theme
for Blazor applications through NPM package and compile it by using the Web Compiler 2022+ by following steps.
-
Open Visual Studio 2022 and click the Extensions in the toolbar.
-
Search the
Web Compiler 2022+
in search box and download the extension. -
Install the Syncfusion Blazor Themes NPM package using the below command.
npm install @syncfusion/blazor-themes
-
Create a
SCSS
file in the Static Web Assets folder (e.g., ~/wwwroot/styles/custom.scss). Next, define the theme variables to override and import the theme as shown in the following.In the following code, the primary theme variable color is changed. For all components:
$primary: blue !default; /* @import 'blazor-themes/SCSS-Themes/<Theme name>.scss'; */ @import 'blazor-themes/SCSS-Themes/fluent.scss';
Output:
For the Calendar (individual) component:
$primary: #666699 !default; /* @import 'blazor-themes/SCSS-Themes/<Package name>/<Control name>/<Theme name>.scss'; */ @import 'blazor-themes/SCSS-Themes/calendars/calendar/fluent.scss';
Output:
-
Then, Right-click the created
SCSS
file and click theWeb Compiler
option to compile the file. -
The
compilerconfig.json
file is created by default. Then, provide the location of the compiled CSS file and include a path incompilerconfig.json
as shown in the following code snippet.[ { "outputFile": "wwwroot/styles/custom.css", "inputFile": "wwwroot/styles/custom.scss", "options": { "loadPaths": "node_modules/@syncfusion" } } ]
-
The
SCSS
file has been compiled to theCSS
file. Then, add the compiled CSS file to the<head>
element of the Host page.<head> ... ... <link href="~/styles/custom.css" rel="stylesheet" /> </head>
-
Run the application to see the customized Fluent theme applied.
NOTE
If you are using Visual Studio 2019, please use the
includePath
property instead ofloadPaths
as the latter does not support the Web Compiler for VS 2019. However, we highly recommend using the Web Compiler 2022+ for Visual Studio 2022. For more information, please refer to the discussion link here.
The following shows the importing theme path for the overall theme.
@import 'blazor-themes/SCSS-Themes/.scss'
Below table lists the importing theme path for the individual components.
Component | Importing theme path |
---|---|
Accordion | @import 'blazor-themes/SCSS-Themes/navigations/accordion/.scss' |
AppBar | @import 'blazor-themes/SCSS-Themes/navigations/appbar/.scss' |
AutoComplete | @import 'blazor-themes/SCSS-Themes/dropdowns/auto-complete/.scss' |
Avatar | @import 'blazor-themes/SCSS-Themes/layouts/avatar/.scss' |
Badge | @import 'blazor-themes/SCSS-Themes/notifications/badge/.scss' |
Barcode | @import 'blazor-themes/SCSS-Themes/barcode-generator/barcode/.scss' |
Breadcrumb | @import 'blazor-themes/SCSS-Themes/navigations/breadcrumb/.scss' |
Button | @import 'blazor-themes/SCSS-Themes/buttons/button/.scss' |
ButtonGroup | @import 'blazor-themes/SCSS-Themes/buttons/button/.scss' |
Calendar | @import 'blazor-themes/SCSS-Themes/calendars/calendar/.scss' |
Card | @import 'blazor-themes/SCSS-Themes/layouts/card/.scss' |
Carousel | @import 'blazor-themes/SCSS-Themes/navigations/carousel/.scss' |
CheckBox | @import 'blazor-themes/SCSS-Themes/buttons/check-box/.scss' |
Chip | @import 'blazor-themes/SCSS-Themes/buttons/chips/.scss' |
Color Picker | @import 'blazor-themes/SCSS-Themes/inputs/color-picker/.scss' |
ComboBox | @import 'blazor-themes/SCSS-Themes/dropdowns/combo-box/.scss' |
ContextMenu | @import 'blazor-themes/SCSS-Themes/navigations/context-menu/.scss' |
Dashboard Layout | @import 'blazor-themes/SCSS-Themes/layouts/dashboard-layout/.scss' |
DataGrid | @import 'blazor-themes/SCSS-Themes/grids/grid/.scss' |
DatePicker | @import 'blazor-themes/SCSS-Themes/calendars/datepicker/.scss' |
DateRange Picker | @import 'blazor-themes/SCSS-Themes/calendars/daterangepicker/.scss' |
DateTime Picker | @import 'blazor-themes/SCSS-Themes/calendars/datetimepicker/.scss' |
Diagram | @import 'blazor-themes/SCSS-Themes/diagrams/diagram/.scss' |
Dialog | @import 'blazor-themes/SCSS-Themes/popups/dialog/.scss' |
Predefined Dialogs | @import 'blazor-themes/SCSS-Themes/popups/dialog/.scss' |
DocumentEditor | @import 'blazor-themes/SCSS-Themes/documenteditor/document-editor/.scss' |
Dropdown Menu | @import 'blazor-themes/SCSS-Themes/dropdowns/drop-down-list/.scss' |
Dropdown List | @import 'blazor-themes/SCSS-Themes/dropdowns/drop-down-list/.scss' |
FileManager | @import 'blazor-themes/SCSS-Themes/filemanager/file-manager/.scss' |
File Upload | @import 'blazor-themes/SCSS-Themes/inputs/uploader/.scss' |
Floating Action Button | @import 'blazor-themes/SCSS-Themes/buttons/floating-action-button/.scss' |
Gantt Chart | @import 'blazor-themes/SCSS-Themes/gantt/gantt/.scss' |
In-place Editor | @import 'blazor-themes/SCSS-Themes/inplace-editor/inplace-editor/.scss' |
Input Mask | @import 'blazor-themes/SCSS-Themes/inputs/input/.scss' |
Kanban | @import 'blazor-themes/SCSS-Themes/kanban/kanban/.scss' |
ListBox | @import 'blazor-themes/SCSS-Themes/dropdowns/list-box/.scss' |
ListView | @import 'blazor-themes/SCSS-Themes/lists/list-view/.scss' |
Menu Bar | @import 'blazor-themes/SCSS-Themes/navigations/menu/.scss' |
Message | @import 'blazor-themes/SCSS-Themes/notification/message/.scss' |
MultiSelect Dropdown | @import 'blazor-themes/SCSS-Themes/dropdowns/multi-select/.scss' |
Numeric TextBox | @import 'blazor-themes/SCSS-Themes/inputs/numerictextbox/.scss' |
Pager | @import 'blazor-themes/SCSS-Themes/navigations/pager/.scss' |
PDF Viewer | @import 'blazor-themes/SCSS-Themes/pdfviewer/pdfviewer/.scss' |
Pivot Table | @import 'blazor-themes/SCSS-Themes/pivotview/pivotview/.scss' |
ProgressButton | @import 'blazor-themes/SCSS-Themes/splitbuttons/progress-button/.scss' |
QueryBuilder | @import 'blazor-themes/SCSS-Themes/querybuilder/query-builder/.scss' |
RadioButton | @import 'blazor-themes/SCSS-Themes/buttons/radio-button/.scss' |
Range Slider | @import 'blazor-themes/SCSS-Themes/inputs/slider/.scss' |
RichTextEditor | @import 'blazor-themes/SCSS-Themes/richtexteditor/rich-text-editor/.scss' |
Scheduler | @import 'blazor-themes/SCSS-Themes/schedule/schedule/.scss' |
Sidebar | @import 'blazor-themes/SCSS-Themes/navigations/sidebar/.scss' |
Signature | @import 'blazor-themes/SCSS-Themes/inputs/signature/.scss' |
Skeleton | @import 'blazor-themes/SCSS-Themes/notification/skeleton/.scss' |
Speed Dial | @import 'blazor-themes/SCSS-Themes/buttons/speed-dial/.scss' |
Spinner | @import 'blazor-themes/SCSS-Themes/popups/spinner/.scss' |
Tabs | @import 'blazor-themes/SCSS-Themes/navigations/tab/.scss' |
TextBox | @import 'blazor-themes/SCSS-Themes/inputs/textbox/.scss' |
TimePicker | @import 'blazor-themes/SCSS-Themes/calendars\timepicker/.scss' |
Toast | @import 'blazor-themes/SCSS-Themes/popups/toast/.scss' |
Toggle Switch Button | @import 'blazor-themes/SCSS-Themes/buttons/button/.scss' |
Toolbar | @import 'blazor-themes/SCSS-Themes/navigations/toolbar/.scss' |
Tooltip | @import 'blazor-themes/SCSS-Themes/popups/tooltip/.scss' |
TreeGrid | @import 'blazor-themes/SCSS-Themes/treegrid/treegrid/.scss' |
TreeView | @import 'blazor-themes/SCSS-Themes/navigations/treeview/.scss' |
Diagram(Classic) | @import 'blazor-themes/SCSS-Themes/diagrams/diagram/.scss' |
Change theme dynamically
In the Blazor application, the application theme can be changed dynamically by changing its style sheet reference in code.
Change theme dynamically in Blazor server app
The following example demonstrates how to change a theme dynamically in Blazor Server application using Syncfusion Blazor themes using Syncfusion Dropdown component.
1.Below step shows how to reference style sheet in the way to change at dynamically.
- For .NET6 Blazor Server Application, In the _Layout.cshtml the theme is changed dynamically using
id
insetTheme
method. - For .NET 3.1, .NET 5 and .NET 7 Blazor Server Application, In _Host.cshtml, the theme is changed based on query string.
<head>
...
<link id="theme" href="_content/Syncfusion.Blazor.Themes/bootstrap4.css" rel="stylesheet" />
</head>
...
<script>
function setTheme(theme) {
document.getElementsByTagName('body')[0].style.display = 'none';
let synclink = document.getElementById('theme');
synclink.href = '_content/Syncfusion.Blazor.Themes/' + theme + '.css';
setTimeout(function () { document.getElementsByTagName('body')[0].style.display = 'block'; }, 200);
}
</script>
...
@page "/"
@namespace BlazorThemeSwitcher.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
Layout = null;
QueryHelpers.ParseQuery(Request.QueryString.Value).TryGetValue("theme", out var themeName);
themeName = themeName.Count > 0 ? themeName.First() : "bootstrap4";
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BlazorThemeSwitcher</title>
<base href="~/" />
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
<link href="css/site.css" rel="stylesheet" />
<link href="BlazorThemeSwitcher.styles.css" rel="stylesheet" />
<link href=@("_content/Syncfusion.Blazor.Themes/" + themeName + ".css")rel="stylesheet" />
</head>
<body>
<script src="_framework/blazor.server.js"></script>
</ </body>
</html>
2.Below step shows changing style sheet dynamically.
-
For .NET5 Blazor Server Application, in MainLayout.razor page add dropdown list with themes. In
ValueChange
event handler, the page is refreshed by changing query string to change the theme in application. -
For .NET6 Blazor Server Application, modify the MainLayout.razor page add dropdown list with themes. In
ValueChange
event handler, the theme is changed by callingsetTheme
method defined in step `.
@inherits LayoutComponentBase
@inject NavigationManager UrlHelper;
@inject IJSRuntime JSRuntime;
@using Syncfusion.Blazor.DropDowns;
@using Syncfusion.Blazor.Buttons;
@using Microsoft.AspNetCore.WebUtilities;
<div class="page">
<div class="main">
<div class="top-row px-4">
<div class="theme-switcher">
@*Theme switcher*@
<SfDropDownList TItem="ThemeDetails" TValue="string" @bind-Value="themeName" DataSource="@Themes">
<DropDownListFieldSettings Text="Text" Value="ID"></DropDownListFieldSettings>
<DropDownListEvents TItem="ThemeDetails" TValue="string" ValueChange="OnThemeChange"></DropDownListEvents>
</SfDropDownList>
</div>
<a href="http://blazor.net" target="_blank" class="ml-md-auto">About</a>
</div>
<div class="content px-4">
@Body
</div>
</div>
</div>
@code {
private string themeName;
public class ThemeDetails
{
public string ID { get; set; }
public string Text { get; set; }
}
private List<ThemeDetails> Themes = new List<ThemeDetails>() {
new ThemeDetails(){ ID = "material", Text = "Material" },
new ThemeDetails(){ ID = "bootstrap", Text = "Bootstrap" },
new ThemeDetails(){ ID = "fabric", Text = "Fabric" },
new ThemeDetails(){ ID = "bootstrap4", Text = "Bootstrap 4" },
new ThemeDetails(){ ID = "tailwind", Text = "TailWind"},
new ThemeDetails(){ ID = "tailwind-dark", Text = "TailWind Dark" },
new ThemeDetails(){ ID = "material-dark", Text = "Material Dark" },
new ThemeDetails(){ ID = "bootstrap-dark", Text = "Bootstrap Dark" },
new ThemeDetails(){ ID = "fabric-dark", Text = "Fabric Dark" },
new ThemeDetails(){ ID = "highcontrast", Text = "High Contrast" }
};
public void OnThemeChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, ThemeDetails> args)
{
JSRuntime.InvokeAsync<object>("setTheme", args.ItemData.ID);
}
private string GetThemeName()
{
var uri = UrlHelper.ToAbsoluteUri(UrlHelper.Uri);
QueryHelpers.ParseQuery(uri.Query).TryGetValue("theme", out var theme);
return theme.Count > 0 ? theme.First() : "bootstrap4";
}
protected override void OnInitialized()
{
var theme = GetThemeName();
themeName = theme.Contains("bootstrap4") ? "bootstrap4" : theme;
}
}
@inherits LayoutComponentBase
@inject NavigationManager UrlHelper;
@using Syncfusion.Blazor.DropDowns;
@using Syncfusion.Blazor.Buttons;
@using Microsoft.AspNetCore.WebUtilities
<div class="page">
<div class="main">
<div class="top-row px-4">
<div class="theme-switcher">
@*Theme switcher*@
<SfDropDownList TItem="ThemeDetails" TValue="string" @bind-Value="themeName" DataSource="@Themes">
<DropDownListFieldSettings Text="Text" Value="ID"></DropDownListFieldSettings>
<DropDownListEvents TItem="ThemeDetails" TValue="string" ValueChange="OnThemeChange"></DropDownListEvents>
</SfDropDownList>
</div>
<a href="http://blazor.net" target="_blank" class="ml-md-auto">About</a>
</div>
<div class="content px-4">
@Body
</div>
</div>
</div>
@code {
private string themeName;
public class ThemeDetails
{
public string ID { get; set; }
public string Text { get; set; }
}
private List<ThemeDetails> Themes = new List<ThemeDetails>() {
new ThemeDetails(){ ID = "material", Text = "Material" },
new ThemeDetails(){ ID = "bootstrap", Text = "Bootstrap" },
new ThemeDetails(){ ID = "fabric", Text = "Fabric" },
new ThemeDetails(){ ID = "bootstrap4", Text = "Bootstrap 4" },
new ThemeDetails(){ ID = "tailwind", Text = "TailWind"},
new ThemeDetails(){ ID = "tailwind-dark", Text = "TailWind Dark" },
new ThemeDetails(){ ID = "material-dark", Text = "Material Dark" },
new ThemeDetails(){ ID = "bootstrap-dark", Text = "Bootstrap Dark" },
new ThemeDetails(){ ID = "fabric-dark", Text = "Fabric Dark" },
new ThemeDetails(){ ID = "highcontrast", Text = "High Contrast" }
};
public void OnThemeChange(ChangeEventArgs<string, ThemeDetails> args)
{
var theme = GetThemeName();
if (theme != args.ItemData.ID)
{
UrlHelper.NavigateTo(GetUri(args.ItemData.ID ), true);
}
}
private string GetThemeName()
{
var uri = UrlHelper.ToAbsoluteUri(UrlHelper.Uri);
QueryHelpers.ParseQuery(uri.Query).TryGetValue("theme", out var theme);
return theme.Count > 0 ? theme.First() : "bootstrap4";
}
private string GetUri(string themeName)
{
var uri = UrlHelper.ToAbsoluteUri(UrlHelper.Uri);
return uri.AbsolutePath + "?theme=" + themeName;
}
protected override void OnInitialized()
{
var theme = GetThemeName();
themeName = theme.Contains("bootstrap4") ? "bootstrap4" : theme;
}
}
NOTE
Change theme dynamically in blazor WebAssembly (WASM) app
The following example demonstrates how to change a theme dynamically in Blazor WebAssembly using the application with the Syncfusion Blazor themes using Syncfusion Dropdown component.
-
Add the below function code in the index.html file to set the theme as selected in dropdown by using its
id
value.<head> ... <link id="theme" href="_content/Syncfusion.Blazor.Themes/bootstrap4.css" rel="stylesheet" /> </head> ... <script> function setTheme(theme) { document.getElementsByTagName('body')[0].style.display = 'none'; let synclink = document.getElementById('theme'); synclink.href = '_content/Syncfusion.Blazor.Themes/' + theme + '.css'; setTimeout(function () { document.getElementsByTagName('body')[0].style.display = 'block'; }, 200); } </script> ...
-
Modify the MainLayout.razor page with the below code to implement a theme change dynamically using the dropdown by its id value in javascript function in the application.
@inherits LayoutComponentBase @inject NavigationManager UrlHelper; @inject IJSRuntime JSRuntime; @using Syncfusion.Blazor.DropDowns; @using Syncfusion.Blazor.Buttons; @using Microsoft.AspNetCore.WebUtilities; <div class="page"> <div class="main"> <div class="top-row px-4"> <div class="theme-switcher"> @*Theme switcher*@ <SfDropDownList TItem="ThemeDetails" TValue="string" @bind-Value="themeName" DataSource="@Themes"> <DropDownListFieldSettings Text="Text" Value="ID"></DropDownListFieldSettings> <DropDownListEvents TItem="ThemeDetails" TValue="string" ValueChange="OnThemeChange"></DropDownListEvents> </SfDropDownList> </div> <a href="http://blazor.net" target="_blank" class="ml-md-auto">About</a> </div> <div class="content px-4"> @Body </div> </div> </div> @code { private string themeName; public class ThemeDetails { public string ID { get; set; } public string Text { get; set; } } private List<ThemeDetails> Themes = new List<ThemeDetails>() { new ThemeDetails(){ ID = "material", Text = "Material" }, new ThemeDetails(){ ID = "bootstrap", Text = "Bootstrap" }, new ThemeDetails(){ ID = "fabric", Text = "Fabric" }, new ThemeDetails(){ ID = "bootstrap4", Text = "Bootstrap 4" }, new ThemeDetails(){ ID = "tailwind", Text = "TailWind"}, new ThemeDetails(){ ID = "tailwind-dark", Text = "TailWind Dark" }, new ThemeDetails(){ ID = "material-dark", Text = "Material Dark" }, new ThemeDetails(){ ID = "bootstrap-dark", Text = "Bootstrap Dark" }, new ThemeDetails(){ ID = "fabric-dark", Text = "Fabric Dark" }, new ThemeDetails(){ ID = "highcontrast", Text = "High Contrast" } }; public void OnThemeChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, ThemeDetails> args) { JSRuntime.InvokeAsync<object>("setTheme", args.ItemData.ID); } private string GetThemeName() { var uri = UrlHelper.ToAbsoluteUri(UrlHelper.Uri); QueryHelpers.ParseQuery(uri.Query).TryGetValue("theme", out var theme); return theme.Count > 0 ? theme.First() : "bootstrap4"; } protected override void OnInitialized() { var theme = GetThemeName(); themeName = theme.Contains("bootstrap4") ? "bootstrap4" : theme; } }
NOTE
Render Syncfusion Components in offline with Material and Tailwind Themes
Material and Tailwind Themes uses online roboto font. If your app is designed to work in a local network without internet connection, follow the below steps to use offline fonts to work in offline scenarios.
- Download the minified styles for the required components from CRG site. Learn more about CRG in help documentation.
- Unzip the file and it contains the styles of the selected components and an
import.json
file, which stores the current settings.
- The styles folder of material and tailwind theme contains css files and a customized folder. The CSS files under customized folder doesn’t contain the online google font dependencies.
- Open the customized folder which contains CSS files without online dependencies of google fonts.
- Copy the files under the customized folder to Blazor application
~/wwwroot
folder. - Now, manually add the custom styles in the Blazor App to render the components without any issues on the machines that contains no internet access.
- For Blazor WASM App, reference custom interop script in
~/wwwroot/index.html
file. - For Blazor Server App, reference custom interop script in
-
~/Pages/_Layout.cshtml
file for.NET 6
project -
~/Pages/_Host.cshtml
file for.NET Core 3.X, .NET 5 and .NET 7
project.
-
<head> .... .... <link href="material.min.css" rel="stylesheet" /> </head>
- For Blazor WASM App, reference custom interop script in
See also
How to change background of browser based on Syncfusion Theme in Blazor?