Search code examples
cssrshinyshinydashboard

Change the title header color permanently in shiny dashboard


I have the shiny dashboard below and I need to change the color of the header that includes the title permanently. Now when I hover over it returns to previous color.

library(DT)
ui <- dashboardPage(
    dashboardHeader(title = "Dynamic sidebar"),
    dashboardSidebar(
        width=400
    ),
    dashboardBody(
        tags$head(tags$style(HTML('

        /* logo */
        .skin-blue .main-header .logo {
                              background-color: #E7FF6E;
                              }'))) 
    )
)

server <- function(input, output) {



}

shinyApp(ui, server)

Solution

  • You can create a custom theme to use with {shinydashboard} with the {fresh} package, more documentation here : https://dreamrs.github.io/fresh/articles/vars-shinydashboard.html

    Here an example to modify header background color:

    library(fresh)
    # Create the theme
    mytheme <- create_theme(
      adminlte_color(
        light_blue = "#E7FF6E"
      )
    )
    
    
    library(shiny)
    library(shinydashboard)
    
    ui <- dashboardPage(
      header = dashboardHeader(title = "My dashboard"),
      sidebar = dashboardSidebar(
        sidebarMenu(
          menuItem("Dashboard", tabName = "dashboard", icon = icon("dashboard")),
          menuItem("Settings", tabName = "settings", icon = icon("sliders"))
        )
      ),
      body = dashboardBody(
    
        use_theme(mytheme) # <-- use the theme
      )
    )
    
    server <- function(input, output, session) {
    
    }
    
    shinyApp(ui, server)