Syncfusion ASP.NET Core Themes

24 Apr 202424 minutes to read

The following list of themes are included in the Syncfusion ASP.NET Core controls 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 ASP.NET Core Bootstrap Theme is designed based on Bootstrap v3, whereas the Bootstrap4 theme is designed based on Bootstrap v4. Syncfusion ASP.NET Core themes provide support for the Fusion Theme that can only be downloaded from ThemeStudio.

Reference themes in ASP.NET Core application

Syncfusion ASP.NET Core themes can be used in your ASP.NET Core application by referencing the style sheet. Refer the ASP.NET Core Styles Sheet inside the <head> element of ~/Pages/Shared/_Layout.cshtml layout page.

Using the below approaches the themes can be referenced in the ASP.NET Core application,

  1. CDN - Used to reference complete css via static web assets.
  2. CRG - Used to generate resources only for the selected (used) components.
  3. Theme Studio - Used to customize and generate themes only for the selected (used) components.
  4. NPM Packages - Used to customize the existing themes and bundle stylesheet’s in an application.
  5. LibMan - Used to downloads popular libraries and frameworks from a file system or a content delivery network (CDN) in an application.

CDN Reference

Instead of using a local resource on your server, you can use a cloud CDN to refer the theme style sheets. CDN Stands for “Content Delivery Network”. A CDN is a group of servers distributed in different locations. While CDN 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 ASP.NET Core Themes are available in the CDN. Make sure that the version in the URLs matches the version of the Syncfusion Essential JS 2 ASP.NET Core Package you are using.

<head>
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/bootstrap5.css" rel="stylesheet"/>
</head>
Theme Name CDN Reference
Bootstrap 5 https://cdn.syncfusion.com/ej2/27.2.2/bootstrap5.css
Bootstrap 5 Dark https://cdn.syncfusion.com/ej2/27.2.2/bootstrap5-dark.css
Bootstrap 4 https://cdn.syncfusion.com/ej2/27.2.2/bootstrap4.css
Bootstrap 3 https://cdn.syncfusion.com/ej2/27.2.2/bootstrap.css
Bootstrap 3 Dark https://cdn.syncfusion.com/ej2/27.2.2/bootstrap-dark.css
Google’s Material https://cdn.syncfusion.com/ej2/27.2.2/material.css
Google’s Material Dark https://cdn.syncfusion.com/ej2/27.2.2/material-dark.css
Tailwind CSS https://cdn.syncfusion.com/ej2/27.2.2/tailwind.css
Tailwind Dark CSS https://cdn.syncfusion.com/ej2/27.2.2/tailwind-dark.css
Fluent https://cdn.syncfusion.com/ej2/27.2.2/fluent.css
Fluent Dark https://cdn.syncfusion.com/ej2/27.2.2/fluent-dark.css
Microsoft Office Fabric https://cdn.syncfusion.com/ej2/27.2.2/fabric.css
Microsoft Office Fabric Dark https://cdn.syncfusion.com/ej2/27.2.2/fabric-dark.css
High Contrast https://cdn.syncfusion.com/ej2/27.2.2/highcontrast.css

Individual control CDN Reference

The primary goal of individual control CDN is to optimize the loading time and memory of the website/app in the production stage. The order of individual control package loading should be in line with its dependency graph. The CDN of the Dependency Packages should be included manually before the intended individual control package CDN.

controls CDN Reference
Styles reference for individual control https://cdn.syncfusion.com/ej2/27.2.2/{PACKAGE-NAME}/styles/{THEME-NAME}.css

The following table demonstrates the list of individual Syncfusion ASP.NET Core control CDN reference and its dependency packages.

Controls Styles
Accordion
  • CSHTML
  • <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-navigations/styles/fluent.css" rel="stylesheet" />
    Accumulation Chart,
    Smith Chart, Chart
    No Style Sheet Packages
    Avatar, Card,
    Dashboard Layout,
    Splitter
  • CSHTML
  • <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-layouts/styles/fluent.css" rel="stylesheet" />
    Badge
  • CSHTML
  • <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-notifications/styles/fluent.css" rel="stylesheet" />
    Barcode
  • CSHTML
  • <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-barcode-generator/styles/fluent.css" rel="stylesheet" />
    Bullet Chart,
    Sparkline
    No Style Sheet Packages
    Button, CheckBox,
    Chips, Radio Button,
    Switch
  • CSHTML
  • <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-buttons/styles/fluent.css" rel="stylesheet" />
    ButtonGroup
  • CSHTML
  • <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-buttons/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-splitbuttons/styles/fluent.css" rel="stylesheet" />
    Calendar
  • CSHTML
  • <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-calendars/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-buttons/styles/fluent.css" rel="stylesheet" />
    Carousel, Sidebar
  • CSHTML
  • <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-buttons/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-navigations/styles/fluent.css" rel="stylesheet" />
    Circular Gauge No Style Sheet Packages
    Color Picker
  • CSHTML
  • <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-buttons/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-popups/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-splitbuttons/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-inputs/styles/fluent.css" rel="stylesheet" />
    Breadcrumb,
    Context Menu,
    Menu
  • CSHTML
  • <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-lists/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-popups/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-navigations/styles/fluent.css" rel="stylesheet" />
    DatePicker
  • CSHTML
  • <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-inputs/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-popups/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-calendars/styles/fluent.css" rel="stylesheet" />
    DateRangePicker
  • CSHTML
  • <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-buttons/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-lists/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-inputs/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-popups/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-calendars/styles/fluent.css" rel="stylesheet" />
    DateTimePicker,
    TimePicker
  • CSHTML
  • <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-buttons/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-lists/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-inputs/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-popups/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-calendars/styles/fluent.css" rel="stylesheet" />
    Diagram
  • CSHTML
  • <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-buttons/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-inputs/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-popups/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-navigations/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-diagrams/styles/fluent.css" rel="stylesheet" />
    Dialog
  • CSHTML
  • <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-buttons/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-popups/styles/fluent.css" rel="stylesheet" />
    Auto Complete,
    DropDownList,
    MultiSelect,
    ComboBox
  • CSHTML
  • <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-buttons/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-inputs/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-popups/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-dropdowns/styles/fluent.css" rel="stylesheet" />
    DropDownTree
  • CSHTML
  • <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-inputs/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-popups/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-navigations/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-dropdowns/styles/fluent.css" rel="stylesheet" />
    File Manager
  • CSHTML
  • <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-inputs/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-popups/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-buttons/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-splitbuttons/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-navigations/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-layouts/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-grids/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-filemanager/styles/fluent.css" rel="stylesheet" />
    Grid
  • CSHTML
  • <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-grids/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-buttons/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-popups/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-navigations/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-dropdowns/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-inputs/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-calendars/styles/fluent.css" rel="stylesheet" />
    HeatMap,
    ProgressBar
    No Style Sheet Packages
    RichTextEditor
  • CSHTML
  • <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-buttons/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-inputs/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-lists/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-navigations/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-popups/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-splitbuttons/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-richtexteditor/styles/fluent.css" rel="stylesheet" />
    Signature, TextBox,
    Masked TextBox,
    NumericTextBox
  • CSHTML
  • <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-inputs/styles/fluent.css" rel="stylesheet" />
    DropDownButton,
    SplitButton,
    ProgressButton
  • CSHTML
  • <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-buttons/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-popups/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-splitbuttons/styles/fluent.css" rel="stylesheet" />
    Tabs, Toolbar
  • CSHTML
  • <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-buttons/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-popups/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-navigations/styles/fluent.css" rel="stylesheet" />
    Toast
  • CSHTML
  • <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-buttons/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-popups/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-notifications/styles/fluent.css" rel="stylesheet" />
    TreeView
  • CSHTML
  • <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-buttons/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-inputs/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-navigations/styles/fluent.css" rel="stylesheet" />
    ToolTip
  • CSHTML
  • <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-popups/styles/fluent.css" rel="stylesheet" />
    TreeGrid
  • CSHTML
  • <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-grids/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-treegrid/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-buttons/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-popups/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-navigations/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-dropdowns/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-lists/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-inputs/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-calendars/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-splitbuttons/styles/fluent.css" rel="stylesheet" />
    TreeMap No Style Sheet Packages
    Uploader
  • CSHTML
  • <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-buttons/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-inputs/styles/fluent.css" rel="stylesheet" />
    Kanban
  • CSHTML
  • <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-buttons/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-inputs/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-popups/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-layouts/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-navigations/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-kanban/styles/fluent.css" rel="stylesheet" />
    Linear Gauge No Style Sheet Packages
    ListBox
  • CSHTML
  • <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-inputs/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-lists/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-popups/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-dropdowns/styles/fluent.css" rel="stylesheet" />
    ListView
  • CSHTML
  • <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-buttons/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-lists/styles/fluent.css" rel="stylesheet" />
    Maps No Style Sheet Packages
    Pivot Table
  • CSHTML
  • <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-buttons/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-calendars/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-dropdowns/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-grids/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-inputs/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-lists/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-navigations/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-popups/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-pivotview/styles/fluent.css" rel="stylesheet" />
    QueryBuilder
  • CSHTML
  • <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-buttons/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-splitbuttons/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-dropdowns/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-inputs/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-calendars/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-popups/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-querybuilder/styles/fluent.css" rel="stylesheet" />
    Range Navigator No Style Sheet Packages
    Range Slider
  • CSHTML
  • <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-buttons/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-inputs/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-popups/styles/fluent.css" rel="stylesheet" />
    In-place Editor
  • CSHTML
  • <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-buttons/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-inputs/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-popups/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-dropdowns/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-calendars/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-richtexteditor/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-inplace-editor/styles/fluent.css" rel="stylesheet" />
    Schedule
  • CSHTML
  • <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-buttons/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-calendars/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-dropdowns/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-inputs/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-navigations/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-popups/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-schedule/styles/fluent.css" rel="stylesheet" />
    Stock Chart
  • CSHTML
  • <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-buttons/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-calendars/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-inputs/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-splitbuttons/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-navigations/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-popups/styles/fluent.css" rel="stylesheet" />
    Document Editor
  • CSHTML
  • <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-buttons/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-dropdowns/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-inputs/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-lists/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-navigations/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-popups/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-documenteditor/styles/fluent.css" rel="stylesheet" />
    Gantt
  • CSHTML
  • <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-inputs/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-popups/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-buttons/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-dropdowns/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-navigations/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-layouts/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-grids/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-calendars/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-treegrid/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-richtexteditor/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-gantt/styles/fluent.css" rel="stylesheet" />
    PDF Viewer
  • CSHTML
  • <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-buttons/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-popups/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-buttons/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-dropdowns/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-navigations/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-lists/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-inputs/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-splitbuttons/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-notifications/styles/fluent.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-pdfviewer/styles/fluent.css" rel="stylesheet" />

    NPM Packages

    NPM is a node package manager. It is basically used for managing dependencies of various server-side dependencies. You can manage server-side dependencies manually. It is a command-line program for dealing with said repository that aids in package installation, version management, and dependency management. It is an online repository for the publishing of open-source Node.js projects.

    You can add the theme for the ASP.NET Core applications through npm packages using the SCSS files by following the below process.

    • Install Web Compiler to use SCSS files in ASP.NET Core applications.

    • To install Web Compiler, open Visual Studio and click the Manage Extensions in the toolbar.

    Themes-npm-package-extension

    Themes-npm-package-web-compiler

    • Open Command Prompt from the application root directory and run the following command to install the Syncfusion node_modules in this application.
    npm install @syncfusion/ej2
    • Create a custom.scss file inside ~/wwwroot/css location and provide the variables to override as shown below.
    $primary: blue !default;
    @import 'ej2/fabric.scss';
    • Right-click the SCSS file and click the Web Compiler to compile the file.

    Themes-npm-packages-compile

    • The compilerconfig.json file is created. Then, provide the location of the compiled CSS file and include a path as shown in the following code snippet.
    [
      {
        "outputFile": "wwwroot/css/custom.css",
        "inputFile": "wwwroot/css/custom.scss",
        "useNodeSass": true,
        "options": {
          "includePath": "node_modules/@syncfusion"
        }
      }
    ]
    • The SCSS file has been compiled to the CSS file. Then, add this CSS file to the <head> element of the ~/Pages/Shared/_Layout.cshtml page.
    <head>
        ...
        <!-- Syncfusion ASP.NET Core controls styles -->
        <link rel="stylesheet" href="~/css/custom.css" />
    </head>
    • Run the application and see the fabric themes from installed npm packages were applied.

    NOTE

    View sample in GitHub

    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,

    1. Only the library files you need are downloaded.
    2. Additional tooling, such as Node.js, npm, and WebPack, isn’t necessary to acquire a subset of files in a library.
    3. 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.

    Client side library dialog

    2.Select the unpkg in the provider dropdown to get the Syncfusion control themes.

    Select unpkg provider

    3.You can refer the combined control styles by using @syncfusion/ej2@27.2.2 in the library textbox.

    Specify Syncfusion library

    4.You can able to choose specific files or include all library files like below.

    For example, Choose specific files and the bootstrap5 theme is selected in the dialog.

    Choose themes

    5.By using the target location textbox, you can specify the location of where files will be stored in the application.

    For example, Modified the default location wwwroot/lib/syncfusion/ej2/ to wwwroot/themes/syncfusion/ej2/.

    Modified the target location

    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/ej2@27.2.2",
          "destination": "wwwroot/themes/syncfusion/ej2/",
          "files": [
            "bootstrap5.css"
          ]
        }
      ]
    }

    NOTE

    If you use individual control styles, you should install their dependent controls styles.

    7.you can refer to the theme sheet which was downloaded from the client-side library in the <head> element of the ~/Pages/Shared/_Layout.cshtml file.

    <head>
      ...
      <link href="~/themes/syncfusion/ej2/bootstrap5.css" rel="stylesheet" />
    </head>

    8.Run the application and see the bootstrap5 themes downloaded from LibMan were applied.

    You can also choose SCSS file and customize theme variables using the Web Compiler 2022+ by following steps.

    Choose SCSS file

    1.Now, use a specific target location and click the install button to get the libman.json with the following content.

    {
      "version": "1.0",
      "defaultProvider": "unpkg",
      "libraries": [
        {
          "library": "@syncfusion/ej2@27.2.2",
          "destination": "wwwroot/lib/syncfusion/ej2/",
          "files": [
            "base/bootstrap5.scss"
          ]
        }
      ]
    }

    2.Open Command Prompt from the application root directory and run the following command to install the Syncfusion node_modules in this application.

    npm install @syncfusion/ej2

    3.Open Visual Studio 2022 and click the Extensions in the toolbar.

    VS Extension

    4.Search the Web Compiler 2022+ in search box and download the extension.

    Web Compiler 2022+

    5.Right-click the SCSS file and click the Web Compiler to compile the file.

    Themes-libman-compile

    6.The compilerconfig.json file is created by default. Then, provide the location of the compiled CSS file and include a path as shown in the following code snippet.

    [
      {
        "inputFile": "wwwroot/lib/syncfusion/ej2/base/bootstrap5.scss",
        "outputFile": "wwwroot/lib/syncfusion/ej2/base/bootstrap5.css",
        "options": {
          "includePath": "node_modules/@syncfusion"
        }
      }
    ]

    7.You can refer to the theme sheet which was downloaded from the client-side library in the <head> element of the ~/Pages/Shared/_Layout.cshtml file.

    <head>
      ...
      <link href="~/lib/syncfusion/ej2/base/bootstrap5.css" rel="stylesheet" />
    </head>

    8.Run the application and see the bootstrap5 themes downloaded from LibMan were applied.

    NOTE

    View sample in GitHub

    Change theme dynamically

    In the ASP.NET Core application, the application theme can be changed dynamically by changing its style sheet reference in code.

    1.Modify the ~/Pages/Shared/_Layout.cshtml page with the below code to implement a theme change dynamically using the dropdown by its id value in javascript function in the application.

    @model IndexModel
    <!DOCTYPE html>
    <html lang="en">
    <head>
        ...
        <!-- Syncfusion ASP.NET Core controls styles -->
        <link id="cssfile" rel="stylesheet" href="https://cdn.syncfusion.com/ej2/27.2.2/bootstrap5.css" />
    </head>
    <body>
    <header>
        ...
        <div>
            <ejs-dropdownlist id="theme" dataSource="@Model.Themes" index="1" change="onThemeChange" placeholder="Themes" floatLabelType="Always">
            <e-dropdownlist-fields text="Text" value="ID"></e-dropdownlist-fields>
            </ejs-dropdownlist>
        </div>
    </header>
    
    <script type="text/javascript">
        function onThemeChange(e) {
            document.getElementsByTagName('body')[0].style.display = 'none';
            var themeName = e.value;
            let synclink = document.getElementById('cssfile');
            synclink.href = 'https://cdn.syncfusion.com/ej2/27.2.2/' + themeName + '.css';
            setTimeout(function () { document.getElementsByTagName('body')[0].style.display = 'block'; }, 200);
        }
    </script>

    2.Add the following code for dropdown data on the ~/Pages/Index.cshtml.cs model page.

    public 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 class ThemeDetails
    {
        public string ID { get; set; }
        public string Text { get; set; }
    }

    Change theme dynamically

    NOTE

    View sample in GitHub