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

Question

I'm creating a shiny app using a dark theme (slate in shinythemes). But when I apply that theme, there are two issues with my renderDataTable output:

1. The app background is too dark to see the elements outside the table (Showing XX entries, page numbers at the bottom, etc.)
2. The text in the table is too light to read well.

For issue #2, I've tried options within the renderDataTable arena, like formatStyle() , as well as css options like list(tags$head(tags$style("shipment.table span {color: #333333 ; background: #999999;}"))) but I'm not having any luck with them. I'm new to shiny, DT, and css, which may have something to do with it... Examples of what I've tried are commented out in the code below.

For issue #1, I'm totally stuck. I don't know what those external-to-the-table elements are called, so I'm not having any luck finding things to try!

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)

If you run the app, you'll see a dropdown box with '10' in the top left, but there should be text before and after the box so it says 'Showing 10 entries'. There's also a 1 in the bottom right, but there should be several other pages visible (they are, just in dark text on a dark background). Similarly, the table text is light grey on a lighter grey/white background, which is hard to read. Thanks for any help!

Answer 1

amrrs has an excellent answer but it still did not address your other question of changing the colors of the page numbers.. you can do this with adding

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)

Answer 2

You can add inline css in the code to control this behaviour.

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)