trying to get a dark theme to work with datatables (DT) package in a shiny application. I've tried shinytheme("cyborg")
and also downloading the cyborg CSS sheet from Bootswatch, (for call in datatables, style="bootstrap"
) but it doesn't seem to work when I use shinytheme. I need shinytheme for the rest of the app, since the css thows off all of the plots and spacing etc. Is there a dark CSS I could use in place of shinythemes which would work with plotly and datatables?
library(shiny)
library(shinythemes)
library(DT)
ui<- fluidPage(theme = shinytheme("cyborg"),
fluidRow(column(7, DTOutput("showdata")))
)
server<-function(input, output) {
output$showdata<- DT::renderDT({
datatable(iris, rownames=F, filter="top", extensions = "Scroller", width = "100%", style="bootstrap",
options = list(deferRender = TRUE, scrollY = 300,scrollX=FALSE, scroller = TRUE, dom = 'tp'),
selection ='single' ) %>%
formatStyle(columns=colnames(iris),
backgroundColor = '#282828', color = "white")
})
}
shinyApp(ui=ui, server=server)
dark table screenshot note that the main issue is the filter text does not appear (maybe it is white because of shinytheme)
You can make the text visible if you set the font color to black. Just include some
CSS
in the header like:div.dataTables_scrollHead span {color: black;}
Example UI:
Output: