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

Activity

1. glin commented on Dec 10, 2022

   

   glin

   on Dec 10, 2022

   Last edited by glin

   Owner

   More actions

   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")
             )
           )
       })
     }
   )

   ❤️React with ❤️1Reacted by BilboBaagins
2. glin

   added

   enhancementNew feature or requestNew feature or request

   on Dec 10, 2022