切换暗黑模式时如何更新RShiny中rhandsontable的CSS样式？

rhandsontable组件拥有独立的CSS样式规则，不会自动继承bslib的Bootswatch主题样式，因此直接通过bs_add_variables无法修改其样式。以下是两种可行的解决方法：

方法1：动态注入自定义CSS样式 #

通过renderUI结合tags$style，根据当前模式动态生成针对handsontable的CSS规则，覆盖默认样式：

library(shiny)
library(rhandsontable)
library(bslib)
library(shinyWidgets)

data <- data.frame(x=1:10,y=11:20,z=21:30,a=1:10*1000000,b=11:20*1000000,c=21:30*1000000)

if (interactive()) {
  shinyApp(
    ui = navbarPage(
      title = 'app', theme = bs_theme(version=5, bootswatch="default"), position = 'static-top', fluid = TRUE,
      
      tabPanel(
        'Demo',
        fluidRow(
          materialSwitch(
            inputId = "mode",
            label = icon("moon"),
            right=TRUE,
            status = "success"
          ),
          style='position: right; padding: 5px;'
        ),
        uiOutput("hot_style"),
        rHandsontableOutput('table')
      )
    ),
    
    server = function(input, output, session) {
      observe(session$setCurrentTheme(
        if(isTRUE(input$mode)) { bs_theme(bootswatch = "darkly") }
        else { bs_theme(bootswatch = "default") }
      ))
      
      output$hot_style <- renderUI({
        if(isTRUE(input$mode)) {
          tags$style(HTML("
            .handsontable .htCore {
              background-color: #212529;
              color: #f8f9fa;
            }
            .handsontable th, .handsontable td {
              border-color: #495057;
            }
            .handsontable .htInvalid {
              background-color: #343a40;
            }
          "))
        } else {
          tags$style(HTML("
            .handsontable .htCore {
              background-color: #ffffff;
              color: #212529;
            }
            .handsontable th, .handsontable td {
              border-color: #dee2e6;
            }
          "))
        }
      })
      
      output$table <- renderRHandsontable({
        rhandsontable(data, stretchH='all')
      })
    }
  )
}

方法2：通过rhandsontable自身API设置样式 #

利用hot_table和hot_cols函数，根据模式直接指定表格的背景、文字颜色等样式：

server = function(input, output, session) {
  observe(session$setCurrentTheme(
    if(isTRUE(input$mode)) { bs_theme(bootswatch = "darkly") }
    else { bs_theme(bootswatch = "default") }
  ))
  
  output$table <- renderRHandsontable({
    if(isTRUE(input$mode)) {
      rhandsontable(data, stretchH='all') %>%
        hot_table(backgroundColor = "#212529", color = "#f8f9fa") %>%
        hot_cols(borderColor = "#495057")
    } else {
      rhandsontable(data, stretchH='all') %>%
        hot_table(backgroundColor = "#ffffff", color = "#212529") %>%
        hot_cols(borderColor = "#dee2e6")
    }
  })
}

注意事项 #

• 方法1的CSS样式优先级更高，能覆盖更多handsontable细节样式（如表头、选中状态）
• 方法2更贴合rhandsontable原生API，适合仅需修改基础样式的场景
• 可根据Darkly主题的实际色值调整颜色代码，确保与整体主题统一

内容的提问来源于stack exchange，提问作者currently_working