R shiny tables changing headings and light dark mode switch

Question

I am doing a basic visualisation for Covid-19 and in one of the tabs I have a table. I can't seem to get the writing above and below the table in another colour. I've included an image that highlights the writing that I need changed.

I would also like to build a light and dark mode but I can't find any code that would work in the form I have the app now. My code with these issues is currently as follows

library(dplyr)
library(shiny)
library(shinythemes)

####################### READ CSV #############################
ncov <- read.csv("https://raw.githubusercontent.com/datasets/covid-19/master/data/time-series-19-covid-combined.csv")
ncov = ncov %>% rename(Country = Country.Region)
###########################################################

ui <- fluidPage(
  theme = shinytheme("slate"),
  tags$head(
    tags$style(
      "
@import url('https://fonts.googleapis.com/css?family=Pacifico&display=swap');

h2 {
    font-family: 'Pacifico', cursive;
    font-size: 48px;
    margin-bottom: 25px;
}
ul.nav li a {
    background-color: lightgrey;
}

    #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;
  }


"
    )
  ),
    mainPanel(
      tabsetPanel(type = "tabs",

                  tabPanel(title = "Table", icon = icon("table"),
                           tags$br(),
                           dataTableOutput("table"))
               )
             )
             )

server <- function(input, output) {

  output$table <- DT::renderDT({
   ncov %>%
      group_by(Country) %>%
      arrange(Country) %>%
      slice(1) %>%
      ungroup() %>%
      arrange(Country)  
  })

}

shinyApp(ui = ui, server = server)

Please be sure to post a minimal and reproducible example. In this case you were missing a package dependency (`shinythemes`). You can make the code simpler by using a built in R table (like iris, or mtcars) and omitting any processing of the data frame which is irrelevant for your problem. Please check the `reprex` package and https://stackoverflow.com/help/minimal-reproducible-example for more info on minimal examples. — teofil, May 03 '20 at 22:53
Also, regarding `renderDataTable` and `dataTableOutput`. These functions are exported by both `shiny` and `DT` packages, although the `renderDT/DToutput` aliases are from the `DT` package. To avoid mistakes, be explicit when calling these functions with `DT::renderDT` or `shiny::renderDataTable`. In general, the `DT` versions are to be preferred, because I believe the `shiny` versions of these functions will be deprecated. — teofil, May 03 '20 at 22:57

score 2 · Accepted Answer · answered May 03 '20 at 22:46

2

This CSS should get you some or most of the way there.

library(dplyr)
library(shiny)
library(shinythemes)

ui <- fluidPage(theme = shinytheme("slate"),
                tags$head(tags$style(HTML(
                  "
                  .dataTables_length label,
                  .dataTables_filter label,
                  .dataTables_info {
                      color: white!important;
                      }

                  .paginate_button {
                      background: white!important;
                  }

                  thead {
                      color: white;
                      }

                  "))),
                mainPanel(tabsetPanel(
                  type = "tabs",
                  tabPanel(
                    title = "Table",
                    icon = icon("table"),
                    tags$br(),
                    DT::DTOutput("table")
                  )
                )))

server <- function(input, output) {
  output$table <- DT::renderDT({
    iris
  })
}

shinyApp(ui = ui, server = server)

answered May 03 '20 at 22:46

teofil

2,344
1
8
17

Thanks, this works perfectly. I'll include your other suggestions for future posts. How would I put the colours and themes on a switch so I can make a light/dark mode switch? – L10Yn May 05 '20 at 07:44
1

You'll probably need to define a second CSS class for the dark mode, and develop some JavaScript logic to turn it on and off. This can be done with the `shinyjs` package (https://stackoverflow.com/search?q=shinyJS+add+remove+class) or directly with JavaScript code. – teofil May 05 '20 at 08:56
Thanks I got it working. I also see now that the way to check what code to use to change specific elements in the table is to use the inspect element function. One thing I can't figure out though is how to change the writing in the Show Entries dropdown in the top left to black without changing the Show entries writing as well. In the Inspect element it seems like it's all referred to by the same class. – L10Yn May 06 '20 at 18:06
1

After poking around a bit, this seems to work: `button, input, optgroup, select, textarea {color: red!important}`. But I'm not a CSS expert by any stretch, so there might be a better or more correct way of doing this.. – teofil May 06 '20 at 23:13
1

Thanks. Someone showed me now that the best way to change it would be .dataTables_length label select {color: black; } – L10Yn May 07 '20 at 11:28

R shiny tables changing headings and light dark mode switch

1 Answers1