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:

  1. Bootstrap 4
  2. Bootstrap
  3. Google’s Material
  4. Microsoft Office’s Fabric
  5. High Contrast
  6. 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.

Copied to clipboard
<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.

Copied to clipboard
<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.

Copied to clipboard
<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 #fff
$gray-100 #f8f9fa #f8f9fa
$gray-200 #e9ecef #e9ecef
$gray-300 #dee2e6 #dee2e6
$gray-400 #ced4da #ced4da
$gray-500 #adb5bd #adb5bd
$gray-600 #6c757d #6c757d
$gray-700 #495057 #495057
$gray-800 #343a40 #343a40
$gray-900 #212529 #212529
$black #000 #000
$blue #007bff #007bff
$indigo #6610f2 #6610f2
$purple #6f42c1 #6f42c1
$pink #e83e8c #e83e8c
red #dc3545 #dc3545
$orange #fd7e14 #fd7e14
$yellow #ffc107 #ffc107
$green #28a745 #28a745
$teal #20c997 #20c997
$cyan #17a2b8 #17a2b8

Syncfusion Blazor Bootstrap Theme

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

Syncfusion Blazor Material Theme

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

Syncfusion Blazor Microsoft Office Fabric Theme

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

Syncfusion Blazor High Contrast Theme

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

Syncfusion Blazor Tailwind CSS Theme

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