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

我从 Bootswatch 下载了 Minty 主题。

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

然后我将这个css文件与默认的 flexdashboard css 文件进行了比较。
例如： 主题-bootstrap.css

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

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

这就是您看不到任何变化的原因： css文件已正确加载，但不幸的是，它的大多数 HTML 标签不适用于flexdashboard 。

正如css styles中解释的那样，flexdashboard 的导航栏使用navbar-inverse class 为其每个主题，所以如果你想修改这个，你有自己的主题

要检查这一点，请创建一个非常简单的样式。 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 header 或其他类似的 flexdashboard 主题，如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，但是没有添加样式，我们一定做错了，但是主题至少可以让您在与此同时。