UI Themes

Review

Agenda

• Review

• Themes

• Plots

• Value boxes

• CSS

• Fonts

• www

Combine what you’ve learned

Complete the exercise on this page:

306-app

...

Where we’re headed

View the app on this page:

334-target-app

...

Tip

As a webpage, a Shiny app is infinitely customizable in theory, but it may require CSS.

In this section, we will cover built in shortcuts and best practices.

Themes

Agenda

• Review

• Themes

• Plots

• Value boxes

• CSS

• Fonts

• www

Shinyswatch

Shinyswatch themes are the easiest way to change the entire look of an app.

https://posit-dev.github.io/py-shinyswatch/

theme

Shinyswatch provides 25 bootstrap themes. Apply by name with the theme submodule.

from shiny.express import input, render, ui
from shinyswatch import theme

ui.page_opts(
    theme = theme.superhero
)

# rest of app

Your Turn

Complete the exercise on this page:

307-themes

...

Plots

Agenda

• Review

• Themes

• Plots

• Value boxes

• CSS

• Fonts

• www

But what about plots?

And other elements that use colors, which may not match the theme?

Each theme assigns its own set of color classes to predefined names. These are available in the themes color submodule. Set colors to these, e.g.

from shinywidgets import theme

app_theme = theme.superhero

ui.page_opts(
    theme = app_theme
)

ax.hist(x, input.n(), density=True, color=app_theme.colors.primary)

Tip

Use tab completion to explore the color options.

Your Turn

Complete the exercise on this page:

308-plot-themes

...

Value boxes

Agenda

• Review

• Themes

• Plots

• Value boxes

• CSS

• Fonts

• www

What about value boxes?

Tip

To ensure a value box always matches the theme, directly set its theme to one of the recognized color names:

with ui.value_box(theme = "primary"):

• primary
• primary-subtle
• secondary
• secondary-subtle
• success
• success-subtle

• danger
• danger-subtle
• warning
• warning-subtle
• info
• info-subtle

• light
• light-subtle
• dark
• dark-subtle

Your Turn

Complete the exercise on this page:

309-valuebox-themes

...

That’s it

That’s the Pareto Rule for styling Shiny apps.

But what if you want more control?

CSS

Agenda

• Review

• Themes

• Plots

• Value boxes

• CSS

• Fonts

• www

CSS

Cascading Style Sheets (CSS) are a framework for customizing the appearance of a webpage.

CSS in 30 seconds

Define styles in one of three places:

1. Externally in a linked CSS file
2. Globally in a webpage’s header
3. Locally in a tag’s style attribute

Assign styles to:

1. Tags
2. Classes
3. id’s

Adding CSS to a Shiny app

View the app on this page:

335-css

...

To link an external style sheet

Use ui.include_css()

from pathlib import Path

ui.include_css(
  Path(__file__.parent / "my-styles.css")
)

To add CSS globally

Use ui.tags.style()

ui.tags.style(
  ".card-header { color:white; background:#2A2A2A !important; }"
)

To add CSS locally to a specifc element

Use the style= parameter.

ui.card_header(
  "Title", 
  style = "white; background:#2A2A2A !important;"
)

Bootstrap classes

Tip

Bootstrap provides many predefined CSS classes. These are collections or coordinated style rules, ready to use pass to an element’s class_ parameter.

ui.card_header("Title", class_="bg-secondary-subtle"):

See https://getbootstrap.com/docs/5.3/utilities/background/ to begin your search for bootstrap class names.

Your Turn

Complete the exercise on this page:

310-element-themes

...

Fonts

Agenda

• Review

• Themes

• Plots

• Value boxes

• CSS

• Fonts

• www

Best Practice

Important

If you use a non-standard font in your app, provide the font to your user’s browser.

There are two methods.

1. Import the font file from a service like Google Fonts

ui.tags.link(
    rel="stylesheet",
    href="https://fonts.googleapis.com/css?family=Roboto"
)

2. Include the files with your app

Important

This is the required method if your app will be viewed offline.

Quiz

Do any of our R for Shiny users know where to store files to share with the user’s browser?

www

Agenda

• Review

• Themes

• Plots

• Value boxes

• CSS

• Fonts

• www

Who gets what?

The files in your app dorectory are shared with the computer that serves your app (so it can do its job), but not with your user’s web browser.

Note

To share files with the web browser you must place them in a sub-directory named www.

Note

If you include a sub-directory named www, Shiny will make its contents available to the the application’s UI at /.

This makes www a very good place to store things needed by a browser, like:

• CSS style sheets
• Images
• Fonts

Your Turn

Complete the exercise on this page:

311-style

...