Carson Sievert | Custom theming in Shiny & R Markdown with bslib & thematic | RStudio

Aug 15, 2023

Carson Sievert | Custom theming in Shiny & R Markdown with bslib & thematic | RStudio

Custom theming in Shiny and R Markdown often requires writing styling rules in both CSS and R. In particular, styles for HTML content (e.g., actionButton(), tabsetPanel(), titlePanel(), etc) derive from Bootstrap CSS, so customization is traditionally done by overwriting that CSS, which is difficult to do 100% correctly. The {bslib} package helps solve this problem by making it easy to customize (any version of) Bootstrap CSS defaults from R. However, this only solves part of the problem since CSS doesn’t necessarily effect output(s) rendered by R, such as plotOutput(). The {thematic} package helps solve this problem by providing auto theming of plotOutput()s (based on CSS) as well as a simple interface for styling any R graphic for any output format.

About Carson:
Carson is a software engineer at RStudio working on R packages such as shiny, shinymeta, and plotly. His book “Interactive data visualization with R, plotly, and shiny”, published by CRC Press, is also freely available online at plotly-r.com.

Content

2.48 -> [MUSIC PLAYING]

5.46 -> Hi.

6.15 -> I'm Carson.

6.99 -> And I'm an Engineer of RStudio.

8.773 -> And I'd like to show you some work we've

10.44 -> been doing to make custom theming easier inside of Shiny

13.77 -> and R Markdown.

15.907 -> I'd like to show you two different packages.

17.74 -> The first is bslib, which allows you to essentially style

22.38 -> any of the components that are rendered by your web browser

25.47 -> inside of an app or document.

28.54 -> The second-- thematic allows you to essentially translate

32.04 -> the CSS styles that you include in your browser

35.55 -> and allow them to set new defaults for your static R

38.94 -> plots.

40.32 -> So to start using bslib with shiny--

43.102 -> the first thing that you're going to want to do

45.06 -> is to call this bs_theme function to create

48.04 -> a theming object, which you can then

50.37 -> give to the theme argument of essentially any page

54.06 -> layout inside of shiny that wants to utilize Bootstrap.

58.5 -> Now these currently by default, what this is going to do

62.4 -> is actually upgrade your application

64.379 -> from using Bootstrap 3 to using Bootstrap 4.

68.79 -> So if you happen to put this inside of an existing

71.49 -> application and you encounter any issues,

74.91 -> just know that you can also downgrade to Bootstrap 3

78.45 -> when using the bslib package.

80.65 -> And in the future, we plan on supporting

82.53 -> Bootstrap 5 and higher.

84.18 -> And regardless of what Bootstrap version you're using,

87.21 -> you can easily customize the main colors and fonts

89.94 -> of your application.

91.89 -> So here I've set the background and foreground colors

95.3 -> to a dark mode for my application

98.75 -> and the next I could choose to set some important accent

101.84 -> colors like the primary or secondary color.

104.84 -> And finally, I will set a different base font

108.14 -> from the Bootstrap defaults.

110.06 -> So here I'm going to use the font_google function, which

113.69 -> does a lot of work for me in terms of making sure

116.54 -> that the font files are available for the end user,

119.81 -> even if they don't have an internet connection.

122.63 -> And also keep in mind with this bs_theme function,

125.51 -> you have access to hundreds of different more specific styling

129.05 -> settings, if you want to get more targeted with your styles

132.89 -> and to quickly preview a given theme object,

135.74 -> try out this bs_theme_preview function, which essentially

139.07 -> runs a demo app where you can see all the various components

142.94 -> that your theme might impact.

145.4 -> Now if you were to include a bs_theme object

148.52 -> inside of your own application, you

151.31 -> might notice that the styling of your application

154.49 -> doesn't propagate to the static R plots that are generated

158.06 -> by your Shiny app.

159.98 -> And this is one of the reasons why we

161.75 -> created the thematic package.

163.64 -> If you call this thematic_shiny function just prior

166.79 -> to running the shiny application,

169.07 -> then all of the static R plots that are generated by the Shiny

172.28 -> app will use the CSS styles on their container

176.21 -> to set new theming defaults on the R side.

179.66 -> bslib also provides an interactive theming tool,

182.87 -> which allows you to quickly try out different theme settings

185.99 -> and seeing how that theme renders in real-time.

190.53 -> This theming tool can be used with any Shiny application

193.76 -> by calling the bs_themer function.

197.47 -> The only requirement is that you call the bs_themer function

200.83 -> inside of the server function.

203.3 -> And that you're using this interactive themer

205.72 -> with Bootstrap 4.

208.41 -> Also keep in mind that if you're running this themer locally,

211.41 -> any of the interactive changes that you make

213.69 -> are captured with R code and admitted to R console.

216.91 -> So that you can copy paste those changes

219.3 -> into your theme creation.

220.87 -> Now if you'd like to use these theming tools with R Markdown,

223.95 -> the first thing to know is that you

225.66 -> can pass these theme settings into the theme

228.57 -> parameter of an HTML document.

231.03 -> In addition, if you'd like to theme your document

233.58 -> with the interactive theming tool,

235.8 -> you'll have to first add a shiny runtime to your documents

239.07 -> YAML matter and then call the bs_themer function

242.64 -> inside of the server side code.

244.71 -> Now if you'd like these real time changes in the CSS

247.44 -> on the page to influence the R plots rendered by the document,

252.21 -> you'll first have to enable thematic.

254.73 -> And then also make sure that your rendering your plots

257.67 -> through Shiny's renderPlot.

259.529 -> It's also worth noting that the matter can be used anywhere

262.32 -> to create any sort of file format that you want.

266.04 -> We've seen it used with Shiny in our markdowns HTML document

270.5 -> to create PNG images, where the styles are automatically

274.67 -> informed by CSS styles.

277.98 -> However, you can also enable thematic and give it

281.06 -> the actual color codes for a background, foreground

284.03 -> and accent color, similar to how we provided those things

287.75 -> to a bs_theme object.

289.82 -> And finally, I would like to thank you for listening.

292.05 -> As well as provide these links to the slides

294.41 -> as well as documentation, where you can learn more.

298.02 -> Thank you.

Source: https://www.youtube.com/watch?v=zAqoLCQ83Ns