Carson Sievert || Developing Shiny Custom Themes in Real Time Using {bslib}| RStudio

Transcript#

This transcript was generated automatically and may contain errors.

There is a bsthemepreview function that, like, given that you don't already have a Shiny application that you want to preview a theme for, you can give bsthemepreview, like, if I had this, if I already had in mind, like, a theme that I wanted to use and didn't want to do the work of actually, like, programming a Shiny app example, I can just save this theme here and use this bs, bstheme, preview, give it a theme. And it will apply that theme to this demo, like, Shiny demo app that kind of tries its best to stuff all of, like, the core Shiny UI stuff that we support into this example app. So, you can see, like, how those styles would end up affecting, like, slider input and selectize input and date input, as well as things like, you know, verbatim text output and, like, all of the sort of Shiny widgets that you may or may not be already used to.

And then it also, at the same time, overlays this interactive widget that I can drag around and use to make tweaks to the actual theme settings. So, I can change from, like, a something closer to a black to something closer to, like, an ice blue theme. So, it's got the two main background and foreground colors. It's also got the ability to use a boot swatch theme, if you want to. Just be aware, like, if you use a boot swatch theme, don't expect, like, the custom theming options to always work super great with it. So, just want to set expectations there that, like, just because of the way that boot swatch is currently set up, they haven't, like, implemented those themes well enough in mind to, like, allow you to tweak them in ways that work as well as just using the default bootstrap theme.

So, just be aware of that. So, you can change the main, like, background foreground, as well as, you know, I could have a different primary color here. That will change, like, tab set panel, things like check boxes and radio buttons, slider inputs. Also, you know, we try our best to kind of use those, like, main semantics of bootstrap and propagate them throughout all of the widgets that we provide in Shiny.

So, yeah, the main, like, color and boot swatch settings, as well as fonts. And again, this has integration with Google Fonts, where I could choose any Sans Serif font that I wanted. Let's choose something like, I'm not sure how to pronounce this one, but I do like it, Montserrat. So, I could change from Pront to Montserrat.

Oh, and actually, that might be a bug, that it seems to have gone back to my original theme settings. But now, you can see, like, at the top here and on the tab set panels, it's kind of slightly different looking font here. It also has thematic enabled, so that we can look at how the theme would actually be propagated to our plots defaults settings, as well. So, I could, again, change to, like, a blue color here, and that will just automatically kind of propagate to the R plot. Same thing with, like, DT tables. DT also has some nice integration with bslib , where it derives its sort of accent colors and main colors and fonts, as well. All those styles from the bslib theme.

And then, you know, these are just some other things that we provide in Shiny UI, like modals and progress bars, notifications. And then, like, the difference between, you know, how the heading fonts would look versus code and base font.

And then, some other kind of more low-level options for more advanced theming. So, if you can see my R console here, various output that has been essentially echoed as I've made changes to the theming application. And it should do a good job of keeping track of just the changes that you've made interactively. So, like, this captures the fact that I've changed to a, you know, more of a blue background and foreground color, as well as the Montserrat font setting.

And it's not quite smart enough to know, like, that it should actually integrate this stuff with the input theme that you've given it. So, you will have to essentially, like, copy this code here. And it does make the assumption that your theme is named theme. But thankfully, I've actually used the name theme. So, I can just say BS theme update this theme with these new settings. And now, you know, if I feed this in to input, again, on the BS theme preview, it will use the Montserrat settings.

The BS theme preview is really nice if you're, like, again, you don't already have a Shiny app that you're using and you want to, like, get a feel for what colors and fonts you might want to use in your future Shiny app.

Using interactive theming on your own Shiny app

But if you already have an existing Shiny app, you can leverage that same interactive theming widget. So, if I already have this nav bar page here, I can first let me actually do more of a traditional looking setup. And here's the server function which has the input and output arguments as well as session.

And then bslib has a function called BS themer that you can call inside of your server function. And then it will overlay that same interactive themer on this particular Shiny app.

So, now I could go in and do the same thing to my basic nav bar page. And still get the same experience of, like, the code being output to replicate the changes.

And you don't necessarily, like, you just need to call this once. You don't need to worry about, like, calling this in a reactive context or anything like that. Like, if you want to do this, just go to the top of your server function and call this function once. And then it will just overlay that. And you can also collapse it if you don't actually really want to use it. And you want to, like, do some other stuff with your Shiny app, you can collapse it and kind of get it out of your way if you don't want it anymore.

And you don't necessarily, like, you just need to call this once. You don't need to worry about, like, calling this in a reactive context or anything like that. Like, if you want to do this, just go to the top of your server function and call this function once.