Compatibility of WinBox with Dark Theme in bs4Dash

[noamanemobidata]

Hi!

I'm using bs4Dash with the dark theme. Is there any way to make WinBox reactive to the theme?

Thanks!

[pvictor]

Hello, To achieve this you'll have to add some CSS to your application :

.wb-body { background: #f4f6f9; }
.dark-mode .wb-body { background: #454d55; }

Here's a full example:

library(shiny)
library(shinyWidgets)
library(bs4Dash)

ui <- dashboardPage(
  dashboardHeader(title = "Basic dashboard"),
  dashboardSidebar(),
  dashboardBody(

    ##### Winbox part ##### 
    html_dependency_winbox(),
    tags$style(
      ".wb-body { background: #f4f6f9; }",
      ".dark-mode .wb-body { background: #454d55; }"
    ),
    actionButton(inputId = "show", label = "Show WinBox"),
    ##### ##### ##### ##### 

    # Boxes need to be put in a row (or column)
    fluidRow(
      box(plotOutput("plot1", height = 250)),

      box(
        title = "Controls",
        sliderInput("slider", "Number of observations:", 1, 100, 50)
      )
    )
  )
)

server <- function(input, output) {
  set.seed(122)
  histdata <- rnorm(500)

  output$plot1 <- renderPlot({
    data <- histdata[seq_len(input$slider)]
    hist(data)
  })

  ##### Winbox part ##### 
  observeEvent(input$show, {
    WinBox(
      title = "WinBox window",
      ui = tagList(
        tags$h2("Hello from WinBox!"),
        "Text content of winbox.",
        selectInput("month", "Select a month:", month.name)
      )
    )
  })
  ##### ##### ##### ##### 
}

shinyApp(ui, server)

Victor