如何更改 shiny app dataTableOutput 字体颜色和辅助 table 元素颜色？

Question

我正在使用深色主题（闪亮主题中的石板）创建闪亮的应用程序。但是当我应用那个主题时，我的 renderDataTable 输出有两个问题：

应用程序背景太暗，无法看到 table 之外的元素（显示 XX 条目、底部页码等）
table 中的文字太浅，难以阅读。

对于问题 #2，我尝试了 renderDataTable 领域中的选项，例如 formatStyle()，以及 css 选项，例如 list(tags$head(tags$style("shipment.table span {color: #333333 ; background: #999999;}")))，但我没有任何运气跟他们。我是 shiny、DT 和 css 的新手，这可能与它有关......我尝试过的示例在下面的代码中被注释掉了。

对于问题 #1，我完全卡住了。我不知道那些外部的 table 元素叫什么，所以我找不到可以尝试的东西！

library(shiny)
library(shinythemes)
library(DT)

d=as.data.frame(cbind(1:100,201:300))

ui<-fluidPage(
    theme = shinytheme("slate"),

    mainPanel(
        DT::dataTableOutput('shipment.table')
        #list(tags$head(tags$style("shipment.table span {color: #333333 ; background: #999999;}")))   
        #tags$head(tags$style("#shipment.table table {color: red;}"))
  )  
)


server<-function(input, output,session) {

output$shipment.table <- renderDataTable(d,filter = 'bottom',
       options = list(lengthMenu = list(c(10,20,50,100,-1), c('10','20','50','100','All')),
       pageLength = 10,autoWidth = TRUE),rownames=F) #%>% formatStyle(1,color="black")
}


shinyApp(ui=ui,server=server)

如果您运行该应用程序，您会在左上角看到一个带有“10”的下拉框，但该框前后应该有文本，因此显示 'Showing 10 entries'。右下角也有一个 1，但应该还有其他几个页面可见（它们是，只是深色背景上的深色文本）。同样，table 文本在较浅的 grey/white 背景上呈浅灰色，难以阅读。感谢您的帮助！

Answer 1

您可以在代码中添加内联 css 来控制此行为。

library(shiny)
library(shinythemes)
library(DT)

d=as.data.frame(cbind(1:100,201:300))

ui<-fluidPage(
  theme = shinytheme("slate"),



  mainPanel(

    ### add your style inline css values here

    tags$style(HTML("
                    .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate {
                    color: #ffffff;
                    }

                    thead {
                    color: #ffffff;
                    }

                     tbody {
                    color: #000000;
                    }

                   "


                    ))
  ),
    DT::dataTableOutput('shipment.table')
    #list(tags$head(tags$style("shipment.table span {color: #333333 ; background: #999999;}")))   
    #tags$head(tags$style("#shipment.table table {color: red;}"))
  )  



server<-function(input, output,session) {

  output$shipment.table <- renderDataTable(d,filter = 'bottom',
                                           options = list(lengthMenu = list(c(10,20,50,100,-1), c('10','20','50','100','All')),
                                                          pageLength = 10,autoWidth = TRUE),rownames=F) #%>% formatStyle(1,color="black")
}


shinyApp(ui=ui,server=server)

Answer 2

amrrs 有一个很好的答案，但它仍然没有解决您关于更改页码颜色的其他问题。您可以通过添加

来做到这一点

library(shiny)
library(shinythemes)
library(DT)

d=as.data.frame(cbind(1:100,201:300))

ui<-fluidPage(
  theme = shinytheme("slate"),



  mainPanel(

    ### add your style inline css values here

    ### added a line of code here too `.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover `###
    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;
                    }

                   "


                    ))
  ),
    DT::dataTableOutput('shipment.table')
    #list(tags$head(tags$style("shipment.table span {color: #333333 ; background: #999999;}")))   
    #tags$head(tags$style("#shipment.table table {color: red;}"))
  )  



server<-function(input, output,session) {

  output$shipment.table <- renderDataTable(d,filter = 'bottom',
                                           options = list(lengthMenu = list(c(10,20,50,100,-1), c('10','20','50','100','All')),
                                                          pageLength = 10,autoWidth = TRUE),rownames=F) #%>% formatStyle(1,color="black")
}


shinyApp(ui=ui,server=server)

如何更改 shiny app dataTableOutput 字体颜色和辅助 table 元素颜色？

How to change shiny app dataTableOutput font color and auxiliary table element color?

r

shiny

dt