Dark Mode issue with DataTable when using fixed header

[FreyGeospatial]

Issue when activating darkmode and scrolling down the page, where header remains white and text is unreadable:

if (interactive()) {
  library(shiny)
  library(DT)
  library(bs4Dash)
  
  # width dataframe as input
  shinyApp(
    ui = dashboardPage(
      
      header = dashboardHeader(), 
      sidebar = dashboardSidebar(),
      body = dashboardBody(
        
        fluidRow(column(12, DT::dataTableOutput('mytable')))
      ), 
      footer = dashboardFooter()
    ),
    server = function(input, output) {
      output$mytable <- DT::renderDataTable(iris,
                                            extensions = "FixedHeader",
                                            style="bootstrap", 
                                            options = list(
                                              dom = 't',
                                              lengthMenu = c(100),
                                              pageLength = 100,
                                              scrollX=TRUE,
                                              autoWidth = TRUE,
                                              paging=TRUE,
                                              searching=TRUE,
                                              ordering=TRUE,
                                              fixedHeader = TRUE
                                            ))
    }
  )
}
  

[chikao0817]

Hi,

I used renderUI to editing ccs, and initComplete to set datatable for dark mode. example like it

datatable dark mode text color in ui.R uiOutput('datatable_darkcontrol') datatable dark mode text color in server.R

  output$'datatable_darkcontrol' = renderUI({
    if(input$'dark_mode'){
      return(
        tags$style(HTML(".dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing,.dataTables_wrapper .dataTables_paginate .paginate_button, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
            color: #D8D5E1 !important;
        }"))
      )
    }else{
      return(
        tags$style(HTML(".dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing,.dataTables_wrapper .dataTables_paginate .paginate_button, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
            color: #000000 !important;
        }"))
      ) 
    }
  })

datatable header backgrond-color

output$'count_table' = renderDT({
    counttable = counttable()
      DT = datatable(counttable, options = list(pageLength = 15))
      #dark theme
      if(input$'dark_mode'){
        DT = datatable(counttable, options = list(pageLength = 15, 
                                                initComplete = JS(
                                                   "function(settings, json) {",
                                                   "$(this.api().table().header()).css({'background-color': '#000', 'color': '#fff'});",
                                                   "}"))) %>% 
          formatStyle(columns = colnames(counttable),backgroundColor = "#282828",color = "#fff",target = 'row')
      }
      DT
  })

But now I use reactable packages in shiny, it's more friendly for dark-mode, and has some advantage :)

[FreyGeospatial]

Thanks for this... this is a helpful workaround. Will check out reactable as well. Maybe that's more along the lines of what I need...

[jam1245]

Thanks for the workaround above! Very helpful when using datatable with a dark theme.

[hj1982]

This problem in my app was fixed using the useAutoColor function @DivadNojnarg. https://rinterface.github.io/bs4Dash/reference/useAutoColor.html

[hj1982]

This problem in my app was fixed using the useAutoColor function @DivadNojnarg. https://rinterface.github.io/bs4Dash/reference/useAutoColor.html

I however see that the accents runs back to being "primary" with this solution.