如何调整适配superhero主题的Shiny应用DT表格主题

以下是我的示例代码：

library(shiny)
library(dplyr)
library(tidyr)
library(ggplot2)
library(gridExtra)
library(shinythemes)
mean_data <- data.frame(
  Name = c(paste0("Group_", LETTERS[1:20])),
  matx <- matrix(sample(1:1000, 1000, replace = T), nrow = 20)
)
names(mean_data)[-1] <- c(paste0("Gene_", 1:50))

sd_data <- data.frame(
  Name = c(paste0("Group_", LETTERS[1:20])),
  matx <- matrix(runif(1000, 5, 10), nrow = 20)
)
names(sd_data)[-1] <- c(paste0("Gene_", 1:50))


###
ui <- fluidPage(
  theme = shinytheme("superhero"),
  pageWithSidebar(
    headerPanel("123"),
    sidebarPanel(
      selectInput(
        "selectGeneSymbol",
        "123:",
        choices = colnames(mean_data)[-1],
        multiple =F,
        width = 400,
        selected = 1
      ),
      
      actionButton(inputId = "plot1", label = "FPKM"),
      bsTooltip(id = "plot1", title = "Please be patient as this calculation process takes some time.", placement = "right", trigger = "hover"),
      actionButton(inputId = "dataTable", label = "dataTable",width=100,class = "btn btn-primary"), 
),
      tags$h6(tags$a(href="https://www.ncbi.nlm.nih.gov/", "link",target = "_top"))
    ),
    mainPanel(
      plotOutput("plot"),
      #uiOutput("all")
      tags$style(HTML("
                    .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
                    color: #ffffff;
                    }
### ADD THIS HERE ###
                    .dataTables_wrapper .dataTables_paginate .paginate_button{box-sizing:border-box;display:inline-block;min-width:1.5em;padding:0.5em 1em;margin-left:2px;text-align:center;text-decoration:none !important;cursor:pointer;*cursor:hand;color:#ffffff !important;border:1px solid transparent;border-radius:2px}

###To change text and background color of the `Select` box ###
                    .dataTables_length select {
                           color: #0E334A;
                           background-color: #0E334A
                           }

###To change text and background color of the `Search` box ###
                    .dataTables_filter input {
                            color: #0E334A;
                            background-color: #0E334A
                           }

                    thead {
                    color: #ffffff;
                    }

                     tbody {
                    color: #000000;
                    }

                   "
      )),
      dataTableOutput('dataTable')
      
    )
  )
  


server <- function(input, output, session) {
  
  ## put sd into mean_data
  plotdata <- eventReactive(input$plot1, { 
    df <- mean_data %>% mutate(sd = sd_data[,input$selectGeneSymbol])
  })
  
  p1 <- eventReactive(input$plot1, {
    ggplot(data = plotdata(), aes(x = Name, y = .data[[input$selectGeneSymbol]], fill=Name,
                                  ymin = .data[[input$selectGeneSymbol]] - sd, ymax = .data[[input$selectGeneSymbol]] + sd )) +
      geom_bar(stat = "identity", position = position_dodge(0.9), width = 0.9) +
      # geom_errorbar(aes(ymin = plotdata()[,input$selectGeneSymbol] - sddata()[,input$selectGeneSymbol], ymax = plotdata()[,input$selectGeneSymbol] + sddata()[,input$selectGeneSymbol]), width = .2, position = position_dodge(0.9)) +
      geom_errorbar(width = .2, position = position_dodge(0.9)) +
      theme_classic2() +
      rotate_x_text(angle = 45) +
      theme(legend.position = "none") +
      labs(title = input$selectGeneSymbol, x = NULL, y = "123_value")
  })
  
  output$plot <- renderPlot({
    p1()
  })
  output$dataTable <- DT::renderDataTable({mean_data})
  
}

# Create Shiny app ----
shinyApp(ui = ui, server = server)

我在应用中使用了shinythemes提供的superhero主题，但输出的表格与当前Shiny整体主题适配度不佳。
输出效果参考：

本次仅需调整表格主题，无需修改其他细节。
我已经在代码中添加了部分表格样式相关的CSS代码，但仍不清楚如何正确完成表格主题的适配调整。

两种方案均仅调整表格相关逻辑，不改动其他原有代码：

• 方案1：使用DT内置深色主题（最简方案）
  直接修改output$dataTable的渲染代码，无需自定义CSS：

  output$dataTable <- DT::renderDataTable({
    DT::datatable(mean_data, class = "table table-dark")
  })
  

  该参数会自动适配深色背景下的文字、控件颜色，你之前写的自定义CSS可以全部删除。
• 方案2：修正原有自定义CSS（适合需要自定义样式的场景）
  你原有CSS存在颜色不匹配、缺少表体背景设置的问题，直接替换tags$style内的CSS代码即可：

  /* 表格容器所有控件文字默认白色 */
  .dataTables_wrapper .dataTables_length, 
  .dataTables_wrapper .dataTables_filter, 
  .dataTables_wrapper .dataTables_info, 
  .dataTables_wrapper .dataTables_processing, 
  .dataTables_wrapper .dataTables_paginate, 
  .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    color: #ffffff;
  }
  /* 分页按钮样式 */
  .dataTables_wrapper .dataTables_paginate .paginate_button{
    box-sizing: border-box;
    display: inline-block;
    min-width: 1.5em;
    padding: 0.5em 1em;
    margin-left: 2px;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    color: #ffffff !important;
    border: 1px solid transparent;
    border-radius: 2px;
  }
  /* 下拉、搜索控件样式，匹配superhero主题色 */
  .dataTables_length select,
  .dataTables_filter input {
    color: #ffffff;
    background-color: #2b3e50;
    border: 1px solid #4e5d6c;
  }
  /* 表头样式 */
  thead {
    color: #ffffff;
    background-color: #2b3e50;
  }
  /* 表体样式，层级区分 */
  tbody {
    color: #ffffff;
    background-color: #35495e;
  }
  /* 行悬停效果 */
  tbody tr:hover {
    background-color: #4e5d6c !important;
  }
  

内容的提问来源于stack exchange，提问作者Charité Learner