Bootswatch

Easy Bootswatch integration

Bootswatch is an easy-to-implement Bootstrap theme configurator, you can easily select one of the predefined sets and start from there, to do so all you need is to update your _variables.scss file and add the _bootswatch.scss to your code.

1. Go to the Bootswatch website, find what theme style you'd like the most, and click on the chevron next to the download as shown below:

Downloading Bootswatch variables

1. Paste the content into your own theme _variables.scss .

2. Download the _bootswatch.scss , place it in src/scss and then import it into your main.style.scss

Note: The Bootswatch SCSS will set theme colors and generate corresponding Bootstrap utilities, but it will not change anything that's missing a required utility class.

An example of this is the navbar background. Bootswatch previews use .bg-* utility classes and data-bs-theme="dark" to achieve the navbar variations. Replicating this requires modifying your theme's template files accordingly.

For more information, see the Bootstrap documentation on navbars, color modes, and utility classes.