When implementing accordions in {bslib}, is there a way to change the color of the accordion icon (V) depending on whether the accordion is open or collapsed?

[Shelmith-Kariuki]

Hi,

In the app below, the accordion icons (V) are constantly gray. We want them to match the color of the title text. How can we do this?

library(shiny)
library(bslib)

mod_acc_UI <- function(id) {
  ns <- NS(id)
  tagList(
    accordion(
      open = "accordion_3",
      id = ns("main_accordion"),
      ## Accordion 1
      accordion_panel(
        title = "Accordion 1",
        value = "accordion_1"
      ),
      ## Accordion 2
      accordion_panel(
        title = "Accordion 2",
        value = "accordion_2"
      ),
      ## Accordion 3 is a parent accordion that contains 3 nested accordions
      accordion_panel(
        title = "Accordion 3",
        value = "accordion_3",
       class = "p-0",
        accordion(
          id = ns("accordion3_with_nested_accordions"),
          class = "accordion-flush",
          open = FALSE,
          accordion_panel(
            title = "Nested accordion 1",
            value = "nested_accordion_1"
          ),
          accordion_panel(
            title = "Nested accordion 2",
            value = "nested_accordion_2"
          ),
          accordion_panel(
            title = "Nested accordion 3",
            value = "nested_accordion_3"
          )
        )
      )
    )
  )
}

mod_acc_Server <- function(id) {
  moduleServer(
    id,
    function(input, output, session) {
      ns <- session$ns
    }
  )
}


app_ui <- fluidPage(
  tags$head(
    tags$style(
      HTML("
/* Parent accordions */

/* Accordions should have a green background with white text when collapsed*/
.accordion-button.collapsed {
  color: white;
  background-color: green;
}

/*Accordions should have white background with green text when not collapsed*/
.accordion-button:not(.collapsed) {
  color: green;
  background-color: white;
}

/* Nested accordions */

/* Indent titles of nested accordions */
.accordion .accordion .accordion-button {
  padding-inline-start: 2rem;
}

/* Accordions should have a maroon background with white text when collapsed*/
.accordion .accordion .accordion-button.collapsed {
  color: white;
  background-color: maroon;
}

/* Accordions should have white background with maroon text when not collapsed*/
.accordion .accordion .accordion-button:not(.collapsed) {
  color: maroon;
  background-color: white;
}
     ")
    )
  ),
  theme = bs_theme(version = 5),
  mod_acc_UI("test")
)

app_server <- function(input, output, session) {
  mod_acc_Server("test")
}

shinyApp(
  ui = app_ui,
  server = app_server
)

[gadenbuie]

It's possible but it's certainly not easy. Bootstrap uses an inline SVG in a CSS variable (--bs-accordion-btn-icon), and the color is customizable via Sass variables. So you'd have to write some custom Sass code to apply in these cases to get the exact look you want.

Here's the Bootstrap reference: https://getbootstrap.com/docs/5.3/components/accordion/#css

And bslib's Theming article can also provide some help.

[Shelmith-Kariuki]

Hi @gadenbuie ,

Thanks a lot. I'll go through the resources and see if we can hack it.