How to change color in shiny dashboard?

25
votes

(cross post from shiny google groups)

Could some one point me to the tag names that I have to modify the color of a shiny dashboard?

Modified from http://rstudio.github.io/shinydashboard/appearance.html#long-titles this will change the top left corner of my dashboard to orange

tags$head(tags$style(HTML('
        .skin-blue .main-header .logo {
                              background-color: #f4b943;
                              }
                              .skin-blue .main-header .logo:hover {
                              background-color: #f4b943;
                              }
                              ')))

It is unclear to me how to change the rest of the header and sidebar to orange, and how I can change the color when an item on the "SideBarMenu" is selected / highlighted.

4
rshinyshinydashboard

4 Answers

68
votes

Based on the example you posted a link to you can try:

ui.R

dashboardPage(
                dashboardHeader(
                        title = "Example of a long title that needs more space",
                        titleWidth = 450
                ),
                dashboardSidebar( sidebarMenu(
                        menuItem("Dashboard", tabName = "dashboard", icon = icon("dashboard")),
                        menuItem("Widgets", icon = icon("th"), tabName = "widgets",
                                 badgeLabel = "new", badgeColor = "green")
                )),
                dashboardBody(
                        # Also add some custom CSS to make the title background area the same
                        # color as the rest of the header.
                        tags$head(tags$style(HTML('
        /* logo */
        .skin-blue .main-header .logo {
                              background-color: #f4b943;
                              }

        /* logo when hovered */
        .skin-blue .main-header .logo:hover {
                              background-color: #f4b943;
                              }

        /* navbar (rest of the header) */
        .skin-blue .main-header .navbar {
                              background-color: #f4b943;
                              }        

        /* main sidebar */
        .skin-blue .main-sidebar {
                              background-color: #f4b943;
                              }

        /* active selected tab in the sidebarmenu */
        .skin-blue .main-sidebar .sidebar .sidebar-menu .active a{
                              background-color: #ff0000;
                              }

        /* other links in the sidebarmenu */
        .skin-blue .main-sidebar .sidebar .sidebar-menu a{
                              background-color: #00ff00;
                              color: #000000;
                              }

        /* other links in the sidebarmenu when hovered */
         .skin-blue .main-sidebar .sidebar .sidebar-menu a:hover{
                              background-color: #ff69b4;
                              }
        /* toggle button when hovered  */                    
         .skin-blue .main-header .navbar .sidebar-toggle:hover{
                              background-color: #ff69b4;
                              }
                              ')))
                )


)

I commented the CSS to point out what it modifies.

5
votes

Thanks for post. I think you should add "toggle button when hovered" to make it complete. Sample code is below:

/* toggle button when hovered  */                    
.skin-blue .main-header .navbar .sidebar-toggle:hover{
  background-color: #ff69b4;
}
1
votes

Thank you @NicE for the answer. An addition: if someone wants to control the color accent of the left border of the sidebar menu selection, the border-left property works:

            /* active selected tab in the sidebarmenu */
            .skin-blue .main-sidebar .sidebar .sidebar-menu .active a{
                                  background-color: #2e6984;
                                  border-left: 3px solid #254264;
                                  }

            /* other links in the sidebarmenu */
            .skin-blue .main-sidebar .sidebar .sidebar-menu a{
                                  background-color: #3E8CB0;
                                  color: #FFFFFF;
                                  }

            /* other links in the sidebarmenu when hovered */
             .skin-blue .main-sidebar .sidebar .sidebar-menu a:hover{
                                  background-color: #2e6984;
                                  border-left: 3px solid #254264;
                                  }
0
votes

Perhaps this package can help you further:

https://github.com/dreamRs/fresh

It allows to quite nicely set up custom themes and colors without having to deal with CSS definitions yourself - but can create them for repeated use.

Further information may be found here (quite an elaborate book with many more topics!): https://unleash-shiny.rinterface.com/beautify-with-fresh.html