Why do the colors of the Slate Bootswatch 4 theme appear wrong?

Question

Why do the colors of the "Slate" theme appear wrong?

---
title: "test"
output:
  html_document:
    self_contained: false
    theme: 
      version: 4
      bootswatch: slate
    toc: yes
    toc_depth: 3
    toc_float:
      collapsed: true
---


```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = FALSE)
```

## R Markdown

<div class="alert alert-dismissible alert-warning">
  <button type="button" class="close" data-dismiss="alert">&times;</button>
  <h4 class="alert-heading">Warning!</h4>
  <p class="mb-0">Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, <a href="#" class="alert-link">vel scelerisque nisl consectetur et</a>.</p>
</div>

<div class="alert alert-dismissible alert-danger">
  <button type="button" class="close" data-dismiss="alert">&times;</button>
  <strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
</div>

<div class="alert alert-dismissible alert-success">
  <button type="button" class="close" data-dismiss="alert">&times;</button>
  <strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a>.
</div>

<div class="alert alert-dismissible alert-info">
  <button type="button" class="close" data-dismiss="alert">&times;</button>
  <strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.
</div>

Answer 1

The information that Bootswatch provided for this is really misleading. (It's not the package; it's the original Bootswatch files.)

The washed-out colors in your knitted file are the colors actually assigned to alerts; check them out live here.

So how do you get the colors that aren't ugly and washed out? (Because, ew.)

• You could use version 5, but that pushes the "close" X to the left side. (I prefer the V4 layout, personally.)
• You could use the alert background colors.

For V5, just change the 4 to 5 in the YAML.

For the backgrounds?

Instead of the class alert-warning, you'll use bg-warning. You can keep alert-dismissable and alert. That's the only change in this bit below. (Using the YAML in your question.)

```{r setup2, include=FALSE}
knitr::opts_chunk$set(echo = FALSE)
```

## R Markdown

<div class="alert alert-dismissible bg-warning">
  <button type="button" class="close" data-dismiss="alert">&times;</button>
  <h4 class="alert-heading">Warning!</h4>
  <p class="mb-0">Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, <a href="#" class="alert-link">vel scelerisque nisl consectetur et</a>.</p>
</div>

<div class="alert alert-dismissible bg-danger">
  <button type="button" class="close" data-dismiss="alert">&times;</button>
  <strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
</div>

<div class="alert alert-dismissible bg-success">
  <button type="button" class="close" data-dismiss="alert">&times;</button>
  <strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a>.
</div>

<div class="alert alert-dismissible bg-info">
  <button type="button" class="close" data-dismiss="alert">&times;</button>
  <strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.
</div>

How it looks now: