theme-figtree

A Quarto HTML theme featuring Figtree typography, a warm light grey base palette, and muted teal/sage green accents. Includes light and dark modes with full mobile responsiveness.

Installation

quarto add alexsingleton/theme-figtree

This will install the extension under the _extensions subdirectory. If you're using version control, you will want to check in this directory.

Usage

Add the theme to your _quarto.yml:

project:
  type: website

website:
  title: "My Website"
  navbar:
    left:
      - href: index.qmd
        text: Home
      - href: about.qmd
        text: About

format:
  html:
    theme:
      light: theme-figtree
      dark: theme-figtree
    include-in-header:
      - text: |
          <link rel="preconnect" href="https://fonts.googleapis.com">
          <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
          <link href="https://fonts.googleapis.com/css2?family=Figtree:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">

Features

Full-viewport hero section

Create an impactful homepage with a full-screen hero image. Configure the title, subtitle, and image from YAML:

---
pagetitle: "My Site"
title-block-style: none
toc: false
page-layout: custom
hero-title: "Welcome to My Site"
hero-subtitle: "Your tagline goes here"
hero-image: "images/hero.jpg"
---

Then in your page content, use HTML for the hero (more reliable than fenced divs):

<div class="hero" style="background-image: url('images/hero.jpg');">
<div class="hero-content">
<span class="hero-title">{{< meta hero-title >}}</span>
<span class="hero-subtitle">{{< meta hero-subtitle >}}</span>
</div>
<div class="hero-scroll">Scroll to explore</div>
</div>

To show only the scroll indicator without title/subtitle, omit the .hero-content div:

<div class="hero" style="background-image: url('images/hero.jpg');">
<div class="hero-scroll">Scroll to explore</div>
</div>

The hero requires an image in your images/ folder. Recommended size: 1920×1080px or larger.

Social media icons

Add social icons to the navbar in your _quarto.yml:

website:
  navbar:
    right:
      - icon: github
        href: https://github.com/username
        aria-label: GitHub
      - icon: twitter-x
        href: https://x.com/username
        aria-label: X (Twitter)
      - icon: mastodon
        href: https://mastodon.social/@username
        aria-label: Mastodon
      - icon: linkedin
        href: https://linkedin.com/in/username
        aria-label: LinkedIn
      - icon: youtube
        href: https://youtube.com/@username
        aria-label: YouTube

Available icons (Bootstrap Icons):

• github - GitHub
• twitter-x - X (formerly Twitter)
• mastodon - Mastodon
• linkedin - LinkedIn
• youtube - YouTube

Bluesky doesn't have a Bootstrap icon yet. Options:

# Option 1: Use emoji
- text: "🦋"
  href: https://bsky.app/profile/username
  aria-label: Bluesky

# Option 2: Use text
- text: "Bsky"
  href: https://bsky.app/profile/username
  aria-label: Bluesky

Homepage listings

Display recent blog posts and publications in a two-column layout:

---
listing:
  - id: blog-listing
    contents: blog/*.qmd
    sort: "date desc"
    max-items: 10
    type: table
    fields: [title]
    sort-ui: false
    filter-ui: false
---

::: {.home-listings}
::: {.listing-section}
## Blog

::: {#blog-listing}
:::

::: {.view-all}
[View all posts](blog.qmd)
:::
:::
:::

Use sort-ui: false and filter-ui: false to hide the order/filter controls on the homepage. Keep them enabled on the full listing pages (blog.qmd, publications.qmd).

Page images

Add an optional image to any page:

---
title: "My Post"
date: 2025-01-15
image: images/featured.jpg
---

The image appears at the top of the page with the .page-image class applied automatically.

Typography

• Headings: Figtree at 600-700 weight
• Body text: Figtree at 400 weight with 1.65 line height
• Code: JetBrains Mono for all code blocks and inline code

Colour palette

Light mode

Element	Colour
Background	Warm grey #f5f5f4
Text	Dark warm grey #292524
Links	Muted teal #476e63
Accents	Sage green #5a8a7a

Dark mode

Element	Colour
Background	Dark warm grey #1c1917
Text	Light warm grey #e7e5e4
Links	Light teal #6aa99c
Accents	Sage green #5a8a7a

Styled components

• Full-viewport hero section
• Top navigation bar
• Two-column homepage listings
• Tables with hover states
• Callout boxes (note, tip, warning, important)
• Code blocks with syntax highlighting
• Blockquotes
• Table of contents
• Buttons
• Footer

Example

See the example/ directory for a complete working example site with:

• Hero homepage
• Blog and publications sections
• Sample posts with dates
• Listing pages

To preview:

cd example
quarto preview

Note: You'll need to add a hero.jpg image to example/images/ for the hero section to display properly.

Customisation

You can extend or override the theme by creating your own SCSS file and including it:

format:
  html:
    theme:
      - theme-figtree
      - custom.scss

Available SCSS variables

// Accent colours
$teal-500: #5a8a7a;
$teal-600: #476e63;

// Warm greys
$warm-grey-100: #f5f5f4;
$warm-grey-800: #292524;

// Typography
$font-family-sans-serif: "Figtree", sans-serif;
$font-family-monospace: "JetBrains Mono", monospace;

Requirements

• Quarto >= 1.3.0

License

MIT License - see LICENSE for details.

Author

Alex Singleton