shinyWidgets icon indicating copy to clipboard operation
shinyWidgets copied to clipboard

Widgets aren't themeable via {bslib}

Open cpsievert opened this issue 4 years ago • 5 comments

It'd be great if the main colors and fonts of {shinyWidgets} could be themed via {bslib}'s theming options. Here's one example where users might expect sliderTextInput()'s accent color to be purple as well as a higher level of contrast in the grid text (similar to the new sliderInput()'s behavior)

library("shiny")
library("shinyWidgets")

ui <- fluidPage(
  theme = bslib::bs_theme(bg = "black", fg = "white", primary = "purple"),
  br(),
  sliderTextInput(
    inputId = "mySliderText",
    label = "Month range slider:",
    choices = month.name,
    selected = month.name[c(4, 7)]
  ),
  verbatimTextOutput(outputId = "result")
)

server <- function(input, output, session) {
  output$result <- renderPrint(str(input$mySliderText))
}

shinyApp(ui = ui, server = server)

In Shiny 1.6, we reworked Sass/CSS styles for sliderInput(), selectInput(), dateInput(), etc. to derive their styling defaults from the bslib::bs_theme() (when provided) and even work with real-time theming. The source of those functions should help you see how you might want to do the same in {shinyWidgets}. Also, here's a general write-up on how to use the tools in {bslib} to create "themeable custom components" https://rstudio.github.io/bslib/articles/theming.html#custom-components-1

If you have the interest and the time to make {shinyWidgets} more aware of {bslib}, let me know and I'd be happy to answer any questions and provide more direction.

cpsievert avatar Feb 05 '21 16:02 cpsievert

Hello,

Thanks, all of this is very interesting !

I tried with an easy widget (already tried in fresh), works well:

image

Code here: https://github.com/dreamRs/shinyWidgets/blob/19cb2787629b50e4cebde9e05a3a2772c648a0c1/R/dependencies.R#L166

I will try with some other good candidate widgets (some don't have SCSS files, but stylus...)

For the slider I retrieve the dependency with htmltools::findDependencies, so I think my best options are:

  • use ionRangeSliderDependency from shiny but it's not exported
  • put a hidden shiny's slider somewhere to use its dependencies

Victor

pvictor avatar Feb 09 '21 16:02 pvictor

For the slider I retrieve the dependency with htmltools::findDependencies

Maybe you could use htmltools::htmlDependencies() instead? This way the functional dependency won't get resolved early (we could also look into adding a resolve = TRUE argument into htmltools::findDependencies() if you really need it)

cpsievert avatar Feb 10 '21 22:02 cpsievert

Nice! Works fine, thx :)

pvictor avatar Feb 11 '21 09:02 pvictor

Just tried the test-bslib branch and it works great so far!

aldomann avatar Feb 18 '21 08:02 aldomann

Thank you all for such a great package! 🙏🏽 🌵

I'm also looking for this feature! Is there plan to merge the bslib-bttn branch anytime soon?

trangdata avatar Dec 07 '21 21:12 trangdata