OpenFeature Slidev Theme

An OpenFeature-branded theme for Slidev. It features the official OpenFeature color palette, wave-style background decorations, and Poppins / Architects Daughter typography — with full support for light and dark mode.

Install

Add the following frontmatter to your slides.md. Start Slidev then it will prompt you to install the theme automatically.

---
theme: '@openfeature/slidev-theme-open-feature'
---

Learn more about how to use a theme.

Layouts

This theme provides the following layouts:

Layout	Description
cover	Title slide with centered content and prominent wave background
default	Standard content slide with a title bar and body area
end	Closing slide with centered content and prominent wave background
image-left	Two-column layout with an image on the left (e.g., image: path/to/image.jpg)
image-right	Two-column layout with an image on the right (e.g., image: path/to/image.jpg)
intro	Introduction / about slide with centered content
section	Section divider with large centered heading
two-cols	Two-column layout using default and ::right:: slots

Components

This theme provides the following components:

<OpenFeatureLogo>

Renders the official OpenFeature horizontal wordmark logo with automatic light/dark mode support.

Prop	Type	Default	Description
size	string	'200px'	Width of the logo.

<OpenFeatureLogo size="250px" />

<PresenterProfile>

Displays a presenter's photo (or initials fallback), name, and company.

Prop	Type	Default	Description
name	string	—	Required. Presenter's full name.
company	string	—	Company or organization name.
photo	string	—	URL or path to the presenter's photo.
size	string	'80px'	Diameter of the avatar circle.

When photo is omitted, the avatar displays the presenter's initials on an accent-colored background.

The photo prop accepts both remote URLs and local files placed in the public/ directory:

<!-- Remote URL -->
<PresenterProfile name="Jane Doe" company="CNCF" photo="https://example.com/jane.jpg" />

<!-- Local file from public/ -->
<PresenterProfile name="Jane Doe" company="CNCF" photo="/images/jane.jpg" />

<QRCode>

Generates and displays a QR code from a URL. Rendered client-side with no network dependency.

Prop	Type	Default	Description
url	string	—	Required. The URL to encode.
size	string	'200px'	Width and height of the QR code.
color	string	'#000000'	Foreground color of the QR code.
bgColor	string	'#ffffff'	Background color of the QR code.

<QRCode url="https://openfeature.dev" size="200px" />

Contributing

• npm install
• npm run dev to start theme preview of example.md
• Edit the example.md and style to see the changes
• npm run export to generate the preview PDF
• npm run screenshot to generate the preview PNG

Note: Node.js >= 18 is required. The repo includes an .nvmrc (Node 22) — run nvm use to pick it up.