如何修改Flexdashboard中valueBox()的默认字体颜色

结论 #

可以修改，共有三类常用实现方案，按需选择即可：

方案1：单独修改单个valueBox的字体颜色 #

适合仅需要调整个别组件样式的场景，直接在valueBox()函数内通过tags$p()为数值、说明文字配置自定义样式：

library(flexdashboard)
library(shiny)

valueBox(
  # 自定义数值部分字体样式
  value = tags$p("95%", style = "color: #2c3e50; font-weight: bold;"),
  # 自定义说明文字部分字体样式
  caption = tags$p("任务完成率", style = "color: #34495e;"),
  icon = "fa-check-circle",
  color = "success"
)

方案2：全局修改所有valueBox的默认字体颜色 #

适合需要全仪表板统一组件样式的场景，在Rmd文档的YAML配置之后、仪表板内容之前插入如下CSS代码块即可：

/* 修改数值部分默认字体颜色 */
.value-box .value {
  color: #2c3e50 !important;
}
/* 修改说明文字部分默认字体颜色 */
.value-box .caption {
  color: #34495e !important;
}

!important属性用于强制覆盖flexdashboard的默认样式，避免自定义样式不生效。

方案3：动态渲染场景下的修改 #

如果是通过renderValueBox()动态生成的valueBox，修改逻辑和方案1一致，直接在渲染逻辑内添加样式即可：

output$dynamic_box <- renderValueBox({
  valueBox(
    value = tags$p(paste0(round(runif(1, 80, 100), 1), "%"), style = "color: black;"),
    caption = tags$p("实时完成率", style = "color: #333;"),
    color = "info"
  )
})

提示：颜色可使用十六进制编码、RGB值或者标准颜色名称（如black、navy）配置。

内容的提问来源于stack exchange，提问作者jk122