Themes
One deck in each built-in theme.
Click a theme to see the deck in it. The colour scheme of the site, light or dark, is also the colour scheme of the deck.
Themes
One deck in each built-in theme. Change theme: in the headmatter.
1 / 8
Slide 1 of 8: Themes
| Theme | Look | For |
|---|---|---|
default | Neutral greys and indigo | All decks |
paper | Warm paper and ink, serif headings | Talks that tell a story |
frost | Cool greys and teal, rounded corners, a glow on title slides | Technical talks |
contrast | Black and white, bold headings, a contrast of 7:1 or more | Bright rooms, and people with low vision |
vivid | Pink and violet, narrow headings, section slides in colour | Keynotes |
To use a theme, set theme in the headmatter, the frontmatter of the first
slide:
---
theme: frost
---Each theme has colours for light and for dark. The colorScheme key
selects one, and auto follows the system. To change a colour of the
theme, set its property in your stylesheet. Your rules win over the theme:
[data-deck] {
--deck-accent: light-dark(#0f766e, #5eead4);
}See Themes for the properties, and for how to make a theme with a name of its own.
Source
---
title: Themes
# A built-in theme: default, paper, frost, contrast or vivid.
theme: paper
layout: cover
---
# Themes
One deck in each built-in theme. Change `theme:` in the headmatter.
<!-- notes
Each theme has colours for light and for dark. `colorScheme:` in the
headmatter selects one, or `auto` follows the system.
-->
---
layout: section
---
# Text
---
# What a theme changes
- The colours, for light and for dark
- The font of the headings
- The look of some layouts, such as `section` and `quote`
<!-- step -->
A theme keeps the size of the text and the padding. A deck that fits with
one theme fits with all of them.
---
# Code
```ts {2-3} title="greet.ts"
export function greet(name: string): string {
// The highlight dims the other lines.
return `Hello, ${name}!`;
}
```
---
# Which theme
| Theme | For |
| ---------- | --------------------------- |
| `default` | All decks |
| `paper` | Talks that tell a story |
| `frost` | Technical talks |
| `contrast` | Bright rooms and low vision |
| `vivid` | Keynotes |
---
layout: fact
---
# 4.5 : 1
The lowest contrast of text in a theme
---
layout: quote
---
> Design is not just what it looks like and feels like. Design is how it
> works.
Steve Jobs
---
layout: statement
---
# Make it yours
Change any colour of a theme in `style.css`
To present this deck from a clone of the repository, run this command in
the examples folder:
bun run dev themes