Installing and Chooosing a Theme with Bootswatch

on terminal, add bootswatch yarn add bootswatch

choose a thene on Bootswatch

Edit the src/main/webapp/content/scss/vendor.scss. The order is important.

// Override Boostrap variables
@import "bootstrap-variables";
// add bootwatch module after variables
\!h @import 'node_modules/bootswatch/dist/materia/variables';

// Import Bootstrap source files from node_modules
@import 'node_modules/bootstrap/scss/bootstrap';
// import the theme after bootstrap
\!h @import "node_modules/bootswatch/dist/{themeName}/bootswatch";

Customizing Further

• to customize further, override Bootstrap variables in src/main/webapp/content/scss/_bootstrap-variables.scss
• the list of supported variables can be found on node_modules/bootstrap/scss/_variables.scss