Theming example

Now you can start using global theme options to set slide as you like.

import { PresentifyProvider } from 'presentify';

<PresentifyProvider options={{useFiraCode: true, theme: 'dark', backgroundColor: '#636e72'}}>
# Introducing Hooks

### What are they? And why do we need them?

</PresentifyProvider>

But you want to first slide to be different? No problem, you can override global options for each slide. You need to use frontmatter syntax but change --- to +++ to avoid conflict with slide separator.

import { PresentifyProvider } from 'presentify';

<PresentifyProvider options={{useFiraCode: true, theme: 'dark', backgroundColor: '#636e72'}}>
+++
backgroundImg: 'https://picsum.photos/536/354'
+++
# Introducing Hooks

### What are they? And why do we need them?

---

# UseState

### `useState` is React Hook that allows you to add state to a functional component.

</PresentifyProvider>

Now your first slide has different background and the rest of the slides are using global options.

Global Options

Option	Type	Optional	Default	Description
theme	dark / light	✔️	light	code syntax highlighter theme (dark = vsDark, light = github)
useFiraCode	boolean	✔️	false	use firaCode font with ligatures in Code syntax highlighter
className	string	✔️	none	set className to slide parent div
backgroundColor	string	✔️	white	set background color to slide
backgroundImg	string	✔️	none	set background Image to slide
layout	normal / center	✔️	center	set layout of slide

Slide Options

Option	Type	Optional	Default	Description
className	string	✔️	none	set className to slide parent div
backgroundColor	string	✔️	white	set background color to slide
backgroundImg	string	✔️	none	set background Image to slide
layout	normal / center	✔️	center	set layout of slide