I’m trying to use my own custom palette in my Shiny app built with bslib/Bootstrap but can’t figure out how to use the variables I added to root. When inspecting my app page, I’m able to see the custom colors in root (albeit a separate root than where Bootstrap variables are loaded) but can’t use them.

Here is a short reprex (of what I tried and doesn’t work – replacing "var(--my-color-1")" by "darkblue" for example works):

app.R

library(shiny)
library(sass)
library(bslib)
library(magrittr)

custom_theme <- bslib::bs_theme(version = 5) %>%
    bslib::bs_add_variables(sass::sass_file("www/colors.scss")) %>%
    bslib::bs_add_variables("navbar-dark-bg" = "var(--my-color-1)")

shinyApp(
    ui = bslib::page_navbar(
        title = "My App",
        theme = custom_theme,
        inverse = TRUE, # to use navbar-dark-bg
        bslib::nav_panel(title = "Tab 1"),
        bslib::nav_panel(title = "Tab 2")
    ),
    server = function(input, output, session) {}
)

www/colors.scss

:root {
  --my-color-1: #76b0ff;
  --my-color-2: #ec6453;
}