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.
Add the following code to your website.
For more information on customizing the embed code, read Embedding Snippets.