在shinydashboard中更改颜色

Question

我有以下代码，可以将shinydashboard中主要状态的颜色更改为我定义的自定义蓝色。

tags$style(HTML(".box.box-solid.box-primary>.box-header {
                                color:#FFFFFF;
                                background-color:#005CB9;}

                                .box.box-solid.box-primary{
                                border-bottom-color:#005CB9;
                                border-left-color:#005CB9;
                                border-right-color:#005CB9;
                                border-top-color:#005CB9;
                                }")),

然而，我需要更改信息框的颜色，因为它使用了color =而不是status =。有人知道我需要更改哪些标签来自定义shinydashboard中默认颜色吗？

谢谢

- GJPlatten

Answer 1

我使用以下代码在dashboardBody（）标签开头使用style（）语句，将每个颜色为“aqua”的实例覆盖为您自定义的蓝色：

tags$style(
  type = 'text/css', 
  '.bg-aqua {background-color: #005CB9!important; }'
),

关键是在颜色后面添加"!important"，这将覆盖shinydashboard预设。

未来，识别css类的简单方法是在运行shinyapp时在Rstudio中选择"run external"，然后使用浏览器的开发工具或"检查元素"工具。

以下是完整示例以供参考：

require(shiny)
require(shinydashboard)

ui <- shinyUI(dashboardPage(
  dashboardHeader(title = 'Change infoBox color'),
  dashboardSidebar(disable = TRUE),

  dashboardBody(
    tags$style(
      type = 'text/css', 
      '.bg-aqua {background-color: #005CB9!important; }'
    ),

    infoBox(
      title = 'Custom Color',
      value = 100,
      color = 'aqua'
    )
  )
))

server <- shinyServer(function(input, output) {

})

shinyApp(ui, server)

- thisislammers

Answer 2

到目前为止，library(fresh) 提供了一种方便的方法来自定义 library(shinydashboard)、library(shinydashboardPlus) 或 library(bs4Dash) 的外观：

library(shiny)
library(shinydashboard)
library(fresh)

mytheme <- create_theme(
  adminlte_color(
    light_blue = "#434C5E"
  ),
  adminlte_sidebar(
    width = "400px",
    dark_bg = "#D8DEE9",
    dark_hover_bg = "#81A1C1",
    dark_color = "#2E3440"
  ),
  adminlte_global(
    content_bg = "#FFF",
    box_bg = "#D8DEE9", 
    info_box_bg = "#D8DEE9"
  )
)

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(
    use_theme(mytheme)
  )
)

server <- function(input, output) { }

shinyApp(ui, server)

另请参阅相关文章。

- ismirsehregal