Hi Martin,
We would like to inform you that the following UG is
outdated, so please follow the Solution 1 and 2 for customizing the default themes: https://blazor.syncfusion.com/documentation/common/how-to/customize-font-size-and-color.
Solution #1:
The Blazor Themes NPM package contains SCSS files
for all themes supported by Syncfusion Blazor components. So, you can import bootstrap5.scss file in order to recreate the entire
bootstrap5.css file as found in the NuGet package.
Please refer to our NPM package reference UG for
instructions on how to customize the
default themes:
https://blazor.syncfusion.com/documentation/appearance/themes#npm-package-reference
For example in your case, you can customize bootstrap5.scss and then add reference to
the bootstrap5.css in _Host.cshtml of your project.
In the following code, the primary theme variable color
is changed in bootstrap5.scss.
For all components:
custom.scss
|
$primary:#666699!default;
/* @import 'blazor-themes/SCSS-Themes/<Theme name>.scss';
*/
@import
'blazor-themes/SCSS-Themes/bootstrap5.scss';
|
For the Calendar (individual) component:
custom.scss
|
$primary:#666699!default;
/* @import 'blazor-themes/SCSS-Themes/<Package
name>/<Control name>/<Theme name>.scss'; */
@import'blazor-themes/SCSS-Themes/calendars/calendar/bootstrap5.scss';
|
Then, you can compile the custom.scss file using a web
compiler, as we have explained in our UG.
Solution #2:
You can utilize our Theme Studio tool to modify the
default appearance of all our built-in themes.
Please find the UG of Theme Studio for more information: https://blazor.syncfusion.com/documentation/appearance/theme-studio
Regards,
Bharat Ram H
