如何让shinyWidgets的actionBttn适配bslib自定义主题颜色

问题原因 #

actionBttn() 来自 shinyWidgets 包，它的 color 参数使用的是自身内置的颜色预设，不会自动关联 bslib 主题中定义的自定义颜色变量。

解决方案1：全局覆盖actionBttn的primary样式（推荐） #

通过CSS利用bslib生成的主题CSS变量，全局修改所有actionBttn的primary按钮样式，使其匹配自定义主题色：

library(shiny)
library(bslib)
library(shinyWidgets)

ui <- page_sidebar(
  title = "My dashboard",
  theme = bs_theme(primary = "purple"),
  # 添加自定义CSS覆盖actionBttn的primary样式
  tags$style(HTML("
    /* 基础状态 */
    .bttn-primary {
      background-color: var(--bs-primary) !important;
      border-color: var(--bs-primary) !important;
    }
    /* 悬停状态 */
    .bttn-primary:hover {
      background-color: var(--bs-primary-dark) !important;
      border-color: var(--bs-primary-dark) !important;
    }
    /* 点击激活状态 */
    .bttn-primary:active {
      background-color: var(--bs-primary-darker) !important;
      border-color: var(--bs-primary-darker) !important;
    }
  ")),
  sidebar = sidebar("Sidebar",
                    actionBttn("go", "Go", color = "primary")),
  "Main"
)

shinyApp(ui, function(input, output) {})

解决方案2：单个按钮自定义颜色 #

如果只想修改特定按钮的颜色，可以直接将actionBttn的color设为"custom"，然后通过style参数指定颜色值：

library(shiny)
library(bslib)
library(shinyWidgets)

ui <- page_sidebar(
  title = "My dashboard",
  theme = bs_theme(primary = "purple"),
  sidebar = sidebar("Sidebar",
                    actionBttn(
                      inputId = "go",
                      label = "Go",
                      color = "custom", # 选择自定义模式
                      style = "background-color: purple; border-color: purple;"
                    )),
  "Main"
)

shinyApp(ui, function(input, output) {})

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