> For the complete documentation index, see [llms.txt](https://docs.trydrupal.com/radix/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.trydrupal.com/radix/understanding-radix/bootswatch.md).

# Bootswatch

Easy Bootswatch integration

[Bootswatch](https://bootswatch.com/) 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:

<figure><img src="https://3145538899-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkYrkbpfd5B1QSwDB3tzq%2Fuploads%2FjXlnMdOs9Jn2UOkeF2oo%2F23905.png?alt=media&amp;token=4fbfdb30-d281-43d1-b156-5c9c9c8aaa53" alt=""><figcaption><p>Downloading Bootswatch variables</p></figcaption></figure>

2. Paste the content into your own theme `_variables.scss` .
3. Download the `_bootswatch.scss` , place it in `src/scss` and then import it into your `main.style.scss`

{% hint style="info" %}
**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.](https://getbootstrap.com/docs/5.3/getting-started/introduction/)
{% endhint %}