The Syncfusion Blazor components library provides the following list of built-in themes:
The Syncfusion Blazor Bootstrap theme is designed based on
Bootstrap v3
, whereas the Bootstrap 4 theme is designed based onBootstrap v4
.
Syncfusion.Blazor
and Syncfusion.Blazor.Themes
NuGet packages.<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
The Syncfusion Blazor themes also available in the CDN.
<head>
....
....
<link href="https://cdn.syncfusion.com/blazor/18.4.42/styles/bootstrap4.css" rel="stylesheet" />
</head>
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.
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 |
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 |
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 |
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 |
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 |