Blazor

Search results

Built-in Themes

03 Aug 2021 / 12 minutes to read

The Syncfusion Blazor components library provides the following list of built-in themes:

Bootstrap 4
Bootstrap
Google’s Material
Microsoft Office’s Fabric
High Contrast
Tailwind CSS

The Syncfusion Blazor Bootstrap theme is designed based on Bootstrap v3, whereas the Bootstrap 4 theme is designed based on Bootstrap v4.

Theme file syntax and references

The Syncfusion Blazor themes are available as static web assets in the Syncfusion.Blazor and Syncfusion.Blazor.Themes NuGet packages.
Add the below link reference inside the <head> element of the ~/Pages/_Host.cshtml file for Blazor server app or ~/wwwroot/index.html file for Blazor WebAssembly app.

If you are using individual NuGet packages in your application, then use the below reference link.

<head>
    ....
    ....
    <link href="_content/Syncfusion.Blazor.Themes/bootstrap4.css" rel="stylesheet" />
</head>

If you are using Syncfusion.Blazor NuGet package in your application, then use the below reference link.

<head>
    ....
    ....
    <link href="_content/Syncfusion.Blazor/styles/bootstrap4.css" rel="stylesheet" />
</head>

The below theme file names can be replaced with the above links.

bootstrap4.css

bootstrap.css

bootstrap-dark.css

fabric.css

fabric-dark.css

highcontrast.css

material.css

material-dark.css

tailwind.css

CDN reference

The Syncfusion Blazor themes also available in the CDN.

<head>
....
....
<link href="https://cdn.syncfusion.com/blazor/19.2.49/styles/bootstrap4.css" rel="stylesheet" />
</head>

Common Variables

The following list of common variables is used in the Syncfusion Blazor library themes for all UI components. You can change these variables to customize the corresponding theme.

Syncfusion Blazor Bootstrap 4 Theme

Name	Value
`$white`	`#fff`
`$gray-100`	`#f8f9fa`
`$gray-200`	`#e9ecef`
`$gray-300`	`#dee2e6`
`$gray-400`	`#ced4da`
`$gray-500`	`#adb5bd`
`$gray-600`	`#6c757d`
`$gray-700`	`#495057`
`$gray-800`	`#343a40`
`$gray-900`	`#212529`
`$black`	`#000`
`$blue`	`#007bff`
`$indigo`	`#6610f2`
`$purple`	`#6f42c1`
`$pink`	`#e83e8c`
`red`	`#dc3545`
`$orange`	`#fd7e14`
`$yellow`	`#ffc107`
`$green`	`#28a745`
`$teal`	`#20c997`
`$cyan`	`#17a2b8`

Syncfusion Blazor Bootstrap Theme

Name	Value (Default Theme)	Value (Dark Theme)
`$brand-primary`	`#317ab9`	`#0070f0`
`$brand-primary-darken-10`	`#3071a9`	`#0058bd`
`$brand-primary-darken-15`	`#2a6496`	`#00408a`
`$brand-primary-darken-25`	`#1f496e`	`#002957`
`$brand-primary-darken-35`	`#142f46`	`#001124`
`$brand-primary-font`	`#ffffff`	`#fff`
`$grey-base`	`#000000`	`#1a1a1a`
`$grey-darker`	`#222222`	`#131313`
`$grey-dark`	`#333333`	`#2a2a2a`
`$grey`	`#555555`	`#313131`
`$grey-light`	`#777777`	`#393939`
`$grey-44`	`#444444`	`#414141`
`$grey-88`	`#888888`	`#484848`
`$grey-99`	`#999999`	`#505050`
`$grey-8c`	`#8c8c8c`	`#585858`
`$grey-ad`	`#adadad`	`#676767`
`$grey-dark-font`	`#ffffff`	`#f0f0f0`
`$grey-white`	`#ffffff`	`#6e6e6e`
`$grey-lighter`	`#eeeeee`	`#767676`
`$grey-f9`	`#f9f9f9`	`#7e7e7e`
`$grey-f8`	`#f8f8f8`	`#858585`
`$grey-f5`	`#f5f5f5`	`#8d8d8d`
`$grey-e6`	`#e6e6e6`	`#959595`
`$grey-dd`	`#dddddd`	`#9c9c9c`
`$grey-d4`	`#d4d4d4`	`#a4a4a4`
`$grey-cc`	`#cccccc`	`#acacac`
`$grey-light-font`	`#333333`	`#fff`
`$brand-success`	`#5cb85c`	`#48b14c`
`$brand-success-dark`	`#3c763d`	`#358238`
`$brand-info`	`#5bc0de`	`#2aaac0`
`$brand-info-dark`	`#31708f`	`#208090`
`$brand-warning`	`#f0ad4e`	`#fac168`
`$brand-warning-dark`	`#8a6d3b`	`#f9ad37`
`$brand-danger`	`#d9534f`	`#d44f4f`
`$brand-danger-dark`	`#a94442`	`#c12f2f`
`$brand-success-light`	`#dff0d8`	`#dff0d8`
`$brand-info-light`	`#d9edf7`	`#d9edf7`
`$brand-warning-light`	`#fcf8e3`	`#fcf8e3`
`$brand-danger-light`	`#f2dede`	`#f2dede`
`$input-border-focus`	`#66afe9`	`#104888`
`$brand-success-font`	`#3c763d`	`#2f7432`
`$brand-info-font`	`#31708f`	`#1a6c7a`
`$brand-warning-font`	`#8a6d3b`	`#9d6106`
`$brand-danger-font`	`#a94442`	`#ac2a2a`
`$base-font`	`#000000`	`#000`

Syncfusion Blazor Material Theme

Name	Value (Default Theme)	Value (Dark Theme)
`$accent`	`#e3165b`	`#00b0ff`
`$accent-font`	`#ffffff`	`#000`
`$primary`	`#3f51b5`	`#3f51b5`
`$primary-50`	`#e8eaf6`	`#e8eaf6`
`$primary-100`	`#c5cae9`	`#c5cae9`
`$primary-200`	`#9fa8da`	`#9fa8da`
`$primary-300`	`#7986cb`	`#7986cb`
`$primary-font`	`#ffffff`	`#fff`
`$primary-50-font`	`#000000`	`#000000`
`$primary-100-font`	`#000000`	`#000000`
`$primary-200-font`	`#000000`	`#000000`
`$primary-300-font`	`#ffffff`	`#ffffff`
`$grey-white`	`#ffffff`	`#fff`
`$grey-black`	`#000000`	`#000`
`$grey-50`	`#fafafa`	`#fafafa`
`$grey-100`	`#f5f5f5`	`#f5f5f5`
`$grey-200`	`#eeeeee`	`#eee`
`$grey-300`	`#e0e0e0`	`#e0e0e0`
`$grey-400`	`#bdbdbd`	`#bdbdbd`
`$grey-500`	`#9e9e9e`	`#9e9e9e`
`$grey-600`	`#757575`	`#757575`
`$grey-700`	`#616161`	`#616161`
`$grey-800`	`#424242`	`#424242`
`$grey-900`	`#212121`	`#212121`
`$grey-dark`	`#303030`	`#303030`
`$grey-light-font`	`#000000`	`#000`
`$grey-dark-font`	`#ffffff`	`#fff`
`$base-font`	`#000000`	`#000`
`$error-font`	`#f44336`	`#f44336`

Syncfusion Blazor Microsoft Office Fabric Theme

Name	Value (Default Theme)	Value (Dark Theme)
`$theme-primary`	`#0078d7`	`#0074cc`
`$theme-dark-alt`	`darken($theme-primary, 3%)`	`006bbd`
`$theme-dark`	`darken($theme-primary, 10%)`	`0063ad`
`$theme-darker`	`darken($theme-primary, 18%)`	`005799`
`$theme-secondary`	`lighten($theme-primary, 3%)`	`007ddb`
`$theme-tertiary`	`lighten($theme-primary, 21%)`	`38a9ff`
`$theme-light`	`lighten($theme-primary, 44%)`	`addcff`
`$theme-lighter`	`lighten($theme-primary, 49%)`	`c7e7ff`
`$theme-lighter-alt`	`lighten($theme-primary, 55%)`	`e6f4ff`
`$neutral-white`	`#ffffff`	`#201f1f`
`$neutral-lighter-alt`	`#f8f8f8`	`#282727`
`$neutral-lighter`	`#f4f4f4`	`#333232`
`$neutral-light`	`#eaeaea`	`#414040`
`$neutral-quintenaryalt`	`#dadada`	`#4a4848`
`$neutral-quintenary`	`#d0d0d0`	`#514f4f`
`$neutral-tertiary-alt`	`#c8c8c8`	`#6f6c6c`
`$neutral-tertiary`	`#a6a6a6`	`#9a9a9a`
`$neutral-secondary-alt`	`#767676`	`#c8c8c8`
`$neutral-secondary`	`#666666`	`#dadada`
`$neutral-primary`	`#333333`	`#fff`
`$neutral-dark`	`#212121`	`#f4f4f4`
`$neutral-black`	`#000000`	`#f8f8f8`
`$alert-bg`	`#deecf9`	`#bf7500`
`$error-bg`	`#fde7e9`	`#cd2a19`
`$success-bg`	`#dff6dd`	`#37844d`
`$theme-dark-font`	`#ffffff`	`#fff`
`$theme-primary-font`	`#ffffff`	`#fff`
`$theme-light-font`	`#333333`	`#000`
`$neutral-light-font`	`#333333`	`#dadada`
`$neutral-light-fontalt`	`#000000`	`#fff`
`$grey-dark-font`	`#ffffff`	`#000`
`$base-font`	`#333333`	`#dadada`
`$message-font`	`#333333`	`#fff`
`$alert-font`	`#d83b01`	`#ff9d48`
`$error-font`	`#a80000`	`#ff5f5f`
`$success-font`	`#107c10`	`#8eff8d`

Syncfusion Blazor High Contrast Theme

Name	Value
`$selection-bg`	`#ffd939`
`$selection-font`	`#000000`
`$selection-border`	`#ffd939`
`$hover-bg`	`#685708`
`$hover-font`	`#ffffff`
`$hover-border`	`#ffffff`
`$border-default`	`#969696`
`$border-alt`	`#757575`
`$border-fg`	`#ffffff`
`$border-fg-alt`	`#ffd939`
`$bg-base-0`	`#000000`
`$bg-base-5`	`#0d0d0d`
`$bg-base-10`	`#1a1a1a`
`$bg-base-15`	`#262626`
`$bg-base-20`	`#333333`
`$bg-base-75`	`#bfbfbf`
`$bg-base-100`	`#ffffff`
`$header-font`	`#ffd939`
`$header-font-alt`	`#ffffff`
`$content-font`	`#ffffff`
`$content-font-alt`	`#969696`
`$link`	`#8a8aff`
`$invert-font`	`#000000`
`$success-bg`	`#166600`
`$error-bg`	`#b30900`
`$message-font`	`#ffffff`
`$alert-bg`	`#944000`
`$info-bg`	`#0056b3`
`$success-alt`	`#2bc700`
`$error-alt`	`#ff6161`
`$alert-alt`	`#ff7d1a`
`$info-alt`	`#66b0ff`
`$disable`	`#757575`

Syncfusion Blazor Tailwind CSS Theme

Name	Value (Default Theme)	Value (Dark Theme)
`$black`	`#000`	`#000`
`$white`	`#fff`	`#fff`
`$cool-gray-50`	`#f9fafb`	`#f9fafb`
`$cool-gray-100`	`#f3f4f6`	`#f3f4f6`
`$cool-gray-200`	`#e5e7eb`	`#e5e7eb`
`$cool-gray-300`	`#d1d5db`	`#d1d5db`
`$cool-gray-400`	`#9ca3af`	`#9ca3af`
`$cool-gray-500`	`#6b7280`	`#6b7280`
`$cool-gray-600`	`#4b5563`	`#4b5563`
`$cool-gray-700`	`#374151`	`#374151`
`$cool-gray-800`	`#1f2937`	`#1f2937`
`$cool-gray-900`	`#111827`	`#111827`
`$red-50`	`#fef2f2`	`#fef2f2`
`$red-100`	`#fee2e2`	`#fee2e2`
`$red-200`	`#fecaca`	`#fecaca`
`$red-300`	`#fca5a5`	`#fca5a5`
`$red-400`	`#f87171`	`#f87171`
`$red-500`	`#ef4444`	`#ef4444`
`$red-600`	`#dc2626`	`#dc2626`
`$red-700`	`#b91c1c`	`#b91c1c`
`$red-800`	`#991b1b`	`#991b1b`
`$red-900`	`#7f1d1d`	`#7f1d1d`
`$green-50`	`#f0fdf4`	`#f0fdf4`
`$green-100`	`#dcfce7`	`#dcfce7`
`$green-200`	`#bbf7d0`	`#bbf7d0`
`$green-300`	`#86efac`	`#86efac`
`$green-500`	`#22c55e`	`#22c55e`
`$green-600`	`#16a34a`	`#16a34a`
`$green-700`	`#15803d`	`#15803d`
`$green-800`	`#166534`	`#166534`
`$green-900`	`#14532d`	`#14532d`
`$orange-50`	`#fff7ed`	`#fff7ed`
`$orange-100`	`#ffedd5`	`#ffedd5`
`$orange-200`	`#fed7aa`	`#fed7aa`
`$orange-300`	`#fdba74`	`#fdba74`
`$orange-400`	`#fb923c`	`#fb923c`
`$orange-500`	`#f97316`	`#f97316`
`$orange-600`	`#ea580c`	`#ea580c`
`$orange-700`	`#c2410c`	`#c2410c`
`$orange-800`	`#9a3412`	`#9a3412`
`$orange-900`	`#7c2d12`	`#7c2d12`
`$cyan-50`	`#ecfeff`	`#ecfeff`
`$cyan-100`	`#cffafe`	`#cffafe`
`$cyan-200`	`#a5f3fc`	`#a5f3fc`
`$cyan-300`	`#67e8f9`	`#67e8f9`
`$cyan-400`	`#22d3ee`	`#22d3ee`
`$cyan-500`	`#06b6d4`	`#06b6d4`
`$cyan-600`	`#0891b2`	`#0891b2`
`$cyan-700`	`#0e7490`	`#0e7490`
`$cyan-800`	`#155e75`	`#155e75`
`$cyan-900`	`#164e63`	`#164e63`
`$indigo-50`	`#eef2ff`	`#eef2ff`
`$indigo-100`	`#e0e7ff`	`#e0e7ff`
`$indigo-200`	`#c7d2fe`	`#c7d2fe`
`$indigo-300`	`#a5b4fc`	`#a5b4fc`
`$indigo-400`	`#818cf8`	`#818cf8`
`$indigo-500`	`#6366f1`	`#6366f1`
`$indigo-600`	`#4f46e5`	`#4f46e5`
`$indigo-700`	`#4338ca`	`#4338ca`
`$indigo-800`	`#3730a3`	`#3730a3`
`$indigo-900`	`#312e81`	`#312e81`