Main colors & fonts
bs_theme() provides named arguments for customizing the main background color (
bg), foreground color (
fg), accent colors (
secondary, etc), and fonts (
code_font, etc). Here’s an example of using a subset of these named arguments to implement a dark mode with custom fonts:
# Shiny usage navbarPage( theme = bs_theme( bg = "#101010", fg = "#FDF7F7", primary = "#ED79F9", base_font = font_google("Prompt"), code_font = font_google("JetBrains Mono") ), ... )
Among all the coloring options in
primary are by far the most influential as they effect nearly every color on the page. In fact,
fg alone impact 100s of defaults — everything from panels (e.g.,
shiny::inputPanel(), etc) to navigation (e.g.,
shiny::tabsetPanel(), etc) and more. The accent colors don’t impact nearly as much, but
primary does control the color for some important things like hyperlinks,
shiny::tabsetPanel() links, accent/focus colors for inputs, and more. That being said, other accent colors can be handy for customizing things like
shiny::actionButton() (defaults to the
shiny::showNotification() , or more generally any HTML content that leverages Color Utility Classes.
fg colors, keep in mind that it’s generally a good idea to pick colors with a similar hue but a large difference in their luminance.
bs_theme() also provides 3 named arguments for main fonts:
code_font. When using web safe font combinations, it’s ok to provide a character string of (comma-separated) font families to these arguments (e.g.,
bs_theme(base_font = '"Times New Roman", Times, serif'). Otherwise, use one of the
font_face() helpers to include the relevant file(s) so the client’s browser may render the font(s).
font_face() are fairly low-level interfaces to the CSS web font API, but
font_google() has the additional ability to download and cache font file(s), making it so that an internet connection is needed only for the first time a particular font is used.
When choosing fonts, keep in mind that it’s generally good practice to put serif fonts in
base_font, sans-serif fonts in
heading_font, and monospace fonts in
code_font. If you aren’t sure where to start, this article has a nice gallery of Google Font pairings.