Search code examples
cssrshinyr-markdownflexdashboard

Bootswatch theme in Shiny Flexdashboard R

I downloaded a css from bootswatch (https://bootswatch.com) and I saved the file (bootstrap.css) where my flexdashboard file is. So I tried to load the css with this code:

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

```

But the css doesn't load. I would like to use "Mint" theme from Bootswatch. Please, do you know a solution for this issue? Any help provided will be greatly appreciated.

Solution

  • I downloaded the Minty theme from Bootswatch.

    My first observation is that the :root css isn't in a format recognized by RStudio/flexdashboard : missing R_BRACE enter image description here As this :root section mainly defines color names, I removed it because colors are in further sections defined directly by their #HEX code. After this, the css file seems valid, with only warnings.

    Then I compared this css file with the default flexdashboard css files.
    For example : theme-bootstrap.css

    The main difference I saw is that flexdashboard uses custom tags which you don't find in the bootstrap.css because it's aimed at HTML formatting, and not specifically at flexdashboard formatting.

    Examples of flexdashboard specific tags :
    -.section.sidebar
    -.value-box
    -.chart-title
    -...

    This is the reason why you don't see any change : the css file is loaded correctly, but unfortunately most of its HTML tags don't apply to flexdashboard.

    As explained in css styles, the navigation bar for flexdashboard uses the navbar-inverse class for each of its themes, so if you want to create your own Theme, you'll have to modify this.

    To check this, create a very simple style.css:

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

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

    Now you can use this custom css in the following Markdown file:

    ---
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")`

    enter image description here