Bslib 仅更改导航栏颜色

Question

在我闪亮的应用程序中，我有一个允许更改主题应用程序的选项。
有没有办法创建一个主题，其中只有导航栏是彩色的，而主体是黑色或白色的？
我知道可以使用 CSS 来完成此操作，但由于我可以更改应用程序中的主题，因此无法进行自定义修复。

library(shiny)
library(markdown)
library(bslib)

main_theme = bslib::bs_theme(
  bg = "#86cecb",
  fg = "#e12885",
  primary = "#89cff0",
)

ui = navbarPage(
  "Navbar!",
  theme = main_theme,
  tabPanel("Plot",
           sidebarLayout(
             sidebarPanel(radioButtons(
               "plotType", "Plot type",
               c("Scatter" = "p", "Line" = "l")
             )),
             mainPanel(plotOutput("plot"))
           )),
  navbarMenu(title = "Ressources",
             tabPanel(
               "Options d'interface",
               selectInput(
                 "theme",
                 "Themes :",
                 c(
                   "Custom" = "custom",
                   "Dark" = "dark",
                   "Light" = "light"
                 )
               )
             ))
)

server = function(input, output, session) {
  light <- bs_theme()
  
  dark <- bslib::bs_theme(
    bg = "#222222",
    fg = "#FFFFFF",
    primary = "#FFFFFF",
    secondary = "#434343"
  )
  main_theme = bslib::bs_theme(
    bg = "#86cecb",
    fg = "#e12885",
    primary = "#89cff0",
  )
  
  observe(session$setCurrentTheme({
    if (input$theme == "dark")
      dark
    else if (input$theme == "light")
      light
    else if (input$theme == "custom")
      main_theme
  }))
}

if (interactive())
  shinyApp(ui, server)

Answer 1

您可以使用 Bootstrap 变量单独设置导航栏的背景颜色navbar-bg：

library(shiny)
library(markdown)
library(bslib)

ui <- navbarPage(
  "Navbar!",
  theme = bslib::bs_theme(
    "navbar-bg" = "#86cecb",
    bg = "#222222",
    fg = "#e12885",
    primary = "#89cff0",
  ),
  tabPanel(
    "Plot",
    sidebarLayout(
      sidebarPanel(radioButtons(
        "plotType", "Plot type",
        c("Scatter" = "p", "Line" = "l")
      )),
      mainPanel(plotOutput("plot"))
    )
  ),
  navbarMenu(
    title = "Ressources",
    tabPanel(
      "Options d'interface",
      selectInput(
        "theme",
        "Themes :",
        c(
          "Custom" = "custom",
          "Dark" = "dark",
          "Light" = "light"
        )
      )
    )
  )
)

server <- function(input, output, session) {
  
}

shinyApp(ui, server)
#> 
#> Listening on http://127.0.0.1:5052