Bootswatch Theme in Shiny Flexdashboard R

Bootswatch theme in Shiny Flexdashboard R

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

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

Rmarkdown Interactive documents Bootswatch theme colour incorrect

Adding the following JS chunk solves the problem:

```{js}
$('.navbar-inverse').removeClass('navbar-inverse').addClass('navbar-
default');
```

Related Topics