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). Define the theme variables you want to override and import the base theme as shown below. In the following code, the primary theme color variable 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. Next, install gulp, sass, and gulp-sass, and write a gulp task as 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 the customized CSS. Make sure you have installed gulp-cli globally before running a gulp task, as it provides the command-line tool.

 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