Switching between light and dark mode in R Shiny tables with customizable headings

I'm currently working on a visualization project for tracking Covid-19 data, and I'm having trouble changing the text color above and below a table I've created. I've attached an image to show exactly what needs to be modified.

Additionally, I want to implement a light and dark mode for the application, but I'm struggling to find suitable code that will work with the current structure of the app. Here's the code I'm using, which includes the mentioned issues:

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)

Answer №1

Using this CSS code will help you achieve most of the desired styling:

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)

https://i.sstatic.net/ySiUl.png

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

CSS: Struggling to Keep Footer at the Bottom of the Page

I've been struggling to get my footer to stick to the bottom of the page, but I just can't seem to make it work. I've searched online for solutions with no success, so I thought I would ask for help here. http://jsfiddle.net/f54eq3w8/ Here ...

404 error occurs when Spring-Boot fails to include CSS file through ResourceLocations

My spring-boot application is currently running smoothly on a local computer, but I have encountered an issue. When I run mvn package, none of my CSS or JavaScript files located in /src/main/wepapp/css are included in the jar file created in the target d ...

Achieving perfect alignment of an iframe on a webpage

Having an issue with aligning the iframe on my website. I have two buttons set up as onclick events that connect to internal pages displaying PHP data in tables within the iframe. Despite trying various CSS styles and positioning methods, I can't seem ...

Ways to access the preceding DIV element closest to the current one

Hovering over the text My will cause the image myicon.png to fade out and back in: <div class="mmItemStyleChild"> <img src="theImages/myicon.png" class="mIcon vertAlign mmm1" id="mMW1" /> <img src="theImages/emptyImg.png" class="mSpacer ...

Tips on activating the CSS style while typing using the onChange event in React

Is it possible to dynamically adjust the width of an input as we type in React? Currently, my input has a default width of 1ch. I would like it to increase or decrease based on the number of characters entered, so that the percentage sign stays at the end ...

Customizing DataTables row data with JSON inputs

Upon receiving JSON data on my website, it includes an array, an array of objects, and a string. For example: data = { labels: ['a', 'b', 'c', 'd', 'e',] , staff: [ {'name' : 'aaa', &a ...

Update the parent node in the Google Org Chart

This is my first time working with Google Charts and I have a couple of questions: Is there a method in the API to update the parent of an existing node? I am facing a challenge where I need to build a tree structure top-down, which means that I know the ...

Enhancing Accessibility of the 'Return to Top' Link

Currently, I am designing a web page that requires users to scroll extensively. To enhance the user experience, I have included a back-to-top link at the bottom of the page for easy navigation back to the top. This is the HTML markup I have implemented: ...

What causes the card to exceed the boundaries of its parent column?

My Form elements seem to be misaligned and not fitting correctly. .h-100 is used for the blue navigation background to occupy the full height of the screen. An answer explaining why my code snippet is not working would be appreciated. View Plunker here ...

Adjusting the page width to ensure compatibility with all devices

I am facing difficulties with CSS regarding the properties width and margin. I am developing a webpage that should display properly on all devices, including PCs, smartphones, and tablets. I am using HTML <meta name="viewport" content="width=device-widt ...

What is the best way to dynamically insert an image into an <li> element?

I am looking to enhance my menu by adding an image below each li item as a separator. How can I achieve this using CSS? I want the images to automatically appear whenever a new li tag is added to the ul. Here is the HTML code: <ul class="menu"> ...

Filtering rows based on the values of multiple variables in the preceding row, subject to specific conditions

I'm attempting to filter a dataframe to only keep rows where the values of two variables are different from the previous row. Here's the initial dataframe: df<-structure(list(x = c("ARM018", "ARM018", "ARM018", "ARM021", "ARM021"), y = c(" ...

conditional statement with multiple criteria

While I am well-versed in writing ifelse() statements and find them quite useful, I have noticed that they can become inefficient when dealing with multiple conditions. This has led me to wonder if there is a more efficient way to handle such situations. T ...

If you encounter a 1px space issue when resizing the viewport and using display: table; with fixed width cell

In our responsive projects, we are facing an issue with the display property set to table. Our table is wrapped within a container and set to 100% width, with one of the cells having a fixed pixel width. As we resize the browser window, we notice that the ...

Setting the child elements of a CSS div to have the same width and be larger than the

Welcome everyone to my inaugural post! I hope I've followed the right steps. I'm encountering an issue where I have child divs that need to have equal widths. The #content can sometimes exceed the browser window's width (hence the 3000px), ...

What is the method for designing a relative layout that organizes elements horizontally?

Can you tell me why elements are typically arranged vertically in a column? Is it feasible to change their orientation and display them horizontally, like in a row instead of a column? ...

Responsive HTML5 audio player adjusts size when viewed on mobile devices

I am facing a challenge with an HTML5 Audio player. It looks fine on desktop but behaves strangely on mobile devices. While the width remains intact, it repositions itself and floats over the element it is contained within. How can I prevent this repositio ...

The behavior of Elementor lightbox buttons upon being clicked

When using Android, I've noticed that the lightbox briefly displays a semitransparent cyan bar on the left and right buttons when they are pressed. Is there a way to control or prevent this behavior? Any suggestions would be appreciated! Thanks in adv ...

When hovering over a circle in CSS with a background image to hide text, the shape becomes distorted

I am attempting to create a series of circles with background images and accompanying text displayed side by side. My goal is to have the image opacity change and the text disappear upon hovering over each circle. Additionally, I do not want underlines to ...

Combine multiple SCSS files located in various directories into a single CSS file by using NPM

In my project, there are SCSS files stored in a "static" directory. Additionally, I have application components located in a separate directory, each containing its own SCSS file. I am seeking a way to compile all of these SCSS files into a single .css fi ...