Change the color tone of a shinytheme

Question

Friends, is it possible to change the color tone of a shinytheme used? In my case I am using "united" which uses orange and gray. However I would like to make a slightly darker orange, is it possible to make this change? If so, can you please help me? The executable code is below.

library(shinyBS)
library(shiny)
library(shinyjs) 

ui <- fluidPage(
  navbarPage(theme = shinytheme("united"), collapsible = TRUE,
  titlePanel("Old Faithful Geyser Data"),

  sidebarLayout(
    sidebarPanel( 
      radioButtons("filter1", h3("Select properties"),
                   choices = list("All properties" = 1, 
                                  "Exclude properties" = 2),
                   selected = 1),
      title= "Select Proprierties",
      radioButtons("filter2", h3("Select farms"),
                   choices = list("All farms" = 1, 
                                  "Exclude farms" = 2),
                   selected = 1),
      sliderInput("bins",
                  "Number of bins:",
                  min = 1,
                  max = 20,
                  value = 30),
      ## need to include at least one bs element, adapt
      bsTooltip("bins", "The wait times will be broken into this many equally spaced bins",
                "right", options = list(container = "body")) 

    ),

    mainPanel(
      plotOutput("distPlot")
    )
  )
))

## use JS to add an id attribute to the elements where you want to add the popover
add_id_js <- paste0(
  "$('#filter1').find('.radio > label').attr('id', function(i) {",
  "return 'filter1_row_' + i})")

server <- function(input, output, session) {
  ## once the UI is loaded, call JS function and attach popover to it
  session$onFlushed(function() {
    runjs(add_id_js)
    addPopover(session, "filter1_row_0", "My Popover", "Content")

  })


  output$distPlot <- renderPlot({
    # generate bins based on input$bins from ui.R
    x    <- faithful[, 2]
    bins <- seq(min(x), max(x), length.out = input$bins + 1)

    # draw the histogram with the specified number of bins
    hist(x, breaks = bins, col = 'darkgray', border = 'white')
  })
}

# Run the application 
shinyApp(ui = ui, server = server)

Thank you very much friends!!

Answer 1

I know that it is a quite old question, but since there is no answer and I had the same problem, I wanted to add the solution that I found.

When I was trying to do the same for ShinyDashboard, I found this post. However, taking a look of what the fresh package can do, I found the way to solve your problem using navBarPage.

You just have to add this to your code:

# This is to create your own theme. Depending on your needs, you can remove or keep some options.

mytheme <- create_theme(
  theme = "default",
  bs_vars_navbar(
    default_bg = "#75b8d1",
    default_color = "#FFFFFF",
    default_link_color = "#FFFFFF",
    default_link_active_color = "#75b8d1",
    default_link_active_bg = "#FFFFFF",
    default_link_hover_color = "firebrick"
  ),
  output_file = NULL
)

navbarPage(
  title = "Custom navbar",
  header = tagList(
    use_theme(mytheme) # <-- use your theme
  ),
  tabPanel("Tab 1"),
  tabPanel("Tab 2")
)

Just a note that when I load your code I get this warnings:

Warning messages: 1: In sliderInput(): value should be less than or equal to max (value = 30, max = 20). 2: Navigation containers expect a collection of bslib::nav()/shiny::tabPanel()s and/or bslib::nav_menu()/shiny::navbarMenu()s. Consider using header or footer if you wish to place content above (or below) every panel's contents.

So, in order to try the code that I added you, I fixed them.

library(shinyBS)
library(shiny)
library(shinyjs) 
library(fresh)

# This is to modify the header background color. It uses fresh package.
mytheme <- create_theme(
  adminlte_color(
    light_blue = "#9d6708"
  )
)

mytheme <- create_theme(
  theme = "default",
  bs_vars_navbar(
    default_bg = "#9d6708",
  ),
  output_file = NULL
)


ui <- fluidPage(
  navbarPage( 
       title = "Old Faithful Geyser Data",
       
       collapsible = TRUE,
       header = tagList(
         use_theme(mytheme) # <-- use your theme
       ),
       
       tabPanel(
         
         title = "Tab 1", 
             sidebarLayout(
               sidebarPanel( 
                 
                 radioButtons("filter1", h3("Select properties"),
                              choices = list("All properties" = 1, 
                                             "Exclude properties" = 2),
                              selected = 1),
                 title= "Select Proprierties",
                 radioButtons("filter2", h3("Select farms"),
                              choices = list("All farms" = 1, 
                                             "Exclude farms" = 2),
                              selected = 1),
                 sliderInput("bins",
                             "Number of bins:",
                             min = 1,
                             max = 30,
                             value = 20),
                 ## need to include at least one bs element, adapt
                 bsTooltip("bins", "The wait times will be broken into this many equally spaced bins",
                           "right", options = list(container = "body")) 
                 
               ),
               
               mainPanel(
                 plotOutput("distPlot")
               )
             )
        ))
)

## use JS to add an id attribute to the elements where you want to add the popover
add_id_js <- paste0(
  "$('#filter1').find('.radio > label').attr('id', function(i) {",
  "return 'filter1_row_' + i})")

server <- function(input, output, session) {
  ## once the UI is loaded, call JS function and attach popover to it
  session$onFlushed(function() {
    runjs(add_id_js)
    addPopover(session, "filter1_row_0", "My Popover", "Content")
    
  })
  
  
  output$distPlot <- renderPlot({
    # generate bins based on input$bins from ui.R
    x    <- faithful[, 2]
    bins <- seq(min(x), max(x), length.out = input$bins + 1)
    
    # draw the histogram with the specified number of bins
    hist(x, breaks = bins, col = 'darkgray', border = 'white')
  })
}

# Run the application 
shinyApp(ui = ui, server = server)

I don't know what type of orange you wanted, but I changed to this tone #9d6708 just to show you the difference.

Here you have more info if you want to check about the fresh package and using NavbarPage.