Change color of a Shiny theme

Could you help me change the color of the "flatly" theme or maybe help me adjust it to green color? I insert the "flatly" theme just as an example! I would like to change the color of that top part (image attached).

I believe the CSS needs to be tweaked, but I don't know how to handle it very well, so any help is welcome. I put the default glossy app as a reproducible example.

Thank you very much!

library(shiny)
library(shinythemes)
                 
                        
ui <- shiny::navbarPage(theme = shinytheme("flatly"),collapsable = TRUE,
                        
                        
                        titlePanel(""),
                        
                        
                        sidebarLayout(
                          sidebarPanel(
                            sliderInput("bins",
                                        "Number of bins:",
                                        min = 1,
                                        max = 50,
                                        value = 30)
                          ),
                          
                          
                          mainPanel(
                            plotOutput("distPlot")
                          )
                        )
)


server <- function(input, output) {
  
  output$distPlot <- renderPlot({
    
    x    <- faithful[, 2]
    bins <- seq(min(x), max(x), length.out = input$bins + 1)
    
    
    hist(x, breaks = bins, col = 'darkgray', border = 'white')
  })
}


shinyApp(ui = ui, server = server)

You could add this CSS in this section:

ui <- shiny::navbarPage(theme = shinytheme("flatly"), collapsible = TRUE,
                        
                        # add this
                        tags$head(tags$style(HTML('.navbar-static-top {background-color: green;}',
                                                  '.navbar-default .navbar-nav>.active>a {background-color: green;}'))),
                        
                        
                        titlePanel(""),

2 Likes

To theme a Shiny app, also check out the bslib package. From the docs: " The bslib R package provides tools for customizing Bootstrap themes directly from R, making it much easier to customize the appearance of Shiny apps & R Markdown documents."

2 Likes

Thank you so much @williaml !

Thanks @maelle! I was unaware of this package. I will check!

1 Like

@maelle, I saw that this package is new, right? Do you happen to have a concrete example that you can show me or maybe use this package for the executable code I inserted above. Thanks again!

1 Like

Using the example from the link that @maelle provided and your initial code:

library(bslib)


ui <- navbarPage(
  theme = bs_theme(
    bg = "#101010", 
    fg = "#FDF7F7", 
    primary = "#ED79F9", 
    base_font = font_google("Prompt"),
    code_font = font_google("JetBrains Mono")
  ),
  titlePanel(""),

Another option is fresh:

1 Like

Interesting discussion
Would there be a way to convert to Bootstrap 5?

@pathos I haven't really used it but supposedly bslib works with Bootstrap 5.

2 Likes

Yes it is new, there was a short talk about it at the rstudio::global conference and other than that I'd refer to the documentation website (I use bslib but not in Shiny myself).

The support for Bootstrap 5 is at the moment only in the development version of bslib cf its changelog.

2 Likes

(noting that the talk also presents thematic for theming of plots :slightly_smiling_face: )

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.

If you have a query related to it or one of the replies, start a new topic and refer back with a link.