How to select shinydashboard skin dynamically?

Question

I want to reactively select skin of shinydashboard through selectInput.

I have tried the following code, but the dashboard frame disappeared.

library(shiny)

library(shinydashboard)

ui <- uiOutput("ui")

server <- function(input, output, session) {

  shiny.session <- reactiveValues(skin = "blue")

  ui <- function() {
    dashboardPage(dashboardHeader(disable = FALSE),
                  dashboardSidebar(),
                  dashboardBody(),
                  skin = shiny.session$skin)
  }

  output$ui <- renderUI(ui())

}

shinyApp(ui, server)

Hallie Swan Hallie Swan · Accepted Answer · 2019-09-18T00:35:17

The skin is determined by the class of the shinydashboard body: <body class="skin-blue" style="min-height: 611px; height: auto;">.

We can change the class dynamically with a bit of javascript. Here's a small example:

library(shiny)
library(shinydashboard)

js <- "Shiny.addCustomMessageHandler('change_skin', function(skin) {
        document.body.className = skin;
       });"

ui <- function() {
    dashboardPage(dashboardHeader(),
                  dashboardSidebar(),
                  dashboardBody(
                      tags$head(tags$script(js)),
                      selectInput("skin_color", "Skin Color", 
                                  c("blue", "black", "purple", 
                                    "green", "red", "yellow"))
                  ),
                  skin = "blue")
}

server <- function(input, output, session) {
    observeEvent(input$skin_color, {
        session$sendCustomMessage("change_skin", paste0("skin-", input$skin_color))
    })
}

shinyApp(ui, server)

How to select shinydashboard skin dynamically?

1 Answers