3MW (3 ways to style your Shiny apps)
Albert Rapp
March 01, 2023
Guten Tag!
Many greetings from Ulm, Germany.
The default look of Shiny apps can sometimes feel a bit dated. So, let us talk about three ways to take control of your app’s appearance.
And remember: All of today’s free code can be found on GitHub.
Use a predefined theme
The easiest way to style your app is to use a predefined theme from {bslib}. Just add theme = bs_theme(bootswatch = "flatly") in your app’s fluidPage(). For example, here’s a simple Shiny app using a default look.
Now, take a look how the app is transformed if you add the bs_theme() call.
If you want to try a different theme, check out the list of other themes online.
Create your own theme
You can easily create your own theme by calling bs_theme() and specifying colors and fonts like so.
These changes do not sound like much but fonts and colors can go a long way to make your app “feel” different.
Use CSS
CSS is the universal language to style things on the internet. CSS code looks like this:
This code will style objects like buttons or sections that are of the test_class class. You see, most CSS code targets classes so that we can consistently style all objects of a given class. Here, the code causes all test_class objects to use a red background and white text. Exciting, I know.
So, this begs two questions:
How do you find out the class of the element that you want to change?
Where do you put the CSS code in your R code?
The first question requires strolling through your app’s source code with your web browser’s developer mode (Yes, you will totally feel like a hacker). I’ve described how this works in my Quarto styling video.
Once you have the desired class, write the CSS code into your app using tags$style(‘CSS HERE‘). Here’s a code example that shows you how to style the sliders.
If you did everything correctly, then your sliders should be green now. Yeah, I know. These are probably the most beautiful sliders you’ve ever seen.
This concludes this week’s 3MW. I hope you enjoyed this week’s issue and I wish you a great week! 🙃
In the subscribers-only part, I’ll share CSS resources and explain how to use CSS files to store CSS code neatly.
Subscribe to 5 Minutes Wednesdays to read the rest.
Become a paying subscriber of 5 Minutes Wednesdays to get access to this post and other subscriber-only content.
Already a paying subscriber? Sign In