Customise slide visuals

Apr 10, 2020

You can now give your videos a unique look by customising slide visuals using CSS, for example to apply your corporate brand visuals or fonts.

Play the video below to see this in action:

Creating your own theme CSS

To customise the slide theme, create a CSS file and add it to the project, along with any other resources you reference in the CSS file (such as fonts or background pattern images). For example, the file below will change the heading font:

@font-face {
  font-family: 'Waltograph UI';
  src: url('waltographUI.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

h1, h2 {
  font-family: 'Waltograph UI';
  color: #839751;
  text-decoration: underline;
}

Then, just activate it for a scene using the theme stage direction.

(theme: font.css)

```md
# Heading 1

## heading 2
```

You can also apply the theme to all the scenes by using the theme header:

---
theme: font.css
---

```md
# Heading 1

## heading 2
```

For more information, check out the theme format reference. For an example project that shows custom fonts, backgrounds and backdrops, check out the Slide CSS Theme example on GitHub.