How to Customize Syncfusion Blazor Themes in Visual Studio for Mac?

4 mins read

1. Install the Syncfusion Blazor Themes NPM package using the following command.

npm install @syncfusion/blazor-themes

2. Create an SCSS file in the Static Web Assets folder (e.g., ~/wwwroot/css/custom-themes/custom.scss). Then, define the theme variables to override and import the theme as shown below. In the following code, the primary theme variable color is changed for all Syncfusion Blazor Components.

custom.scss

$primary: green !default; //Primary Color
/* @import'./node_modules/@syncfusion/blazor-themes/SCSS-Themes/<Theme name>.scss';*/

@import './node_modules/@syncfusion/blazor-themes/SCSS-Themes/bootstrap5.scss

3. Then, install gulp, sass, and gulp-sass, and write a gulp task like below to compile custom.scss to custom.css.

gulpfile.js

const gulp = require('gulp');const sass = require('gulp-sass')(require('sass'));

//Style paths
var cssDest = './wwwroot/css/custom-themes/';

gulp.task('sass', function (done) {
    gulp.src('./wwwroot/css/custom-themes/*.scss')
        .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
        .pipe(gulp.dest(cssDest));
    done();
});

4. After following the above steps, run the following command in the terminal to generate customized CSS. It is important to note that you have installed gulp-cli globally before running a gulp task, since it provides the command-line tools to run a gulp task.

 gulp sass

5. Then, add the compiled CSS file to the <head> element of the Host page.

<head>
    ...
    ...
   <link href="css/custom-themes/custom-bootstrap5.css" rel="stylesheet" /> </head>

6. Run the application to see the customized bootstrap5 theme applied.

As Web Compiler 2022+ is not compatible with Visual Studio 2022 for Mac, the requirement has been achieved using a gulp task. For more details, please refer to this GitHub thread.

Did you find this information helpful?

Yes

Comments (0)

How to Customize Syncfusion Blazor Themes in Visual Studio for Mac?

Access denied