Override DT default selection color when using bslib

Question

The question is very similar to R DT override default selection color, parts of the code is used, but on top of that i want to use https://github.com/rstudio/bslib for styling.

I want to override the default color when selecting a row in a DT-table and fail for hours.

Here is some code to use

library(shiny)
library(DT)

library(bslib)

color_sel <-"#7cfc00" 

ui <- fluidPage(
  theme = bslib::bs_theme(version = 4,
                          bootswatch = "flatly",
                        #  bootswatch = NULL,
                          primary = '#00488E',
                          secondary = '#4AB9FA',
                          success = "#4AB9FA",
                          info = "#4AB9FA"
  ) %>% 
  bs_add_variables(
    "body-bg" = "#EEEEEE",
    "font-family-base" = "monospace",
    "table_active_bg" = color_sel
  )
  ,
#  tags$style(HTML(paste0("table.dataTable tbody tr.selected td, table.dataTable td.selected{background-color: ", color_sel," !important;}"))),
  fluidRow(dataTableOutput("tbl"))
)
server <- function(input, output){
  output$tbl <- renderDataTable({
    datatable(mtcars)
  })
  
}

app <- shinyApp(ui = ui, server= server)
runApp(app)

As you can see, I tried two places too override the standard blue with nice green, but it doesn't work. bs_add_variables() is working, checked by body-bg and font-family-base. What is wrong?

Answer 1

Actually, a bit more searching lead to this solution. Add this bit of CSS to your app:

table.dataTable tbody tr.active td {
    background: pink !important;
}