Search code examples
rshinysassbslib

nav-link-color (and other) not working in bslib

I am trying to customise the ui in Shiny with bslib and I was under the impression that bslib allows changing all the sass variables as described here https://rstudio.github.io/bslib/articles/bs5-variables.html#nav-link-color by specifying it directly in bs_theme e.g.

  theme = bslib::bs_theme(
    version = 5,
    base_font = font_google("Poppins"),
    "navbar_bg" = "#FFFFFF",
    "nav-link-font-size" = "14px", ..., )`

which all seems to work, however I cannot get "nav-link-color" or "nav-link-hover-color" to work by specifying those in the same way. Any ideas of what I am doing wrong?

Solution

  • One option to fix the issue would be to add the !important property to the rules (By inspecting in the browser I saw that the rules for the nav-links are overwritten by a different rule.).

    library(bslib)
library(shiny)

theme <- bs_theme(
  version = 5,
  "primary" = "#0044FF",
  base_font = font_google("Poppins"),
  "navbar_bg" = "#FFFFFF",
  "nav-link-font-size" = "40px",
  "nav-link-color" = "red !important",
  "nav-link-hover-color" = "green !important"
)

ui <- navbarPage(
  theme = theme,
  "App Title",
  tabPanel("Plot"),
  navbarMenu(
    "More",
    tabPanel("Summary"),
  )
)

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

}

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