In xaringanthemer: Custom 'xaringan' CSS Themes

When designing your xaringan theme, you may have additional colors in your desired color palette beyond those used in the accent colors of the mono and duotone styles.

The style*() functions in xaringanthemer include a colors argument that lets you quickly define additional colors to use in your slides. This argument takes a vector of named colors

colors = c(
  red = "#f34213",
  purple = "#3e2f5b",
  orange = "#ff8811",
  green = "#136f63",
  white = "#FFFFFF"
)

and creates CSS classes from the color name that set the text color — e.g. .red — or that set the background color — e.g. .bg-red. If you use custom CSS in your slides, the color name is also stored in a CSS variable — e.g. var(--red).

So slide text like this

This **.red[simple]** .white.bg-purple[demo] 
_.orange[shows]_ the colors .green[in action].

will be rendered in HTML as

This simple demo shows the colors in action.

Note that the color names in colors need to be valid CSS names, so "purple-light" will work, but "purple light" will not.

xaringanthemer documentation built on Sept. 15, 2024, 5:06 p.m.