Is there a way to override the white background of the input dragula panels that the boxes reside within?

[AdrianAntico]

I've tried everything to get around the default white background and it looks like the only way is to change it up is to modify the source file that defines it as such. For apps with colored themes, the white can be an eye sore in some cases, particularly with night theme designs.

If you remove (or comment out like I did) the "background-color: white; " at the bottom of the make_bg_svg() function users can then apply their own css for coloring those boxes as such:

.box-dad {
  background-color: #3cbed3;
}

#' @importFrom jsonlite base64_enc
#' @importFrom htmltools doRenderTags tag
make_bg_svg <- function(text) {
  svg <- tag("svg", list(
    xmlns = "http://www.w3.org/2000/svg",
    version = "1.1",
    tag("text", list(
      x = "100%",
      y = "20",
      opacity = "0.15",
      fill = "E6E6E6",
      "font-weight" = "bold",
      "font-family" = "Helvetica, Arial, sans-serif",
      "font-size" = "20",
      "text-anchor" = "end",
      transform = "translate(-2,0)",
      text
    ))
  ))
  svg <- doRenderTags(svg)
  svg <- base64_enc(svg)
  svg <- gsub(x = svg, pattern = "\n", replacement = "")
  svg <- sprintf(
    "background-image:url(\"data:image/svg+xml;base64,%s\");",
    svg
  )
  paste0(
    svg,
    # background-color:white;
    "background-repeat:no-repeat; background-position:right bottom;")
}

[pvictor]

Hello, You can override the background color using boxStyle = argument, here's an example :

library(shiny)
library(esquisse)

ui <- fluidPage(
  theme = bslib::bs_theme(version = 5L, bg = "#0A0A2A", fg = "#FFF"),
  tags$h2("Demo dragulaInput"),
  tags$br(),
  fluidRow(
    column(
      width = 6,

      dragulaInput(
        inputId = "dad1",
        label = "Default:",
        sourceLabel = "Source",
        targetsLabels = c("Target 1", "Target 2"),
        choiceNames = lapply(
          X = month.abb,
          FUN = function(x) {
            tags$span(class = "badge text-bg-dark", x)
          }
        ),
        choiceValues = month.abb,
        boxStyle = "background-color: #131332 !important; border: 1px solid #53536A !important;",
        width = "100%"
      ),
      verbatimTextOutput(outputId = "result1"),

      tags$br(),

      dragulaInput(
        inputId = "dad3",
        label = "On same row:",
        sourceLabel = "Source",
        targetsLabels = c("Target 1", "Target 2"),
        choices = month.abb,
        width = "100%",
        ncolSource = 1,
        ncolGrid = 3
      ),
      verbatimTextOutput(outputId = "result3")
    )
  )
)

server <- function(input, output, session) {

  output$result1 <- renderPrint(str(input$dad1))

  output$result3 <- renderPrint(str(input$dad3))

}

shinyApp(ui = ui, server = server)

Which gives :

[AdrianAntico]

@pvictor thanks for the update. Is there a way to modify via css or do I have to supply the values to the dragulaInput() call?

[pvictor]

Yes can use CSS classes : .box-dad and .container-drag-source, using something like :

tags$style(
  ".box-dad, .container-drag-source {background-color: #131332 !important; border: 1px solid #53536A !important;}"
)

But I've noticed that you can't change color of the text inside the box currently, it'll need that I add an argument to the function.

[AdrianAntico]

@pvictor thanks for the update!!