Shinydashboard and shinytheme?

Question

I've made a dashboard with shinydashboard and really like the ease of making a layout with the package! However, I'd like to use one of the themes from the shinythemes package. I'm familiar with the shinydashboard skins, but they aren't nearly as cool or modern as shinythemes. The shinythemes seem to work well with just shiny, but not with shinydashboard.

Anyone know how to get shinythemes to work with shinydashboard?

Thanks very much!

ie: start of dashboard: doesn't work:

 ui <- dashboardPage( theme = shinytheme("spacelab"),
 dashboardHeader(title = "I want this to look awesome!"),
 dashboardSidebar(sidebarMenu(

Answer 1

There is a package (dashboardthemes) that allows modifying shinydashboard themes. It is pretty straightforward to use.

One of the available skins:

Alternatively, if you want to try some new skins go for semantic.dashboard which offers Bootswatch and Semantic-UI themes.

Answer 2

Unfortunately, shinydashboard isn't capable of switching to additional Bootstrap-based themes the way you're trying to do above.

If you need to apply custom .css within your app, I would do something like the following:

  dashboardBody(
    useShinyjs(),
    tags$head(
      tags$link(rel = "stylesheet", type = "text/css", href = "css/custom.css"),
      tags$link(rel = 'stylesheet', href = '//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css')
    ),
    # Source add'l UI elements:
    tabItems(
      source('ui/charts.R', local = TRUE)[['value']],  # source: https://groups.google.com/forum/#!topic/shiny-discuss/kRBT8EmNsJg
      source('ui/help.R', local = TRUE)[['value']]
    )
  )

Where custom.css (or similar) is where you have your overridden UI elements defined.

Answer 3

If it's just the color scheme that you're trying to change, reference this post:

How to change color in shiny dashboard?

You can also change the font in the headers section, and link it back to a google font:

 tags$head(tags$style(HTML("@import url('https://fonts.googleapis.com/css?family=News+Cycle');


                        h1 {
                            font-family:'News Cycle',sans-serif;
                            font-size: 48px;
                            font-weight: 1000;
                            line-height: 1.1;
                            color: 'slategrey';
                        }")))