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

同时，您可以使用 theme: yaml header 或其他类似的 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，但是没有添加样式，我们一定是做错了什么，但是主题至少可以让你使用一些同时使用不同的颜色。

Answer 2

我下载了 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 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")`

Shiny Flexdashboard R 中的 Bootswatch 主题

Bootswatch theme in Shiny Flexdashboard R

css

r

r-markdown

shiny

flexdashboard