为什么 Slate Bootswatch 4 主题的颜色显示不正确？

Question

为什么“Slate”主题的颜色显示错误？

---
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

Bootswatch为此提供的信息确实具有误导性。（这不是包；它是原始的 Bootswatch 文件。）

编织文件中的 washed-out 颜色是实际分配给警报的颜色； check them out live here.

那么如何才能得到既不难看又不褪色的颜色呢？（因为，呃。）

您可以使用版本 5，但这会将“关闭”X 推到左侧。（我个人更喜欢 V4 布局。）
您可以使用警报背景颜色。

对于 V5，只需将 YAML 中的 4 更改为 5。

对于背景？

您将使用 bg-warning 而不是 class alert-warning。您可以保留 alert-dismissable 和 alert。这是下面这一点的唯一变化。（在你的问题中使用 YAML。）

```{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>

现在的样子：

为什么 Slate Bootswatch 4 主题的颜色显示不正确？

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

r

bootstrap-4

r-markdown

bootswatch

bslib