css - R Shiny 的表格改变标题和浅暗模式切换

Question

我正在为 Covid-19 进行基本的可视化，并且在其中一个选项卡中我有一张表格。我似乎无法将 table 上方和下方的文字改成另一种颜色。我添加了一张图片，突出显示了我需要更改的文字。



我也想建立一个明暗模式，但我找不到任何可以在我现在拥有该应用程序的形式下工作的代码。我有这些问题的代码目前如下

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

这个 CSS 应该可以帮助你完成一些或大部分的工作。

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)