Changing the look and feel of the application

The good thing about using Bootstrap is that it lets us easily change the look and feel of the application using any available Bootstrap themes. Let's see how we can install a cool theme for our application, then we will also fine tune the styles to fit our needs using Sass variables provided by Bootstrap.

There are hundreds of Bootstrap themes out there. Since we are using Bootstrap 4 it is important to pick a theme that is made for Bootstrap 4.

Bootswatch is a nice collection of themes for Bootstrap; check it out to see all the available themes at: https://bootswatch.com/.

Let's use a Bootswatch theme called materia.

In your terminal, run yarn add bootswatch to install all the themes. Don't worry; we will only import the theme that we want to use so you do not have to worry about installing all themes.

Now let's import this using Sass. Open src/main/webapp/content/scss/vendor.scss and find the line @import 'node_modules/bootstrap/scss/bootstrap'; and add the following code highlighted in bold:

// Override Boostrap variables
@import "bootstrap-variables";
@import 'node_modules/bootswatch/dist/materia/variables';
// Import Bootstrap source files from node_modules
@import 'node_modules/bootstrap/scss/bootstrap';
@import "node_modules/bootswatch/dist/materia/bootswatch";

The name of the theme here is materia, you can use any theme available in Bootswatch here. Make sure that name is in all lowercase. Also, notice the order of imports. It is important that we import the theme variables after importing Bootstrap variables and themes after importing the Bootstrap theme so that SASS variables and styles are overridden properly.

We can customize the theme further by overriding Bootstrap variables defined in src/main/webapp/content/scss/_bootstrap-variables.scss.

You can override any variable supported by Bootstrap. The full list of supported variables can be found in node_modules/bootstrap/scss/_variables.scss.

For example, let's change some colors as follows, in _bootstrap-variables.scss:

$primary: #032b4e;
$success: #1df54f;
$info: #17a2b8;
$warning: #ffc107;
$danger: #fa1a30;

There might be some UI glitches when you apply a new theme, you could solve them by updating the generated SASS files.

For example, add the following CSS to src/main/webapp/content/scss/global.scss to fix the glitch in checkboxes that we got after the theme change:

.form-check-input {
    height: 18px;
    width: 18px;
}

We now have a cool new theme:

Further reference can be found at: https://getbootstrap.com/docs/4.0/getting-started/theming/.

Let's commit this:

> git add --all
> git commit -am "update bootstrap theme using bootswatch"