为何bslib的pulse Bootswatch主题未按预期为导航栏着色？

问题原因 #

Pulse这款Bootswatch主题的导航栏默认设计为浅色（白色）背景，和多数其他主题用主色作为导航栏背景的逻辑不同，所以直接设置bootswatch = "pulse"不会自动让导航栏显示紫色。

解决方案 #

有两种简单方法可以让导航栏呈现Pulse主题的紫色主色：

方法1：直接指定navbar_bg参数

利用bs_theme的navbar_bg参数，直接传入Pulse主题的主色值（#5E35B1）：

library(shiny)
library(bslib)

ui <- page_navbar(
    title = "Navbar is now purple!",
    theme = bs_theme(bootswatch = "pulse", navbar_bg = "#5E35B1")
)

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

shinyApp(ui = ui, server = server)

方法2：添加CSS规则覆盖样式

通过bs_theme_add_rules添加自定义CSS，将导航栏背景色绑定到主题的主色变量：

library(shiny)
library(bslib)

ui <- page_navbar(
    title = "Navbar is now purple!",
    theme = bs_theme(bootswatch = "pulse") |>
        bs_theme_add_rules(".navbar { background-color: var(--bs-primary); }")
)

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

shinyApp(ui = ui, server = server)

关于bs_themer工具的说明 #

由于Pulse主题自身对导航栏样式的定义优先级较高，bs_themer工具里的主色修改不会自动同步到导航栏。使用上述两种方法后，你在bs_themer里调整主色时，导航栏背景也会跟着变化。

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