Suggestion: make {reactable} interact correctly with {bs4Dash}'s dark-mode

[eastclintw00d]

Please have a look at the following examples:

Example 1: In dark-mode font color changes to white and becomes unreadable because of the white background.

library(shiny)
library(bs4Dash)
library(reactable)

shinyApp(
  ui = dashboardPage(
    header = dashboardHeader(),
    sidebar = dashboardSidebar(),
    body = dashboardBody(
      box(width = 4, reactableOutput("table"))
    ),
    title = "DashboardPage"
  ),
  server = function(input, output) { 
    output$table <- renderReactable({
      data.frame(
        col1 = paste0("col1_", 1:10),
        col2 = paste0("col2_", 1:10),
        col3 = paste0("col3_", 1:10),
        col4 = paste0("col4_", 1:10),
        col5 = paste0("col5_", 1:10),
        col6 = paste0("col6_", 1:10),
        col7 = paste0("col7_", 1:10),
        col8 = paste0("col8_", 1:10),
        col9 = paste0("col9_", 1:10)
      ) |> 
        reactable(
          columns = list(
            col1 = colDef(sticky = "left"),
            col9 = colDef(sticky = "right")
          )
        )
    })
  }
)

Example 2: Setting background to "transparent" solves the dark-mode readability issue but create issues with sticky columns.

library(shiny)
library(bs4Dash)
library(reactable)

shinyApp(
  ui = dashboardPage(
    header = dashboardHeader(),
    sidebar = dashboardSidebar(),
    body = dashboardBody(
      box(width = 4, reactableOutput("table"))
    ),
    title = "DashboardPage"
  ),
  server = function(input, output) { 
    output$table <- renderReactable({
      data.frame(
        col1 = paste0("col1_", 1:10),
        col2 = paste0("col2_", 1:10),
        col3 = paste0("col3_", 1:10),
        col4 = paste0("col4_", 1:10),
        col5 = paste0("col5_", 1:10),
        col6 = paste0("col6_", 1:10),
        col7 = paste0("col7_", 1:10),
        col8 = paste0("col8_", 1:10),
        col9 = paste0("col9_", 1:10)
      ) |> 
        reactable(
          theme = reactableTheme(backgroundColor = "transparent"),
          columns = list(
            col1 = colDef(sticky = "left"),
            col9 = colDef(sticky = "right")
          )
        )
    })
  }
)

As imho the package bs4Dash is becoming popular it would be a nice feature to have a built-in dark-mode functionality.

[glin]

Thanks for the suggestion and those examples. I have to admit, I don't know enough about bs4Dash to provide a good answer on how to do this (and don't have time to research right now), but agree that it would be great to make dynamic dark mode toggles easy to integrate with reactable. Maybe it's time to revisit bslib integration (#96), if bs4Dash does use bslib.

From a quick look at that example app, I do see that bs4Dash sets a top-level .dark-mode class when dark mode is toggled. If that's a publicly documented class, then you could use reactableTheme()'s nested selectors feature to conditionally style the table's text color and background color when dark mode is activated. There's an example of this at Theming - Nested selectors, and here's the example app modified to do the same:

library(shiny)
library(bs4Dash)
library(reactable)

shinyApp(
  ui = dashboardPage(
    header = dashboardHeader(),
    sidebar = dashboardSidebar(),
    body = dashboardBody(
      box(width = 4, reactableOutput("table"))
    ),
    title = "DashboardPage"
  ),
  server = function(input, output) {
    output$table <- renderReactable({
      data.frame(
        col1 = paste0("col1_", 1:10),
        col2 = paste0("col2_", 1:10),
        col3 = paste0("col3_", 1:10),
        col4 = paste0("col4_", 1:10),
        col5 = paste0("col5_", 1:10),
        col6 = paste0("col6_", 1:10),
        col7 = paste0("col7_", 1:10),
        col8 = paste0("col8_", 1:10),
        col9 = paste0("col9_", 1:10)
      ) |>
        reactable(
          theme = reactableTheme(
            # Dark mode theme for bs4Dash
            style = list(
              ".dark-mode &" = list(
                color = "#fff",
                backgroundColor = "#343a40"
              )
            )
          ),
          columns = list(
            col1 = colDef(sticky = "left"),
            col9 = colDef(sticky = "right")
          )
        )
    })
  }
)