Shiny Flexdashboard R 中的 Bootswatch 主题

Question

我从 bootswatch (https://bootswatch.com) 下载了一个 css，并将文件 (bootstrap.css) 保存在我的 flexdashboard 文件所在的位置。所以我尝试用这段代码加载css：

---
title: "Untitled"
output: 
  flexdashboard::flex_dashboard:
    orientation: columns
    vertical_layout: fill
    css: bootstrap.css
---

```{r setup, include=FALSE}
library(flexdashboard)
```

Column {data-width=650}
-----------------------------------------------------------------------

### Chart A

```{r}

```

但是 css 没有加载。我想使用 Bootswatch 的“Mint”主题。请问，你知道这个问题的解决方案吗？提供的任何帮助将不胜感激。

Answer 1

我下载了Minty theme from Bootswatch。

我的第一个观察是 :root css 不是 RStudio/flexdashboard 识别的格式：missing R_BRACE 由于此:root 部分主要定义颜色名称，因此我将其删除，因为颜色在其#HEX 代码直接定义的其他部分中。在此之后，css 文件似乎有效，只有警告。

然后我将这个 css 文件与 default flexdashboard css files 进行了比较。
例如：theme-bootstrap.css

我看到的主要区别是flexdashboard 使用了您在bootstrap.css 中找不到的自定义标签，因为它针对的是HTML 格式，而不是专门针对flexdashboard 格式。

flexdashboard 特定标签的示例：
-.section.sidebar
-.value-box
-.chart-title
-...

这就是您看不到任何变化的原因：css 文件已正确加载，但遗憾的是其大部分 HTML 标记不适用于 flexdashboard。

如css styles 中所述，flexdashboard 的导航栏对其每个主题都使用navbar-inverse 类，因此如果您想创建自己的主题，则必须对其进行修改。

要检查这一点，请创建一个非常简单的style.css：

.navbar-inverse {
  background-color: #fd7e14;
  border-color: #1967be;
}

.chart-title {
    font-size: 50px;
    color: #fd7e14;
}

现在您可以在以下 Markdown 文件中使用此自定义 css：

---
title: "Test"
output: 
  flexdashboard::flex_dashboard:
    css: style.css
---

Column {data-width=650}
-----------------------------------------------------------------------

### My Gauge

`r flexdashboard::gauge(15, min = 0, max = 50, href="#details")`

Answer 2

同时，您可以使用theme: yaml 标头或其他类似的flexdashboard themes，例如yeti、journal、spacelab

---
title: "Untitled"
output: 
  flexdashboard::flex_dashboard:
    orientation: columns
    vertical_layout: fill
    theme: lumen
---

```{r setup, include=FALSE}
library(flexdashboard)
```

Column {data-width=650}
-----------------------------------------------------------------------

### Chart A

```{r}

```

它为您提供了一些预设主题，然后您可以微调 .css。但是我遇到了同样的问题，我在同一个目录中有.css，但是没有添加样式，我们一定做错了，但是主题至少可以让您在平均时间。