jhipster and bootstrap template : how to change the theme

Question

Is it easily possible to change and apply a new bootstrap theme/template (like this one for example : https://elements.envato.com/admin-io-GG5ENR) to my Jhipster Angular 5 web app?

Is there a procedure to follow?

Thank you

Answer 1

I managed to change themes by editing the file from darkly (commented out) to lumen:

src\main\webapp\content\scss\vendor.scss

/***************************
put Sass variables here:
eg $input-color: red;
****************************/
// @import '~bootswatch/dist/darkly/variables';
@import '~bootswatch/dist/lumen/variables';
// Override Bootstrap variables
@import 'bootstrap-variables';
// Import Bootstrap source files from node_modules
@import '~bootstrap/scss/bootstrap';
// @import '~bootswatch/dist/darkly/bootswatch';
@import '~bootswatch/dist/lumen/bootswatch';

/* jhipster-needle-scss-add-vendor JHipster will add new css style */

Then I ran the command:

npm run webpack:build

The changes were hot reloaded.