Feature request: Integrate reactable with bslib’s input_dark_mode() for theme toggling

[alearrigo]

When using bslib’s input_dark_mode() toggle in a page_navbar, I expected my reactable tables to automatically switch between light and dark themes. Currently, the tables remain in the original theme, and there is no built-in integration or documentation that shows how to hook into the dark-mode toggle.

library(shiny)
library(bslib)
library(reactable)
library(dplyr)

# Sample data for the table
movies_data <- tibble(
  Title    = c("The Shawshank Redemption", "The Godfather", "The Dark Knight", "Pulp Fiction", "Fight Club"),
  Year     = c(1994, 1972, 2008, 1994, 1999),
  Rating   = c(9.3,  9.2,  9.0,  8.9,  8.8),
  Director = c("Frank Darabont", "Francis Ford Coppola", "Christopher Nolan", "Quentin Tarantino", "David Fincher"),
  Genre    = c("Drama", "Crime, Drama", "Action, Crime, Drama", "Crime, Drama", "Drama")
)

ui <- page_navbar(
  title = "Simple Dashboard",
  theme = bs_theme(version = 5, preset = "lux"),

  # Dark mode toggle in the navbar
  nav_item(input_dark_mode(mode = "light")),

  # Main page content
  nav_panel(
    title = "Dashboard",
    layout_column_wrap(
      width = "100%",
      card(
        card_header("Top Movies"),
        reactableOutput("movies_table")
      )
    )
  )
)

server <- function(input, output, session) {
  output$movies_table <- renderReactable({
    reactable(
      movies_data,
      filterable = TRUE,
      searchable  = TRUE,
      striped     = TRUE,
      highlight   = TRUE,
      bordered    = TRUE
    )
  })
}

shinyApp(ui, server)

Expected behavior:

When I click the “dark mode” toggle, the reactable table’s colors (background, text, borders, stripes, etc.) should automatically update to match the selected bslib theme (light or dark).

Actual behavior:

The table remains styled according to its initial theme and does not respond to the dark-mode toggle.

Questions / Proposal:

1. Is there an existing way to hook reactable into bslib’s theme switching (e.g. a documented integration)?
2. If not, would you consider adding optional support for input_dark_mode()—perhaps by accepting a theme argument in reactable() that can be linked to the current bslib theme?
3. Are there examples or best-practice patterns for making reactable tables fully themable with bslib?

[glin]

Yes, at some point we'll get back to #96 and add the native integration. For now, it should be possible to manually hook up the Bootstrap styling to a reactable table's CSS easily enough using reactableTheme() - see https://glin.github.io/reactable/articles/examples.html#theming for general reactableTheme() usage.

Most of the table already inherits whatever CSS is defined above it, and I think the table background color is probably the only major setting that's explicitly set in reactable, and needs to be overridden.

So for a basic working example, you can set the table background color to the current Bootstrap color using Bootstrap's CSS variables, and dark mode toggles should just work. There may be other minor styling properties to translate over, so if you can try to add anything missing to reactableTheme().

Here's a minimal bslib dashboard example with a custom theme and dark mode:

library(shiny)
library(bslib)
library(reactable)

ui <- page_navbar(
  title = "Dashboard",
  sidebar = "Sidebar",
  nav_panel(
    "Table",
    card(
      reactable(
        mtcars,
        theme = reactableTheme(
          backgroundColor = "var(--bs-body-bg)"
        )
      )
    )
  ),
  nav_spacer(),
  nav_item(
    input_dark_mode()
  ),
  theme = bs_theme(
    fg = "#101010",
    bg = "#FFF",
    primary = "#E69F00",
    secondary = "#0072B2",
    success = "#009E73",
    base_font = font_google("Inter")
  )
)

shinyApp(ui, function(input, output) {})

[alearrigo]

Thanks!