3MW (3 ways to style your Shiny apps)

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:

1. How do you find out the class of the element that you want to change?

2. 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 Premium to read the rest.