Theming Quarto

HTML Theming

Quarto includes 25 themes from the Bootswatch project:

• default
• cerulean
• cosmo
• cyborg
• darkly
• flatly
• journal
• litera
• lumen
• lux
• materia
• minty
• morph
• pulse
• quartz
• sandstone
• simplex
• sketchy
• slate
• solar
• spacelab
• superhero
• united
• vapor
• yeti
• zephyr

How to Apply HTML Theming

Provide the custom theme under theme in the YAML heading:

my-document.qmd

---
theme:
  - flatly
---

However, we usually want to use our organization’s theme

Introducing brand.yml

Create reports, apps, dashboards, plots and more that match your company’s brand guidelines with a single _brand.yml file.

brand.yml is a simple, portable YAML file that codifies your company’s brand guidelines into a format that can be used by Quarto, Python and R tooling to create branded outputs. Our goal is to support unified, branded theming for all of Posit’s open source tools—from web applications to printed reports to dashboards and presentations—with a consistent look and feel.

brand.yml documentation, Quarto documentation

brand.yml elements

• meta: Identifying information, name of the company, URLs, etc.
• logo: Files or links to the brand’s logos.
• color: Colors in the brand’s color palette.
• typography: Fonts for different elements.
• defaults: Additional context-specific settings.

_brand.yml structure

_brand.yml

meta: 
  name: Example Company
  link: 
    github: https://github.com/example-company

logo: 
  medium: logos/logo.png

color:
  palette:
    black: "#1C2826"
    blue: "#0C0A3E" 
    neutral: "#F9F7F1" 
    red: "#BA274A"
    violet: "#4D6CFA"
  background: neutral
  foreground: black
  primary: blue
  secondary: violet
  danger: red

typography:
  fonts:
    - family: Nunito Sans
      source: google
    - family: Montserrat
      source: google
    - family: Fira Code
      source: google

  base: Nunito Sans
  headings:
    family: Montserrat
    weight: 700
    color: primary
  monospace: Fira Code
  link:
    color: danger
    decoration: underline

How to apply brand.yml automatically

1. Define branding in a single_brand.yml file.
2. Save in the root directory of your Quarto project (alongside _quarto.yml)

Quarto will detect the presence of _brand.yml and automatically apply the brand to all documents of the supported formats in the project.

Specify light and dark themes for documents

You can now specify a light and dark brand for documents. For example, at a project-level you can provide two brand files:

_quarto.yml

brand:
  light: light-brand.yml
  dark: dark-brand.yml

(Note: this is not available in reveal.js).

Specify light and dark themes for plots

You can use renderings to provide light and dark versions of a plot:

my-document.qmd

---
format: 
  html:
    theme:
      light: cosmo
      dark: darkly
---

```{python}
#| renderings: [light, dark]
(ggplot(purpose_data, aes(x='reorder(primary_purpose, n)', y='n')) +
 geom_col(fill='forestgreen', alpha=0.8) +
 geom_text(aes(label='label'), ha='left', size=8) +
 coord_flip() +
 scale_y_continuous(labels=lambda x: [f"{int(i/1000)}k" if i >= 1000 else str(int(i)) for i in x]) +
 labs(title="Recreation Dominates American Dam Purposes",
      subtitle="Top 10 primary purposes for the nation's 92,428 dams",
      x="Primary Purpose",
      y="Number of Dams",
      caption="Source: National Inventory of Dams") +
 theme_dam)
```

Your turn

In the workshop repo, there is a file called 04-exercise.yml. Rename the file to _brand.yml and rerender your Quarto document.

Change some of the variables in the _brand.yml file and rerender to see how your theme changes.

05:00