R Shiny change color of text elements above and below the table

Question

I have a simple Shiny app that displays the uploaded file as a table. The code works fine, it's just that I would like to the change the color of the text in the screenshots below to white or something that stands out against a black background image.

How can I do that?

Maybe I can use javascript to fix this but I am not familiar with JS nad its implementation in Shiny .

Code:

    ui =   navbarPage(
                      tags$style("table, .table {color: unset;} .dataTable th, .datatables input {color: white}"),
                  title = div("Projects"),
                  theme = shinytheme("cyborg"),
                  #setBackgroundImage(src="Title.background.jpg", shinydashboard = TRUE),
                  tabPanel("GIS Projects",
                           icon = icon("info"),
                           div(p(h1("Instructions:"),style="text-align: justify;")),
                           p("1. The user can upload a CSV file.", style="color:white"),
                           p("2. Based on the uploaded file, the app will return an interactive table that is searchable.", style="color:white"),
                           p("3. Based on the uploaded file, the app will allow the user to add their project details in new rows or delete existing ones.", style="color:white"),
                           uiOutput("all"),
                  sidebarLayout(
                    sidebarPanel(
                      radioButtons(
                        "File_Type",
                        label = "Choose File type",
                        choices = list(".csv/txt" = 1, ".xlsx" = 2),
                        selected = 1,
                        inline = TRUE
                      ),
                      
                      fileInput('file2', 'Upload Your Data',
                                accept = c(
                                  'text/csv',
                                  'text/comma-separated-values,text/plain',
                                  '.csv',
                                  '.xlsx'
                                ))),
                    mainPanel(
                      downloadButton("download1","Download data as csv"),                
                      DTOutput("contents")),)
                    )
)

# Define server logic required to draw a histogram
server <- function(input, output) {

  myData = reactive({
    req(input$file2)
    inFile = input$file2
    if (is.null(inFile)) return(NULL)
    data = read.csv(inFile$datapath, header = TRUE)
    data
  })
  
  output$contents = renderDT({
    
    req(myData())
    myData()  
    
  })
  
}

# Run the application 
shinyApp(ui = ui, server = server)

Screenshots:

Update:

New output based on the answer:

This only changed the page numbers to white and also changed the other text except column headers to grey and table background to black (which I want as default white since the app background gif is sort of black ). I also want to change show entries and Search: to white as well. The text for the table rows would be black as the original/default table has a white background. Moreover, the text entered in the search bar would be black as well since it has a white background.

Answer 1

Add style = "bootstrap" to renderDT

  output$contents  = renderDT({
    req(myData())
    datatable(myData(),style = "bootstrap")
  })