How to apply specific bootstrap theme to syncfusion blazor components

Question

Hello,We applied a bootswatch theme ( this one specifically ) in our project, just by overriding the original "bootstrap.css" file by the one downloaded for that theme.The problem now is that the syncfusion controls, are still using the default theme that we used for them, but we would like to apply the same theme ( or at least the colors ) for the syncfusion components too. I have been finding the best and the easiest way to do this, but I'm stucked.The only "solutions" that I saw is to change the theme manually with your Theme Studio, or overriding the colors and variables in a .scss file. However, that's a bit more of work. Is there any way to achieve this easily? Maybe override the syncfusion's theme style by the other one, like we did for the project?Hope you understand what I'm asking. If not please tell me and I will try to explain it better. Thank you

Joshna Lingala Uthama Reddy Lingala · Answer

Hi Paco,Greetings from Syncfusion.We let you know that you can
download the specific themes from the Themestudio to change the colors based on
the organization specific stylesheet and refer the downloaded styles in the
application. You can choose the required theme from the Choose Theme dropdown
and you can change the colors with your required colors from the options just
below the dropdown and can download that theme file with your selected colors
from ThemeStudio.You can refer color variables
list from below linkhttps://blazor.syncfusion.com/documentation/appearance/theme-studio#bootstrap-5-themePlease refer the below link for
ThemeStudiohttps://blazor.syncfusion.com/documentation/appearance/theme-studioWe can customize our Syncfusion
components by applying custom styles for the components inside <style>
tag. However, we have prepared sample for your reference in which the custom
styles are applied for grid column and Calendar components. We have “Styles
and Appearance” under each component in the documentation in which the
customization of components styles is described. For example, please refer the
below link for calendar componenthttps://blazor.syncfusion.com/documentation/calendar/style-appearanceOutput:Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorServerCss-825114267
Kindly try with the above
information and sample and get back to us if you have any queries.Regards,Joshna L

Nicola · Answer

This is the approach I use daily with Syncfusion and Blazor Webassembly (Server is the same).

Set primary and secondary color via Theme Studio for Blazor
Download theme and edit the SCSS file in order to change the font-family (here you need to use the same font family from your theme)
Compile SCSS in CSS and place the min file in a subfolder
Edit index.html and add the styles in the header in the sequence:

bootstrap5 file from Syncfusion Theme and recompiled
Your desired Bootstrap 5 theme
Other styles (like icons)
An overriding style file for other adjustments

In Head of index.html

<link rel='nofollow' href="css/syncfusion/bootstrap5.min.css" rel="stylesheet" />
<link rel='nofollow' href="css/bootstrap5theme/flatly.styles.css" rel="stylesheet" />
<link rel='nofollow' href="css/bootstrap/bootstrap-icons.css" rel="stylesheet" />
<link rel='nofollow' href="css/app.css" rel="stylesheet" />
<link rel='nofollow' href="Client.styles.css" rel="stylesheet" />

If you don't want to recompile SCSS but you need to change the font family, use the app.css to override it.

I prefer to use variable and the themes I use already define the --bs-body-font-family, but in case you need to use another font family the following approach works very weel.

I hope in the future Syncfusion Theme Studio will be able to allow editing this setting from web interface


:root {
  --bs-body-font-family: Nunito, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
}

/* Syncfusion font overriding */
.e-error, .e-grid, .e-control, .e-css,
.e-toolbar .e-tbar-btn, .e-toolbar .e-tbar-btn .e-tbar-btn-text,
input.e-input, textarea.e-input, .e-input-group, .e-input-group.e-control-wrapper,
.e-input-group.e-disabled, .e-input-group.e-control-wrapper.e-disabled,
.e-upload.e-control-wrapper, .e-bigger.e-small .e-upload.e-control-wrapper,
.e-float-input, .e-float-input.e-control-wrapper, .e-float-input.e-disabled, .e-float-input.e-control-wrapper.e-disabled, .e-float-input.e-input-group.e-disabled, .e-float-input.e-input-group.e-control-wrapper.e-disabled,
.e-spinner-pane .e-spinner-inner .e-spin-label,
.e-popup.e-ddl .e-dropdownbase.e-nodata,
.e-dropdownbase .e-list-item,
.e-dropdownbase .e-list-group-item, .e-fixed-head,
.e-multi-column.e-ddl.e-popup.e-popup-open .e-ddl-header,
.e-ddl.e-popup.e-multiselect-group .e-list-group-item,
.e-avatar,
.e-badge,
.e-btn, .e-css.e-btn,
.e-card, .e-card .e-card-actions .e-card-btn, .e-card .e-card-actions a,
.e-checkbox-wrapper .e-label, .e-css.e-checkbox-wrapper .e-label,
.e-tooltip-wrap .e-tip-content,
.e-control-wrapper.e-slider-container .e-scale,
.e-control-wrapper.e-slider-container .e-scale .e-tick .e-tick-value,
.e-contextmenu-wrapper ul.e-ul, .e-contextmenu-container ul.e-ul,
.e-dashboardlayout.e-control .e-panel .e-panel-header,
.e-radio + label .e-label,
.e-switch-wrapper .e-switch-on, .e-switch-wrapper .e-switch-off, .e-css.e-switch-wrapper .e-switch-on, .e-css.e-switch-wrapper .e-switch-off,
.e-listview,
.e-control-wrapper.e-mask .e-maskedtextbox,
.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item .e-tbar-btn-text,
.e-toolbar.e-extended-toolbar .e-toolbar-pop.e-toolbar-extended .e-toolbar-item .e-tbar-btn,
.e-tab .e-tab-header .e-toolbar-item .e-tab-text
.e-tab .e-tab-header.e-vertical .e-hor-nav .e-popup-up-icon::before, .e-tab .e-tab-header.e-vertical .e-hor-nav .e-popup-down-icon::before,
.e-tab-clone-element .e-tab-text,
.e-treeview.e-drag-item,
.e-menu-wrapper .e-menu-header, .e-menu-container .e-menu-header,
.e-multi-select-wrapper input[type='text'],
.e-multiselect.e-filled .e-multi-select-wrapper input[type='text'],
.e-multi-select-wrapper .e-delim-values,
.e-multi-select-list-wrapper .e-selectall-parent .e-all-text,
.e-multi-select-wrapper .e-chips > .e-chipcontent,
.e-listbox-wrapper, .e-listbox-container,
.e-splitter.e-splitter-horizontal .e-pane, .e-splitter.e-splitter-vertical .e-pane,
.e-bigger .e-grid .e-row .e-input-group .e-input.e-field, .e-bigger .e-grid .e-row .e-input-focus .e-input.e-field, .e-grid.e-bigger .e-row .e-input-group .e-input.e-field, .e-grid.e-bigger .e-row .e-input-focus .e-input.e-field,
.e-grid .e-row .e-input-group .e-input.e-field, .e-grid .e-row .e-input-focus .e-input.e-field,
.e-richtexteditor .e-linkheader,
.e-rte-img-dialog.e-dialog.e-device.e-dlg-modal .e-linkheader,
.e-dialog .e-img-uploadwrap .e-droptext,
.e-rte-table-popup .e-rte-popup-header,
.e-inplaceeditor .e-editable-value-wrapper .e-editable-value,
.e-inplaceeditor .e-editable-value-container .e-editable-value,
.e-inplaceeditor-tip.e-tooltip-wrap .e-tip-content .e-editable-title,
.e-pivot-calc-dialog-div .e-treeview ul li .e-list-text,
.e-pivotfieldlist-wrapper .e-adaptive-field-list-dialog .e-member-editor-container ul li .e-list-text, .e-pivotfieldlist-wrapper .e-member-editor-dialog .e-member-editor-container ul li .e-list-text,
.e-pivotfieldlist-wrapper .e-member-editor-dialog .e-select-all-wrapper ul li .e-list-text,
.e-pivotfieldlist-container .e-adaptive-field-list-dialog .e-member-editor-container ul li .e-list-text, .e-pivotfieldlist-container .e-member-editor-dialog .e-member-editor-container ul li .e-list-text,
.e-pivotfieldlist-container .e-member-editor-dialog .e-select-all-container ul li .e-list-text,
.e-button-drag-clone,
.e-pivotfieldlist-wrapper,
.e-pivotfieldlist-wrapper .e-field-list-container .e-field-table .e-field-list ul li .e-list-text,
.e-pivotfieldlist-wrapper.e-rtl .e-field-table .e-field-list ul li .e-list-text,
.e-pivotfieldlist-wrapper.e-device .e-adaptive-container .e-content .e-pivot-calc-outer-div .e-radio-wrapper .e-label,
.e-pivotfieldlist-container,
.e-pivotfieldlist-container .e-field-list-container .e-field-table .e-field-list ul li .e-list-text,
.e-pivotfieldlist-container.e-rtl .e-field-table .e-field-list ul li .e-list-text,
.e-pivotfieldlist-container.e-device .e-adaptive-container .e-content .e-pivot-calc-outer-div .e-radio-wrapper .e-label,
.e-pivotview .e-member-editor-dialog .e-select-all-wrapper ul li .e-list-text, .e-pivotview .e-member-editor-dialog .e-member-editor-container ul li .e-list-text,
.e-pivotview .e-member-editor-dialog .e-select-all-container ul li .e-list-text, .e-pivotview .e-member-editor-dialog .e-member-editor-container ul li .e-list-text,
.e-pivottooltip p,
.e-query-builder .e-summary-text {
    font-family: var(--bs-body-font-family);
}

Hope this help.

Karthigai Selvi Ponmalai · Answer

Hi Nicola,

Thanks for contacting Syncfusion Support.
We will consider this as new feature request and it can be tracked through our
below feedback portal. https://www.syncfusion.com/feedback/34755/to-provide-option-to-customize-font-family-in-our-theme-studioPlease upvote this features to make this our priority.
While this feature itself is important, we will prioritize these feature
requests every release based on the user demands. It’ll be available in any one
of our upcoming releases. If
you have any more specification/suggestions to the feature request, you can add
it as a comment in the portal.

Regards,
Karthigai Selvi P