Themes

View Markdown llms.txt

The theme sets the basic look of the presentation: colors, fonts, heading sizes and margins. You pick a built-in theme and adjust whatever you want with definitions at the start of the text.

Choosing a theme

Use @theme at the start of the document, before the first slide. Without @theme, the presentation uses the paper theme.

@theme editorial

Folio has three built-in themes.

paper

Cream background, bold headings in Archivo Black, text in Barlow and a coral accent. It is the default theme.

@theme paper

Annual report {.kicker}
# 2026 results
Revenue, customers and next steps. {.lead}

ink

Dark background, Inter for all text and an amber accent. Good for auditoriums and large screens.

@theme ink

Annual report {.kicker}
# 2026 results
Revenue, customers and next steps. {.lead}

editorial

Warm light background, serif headings in Fraunces, text in Source Sans 3, a dark red accent and more generous margins.

@theme editorial

Annual report {.kicker}
# 2026 results
Revenue, customers and next steps. {.lead}

The full list of colors and fonts for each theme is in the Themes reference.

Colors

@color name value creates a new color or replaces a theme color. The value can be a hex code, another theme color or a color with opacity, such as coral/80:

@theme ink
@color accent #4fd1c5
@color brand #7c5cd6

New product {.kicker}
# Sales dashboard {color=accent}
Launch planned for the second half of the year. {.brand}

Replacing accent changes every place that uses the highlight color, such as the .kicker style. A new color, such as brand, can be used in any color attribute (color=brand, bg=brand/20) and also as a style ({.brand}).

Color names use lowercase letters, numbers and hyphens.

Fonts

@font name "Family" weights declares a Google Fonts font. Write the family name in quotes, followed by the weights you will use, from 100 to 900:

@font title "Bebas Neue" 400
@font body "Inter" 400 700

# Expansion plan {font=title size=5xl}
Three new markets by the end of the year.

A new font, such as title, is applied with font=title. Using a name that already exists replaces the theme font:

Name	Where it is used
`body`	Regular text and smaller headings
`display`	Main headings and the `.display` and `.huge` styles
`mono`	Code

Project theme

The project theme gathers definitions that apply to every presentation in a project. It is the right place for the visual identity of a company, a course or a client.

To edit it, hover over the project in the sidebar and click the palette icon, Project theme. The editor shows a Preview with the theme, and changes are saved automatically.

@theme editorial
@color brand #1e83d6
@font title "Bebas Neue" 400
@style label {size=sm weight=bold uppercase tracking=0.14 color=brand}

Project theme rules:

It can only contain definitions: @theme, @color, @font, @style and @component. Slides in the project theme are an error.
@title and @author are ignored there, because they belong to each presentation. The editor shows a warning.
Each presentation can override anything it wants: its own @theme, a color, a font, a style or a component with the same name.
Errors in the project theme only show up in the theme editor, never in the presentations.

Next steps

Styling: use the theme’s colors and fonts on your slides.
Components: put components in the project theme to reuse them in every presentation.
Themes reference: every color, font and size for each theme.