Change style of shinydashboard box with shinyjs

Question

I am trying to change the color of the shinydashboard boxes according to the tab the user is in. To do so, I am getting the input value from a tabsetPanel, and try to change the css of the box-header class with shinyjs. Unfortunately none of my trials have succeeded. Here is a reproducible example (the color does not adapt to the tab yet but I'll do that in a second part)

library(shiny)
ui <- fluidPage(
  shinyWidgets::useShinydashboard(),
  tabsetPanel(
    id = "mytab",
    tabPanel("First",
             shinydashboard::box(status = "primary",
                                 title = "mybox",
                                 solidHeader = TRUE, collapsible = TRUE,
                                 sliderInput("orders", "Orders", min = 1, max = 2000, value = 650)
                                 )),
  tabPanel("Second", p("Second tab"))))

server <- function(input, output) {
  observeEvent(input$mytab,{
    shinyjs::runjs("$('.box-header').css('background', 'red');")
    shinyjs::runjs("$('.box.box-solid.box-primary > .box-header').attr('style', 'background:red !important');")
  })
}
shinyApp(ui = ui, server = server)

I tried all combinations between the first and the second call to runjs but all of them failed.

Answer 1

https://rstudio.github.io/shinydashboard/appearance.html#css

    ## ui.R ##
dashboardPage(
  dashboardHeader(title = "Custom font"),
  dashboardSidebar(),
  dashboardBody(
    tags$head(
      tags$link(rel = "stylesheet", type = "text/css", href = "custom.css")
    )
  )
)