slidev-theme-pixel

A minimalist, typographic theme for Slidev. Black and white by default. Monospace accents. Random pixel grid on section slides : unique every load ! 👾

Install

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

---
theme: pixel
---

Learn more about how to use a theme.

Primary color

Set themeConfig.primary in your root frontmatter to give the theme a brand color. Defaults to #000000.

---
theme: pixel
themeConfig:
  primary: '#e92528'
---

Any CSS color works. The section layout always uses this color as its background with white text, so contrast stays readable regardless of your choice.

Fonts

Default font pair: Plus Jakarta Sans (sans) + Atkinson Hyperlegible Mono (mono). Override in frontmatter:

fonts:
  sans: Roboto
  mono: Space Mono

Cover slide

---
theme: pixel
layout: cover
title: "Course Title"
subtitle: "Course subtitle"
author: "Firstname Lastname"
email: "[email protected]"
github: "https://github.com/example/repo"
logos:
  - /images/logo-a.svg
  - src: /images/logo-b.svg
    height: 48px
---

Toggle dark mode with the D key.

Layouts

cover

Full-bleed cover with title, subtitle, author, and logos. Fields: title, subtitle, author, email, github, logos (array of src strings or { src, height } objects).

section

Dark slide for transitions between parts. Background uses --slidev-theme-primary (default black), text always white. Random pixel grid overlay, unique every load.

---
layout: section
---

# Section title

_Subtitle_

default

Standard content slide. Use .ref for a vertical source label (top-right).

---

# Slide title

Short sentences. One idea per bullet.

- First point
- Second point · with **emphasis**

<div class="ref">Source · Author, <em>Title</em> (Year)</div>

two-cols

Two-column layout with an optional ::title:: slot.

---
layout: two-cols
---

::title::
# Title

::left::

Left column content.

::right::

Right column content.

two-cols-bottom

Two columns with a full-width zone below.

---
layout: two-cols-bottom
---

::title::
# Title

::left::

Left column.

::right::

Right column.

::bottom::

Full-width content below both columns.

grid

CSS grid. Set cols (number of columns). Prose elements (h1-h3, p, pre, blockquote) span all columns automatically. Components (<Figure>, <Card>, ...) become grid items.

---
layout: grid
cols: 3
---

# Title

<Figure src="/img/photo.jpg" caption="Author, <em>Title</em> (Year)" />
<Figure src="/img/photo2.jpg" caption="..." />
<Figure src="/img/photo3.jpg" caption="..." />

image-right

Image on the right, text on the left. backgroundSize: contain (default) or cover.

---
layout: image-right
image: /images/photo.jpg
backgroundSize: contain
caption: "Author, <em>Title</em> (Year)"
---

# Title

Text on the left.

image-full

Full-bleed image with optional caption and link.

---
layout: image-full
image: /images/photo.jpg
caption: "<strong>Image title</strong><br>Author · Year"
href: "https://..."
---

caption accepts inline HTML. href makes the caption a link. backgroundSize: cover (default) or contain.

fact

Single bold statement, vertically centered.

---
layout: fact
---

**1 in 5** data visualisations contains a misleading element.

photowall

Full-screen photo grid. Always dark. Automatic layout based on image count.

---
layout: photowall
images:
  - src: "/images/photo.jpg"
    caption: "Author · <em>Title</em> (Year)"
    href: "https://..."
  - src: "/images/photo2.jpg"
    caption: "Author · <em>Title</em> (Year)"
---

href is optional (makes the image a link). caption accepts inline HTML.

| Count | Layout | |---|---| | 2 | Side by side | | 3 | Equal thirds | | 4 | Two tall left · two stacked right | | 5-6 | 3-column grid · random spans | | 7-9 | 4-column grid · random spans |

Components

<Figure>

Image with optional caption and link.

<Figure
  src="/img/photo.jpg"
  caption="Author · <em>Title</em> (Year)"
  href="https://..."
  alt="Description"
/>

Props: src, caption (inline HTML), href (optional), alt.

<Card>

Terminal-style card. Use inside layout: grid.

---
layout: grid
cols: 3
---

<Card tag="concept" title="Title">Body text.</Card>
<Card color="#e92528" tag="warning" title="Title">Body text.</Card>

Props: tag, title, footer (optional), color (CSS color, tints header and border).

Semantic color conventions:

<Card color="#6b7280" tag="note"    title="Note">Neutral information.</Card>
<Card color="#16a34a" tag="tip"     title="Tip">Positive advice.</Card>
<Card color="#d97706" tag="warning" title="Warning">Something to verify.</Card>
<Card color="#e92528" tag="danger"  title="Danger">Critical mistake to avoid.</Card>

Source labels

Two ways to add a source to any slide · both render as a vertical label, top-right.

Frontmatter (preferred for simple citations):

---
references: "Author, <em>Title</em> (Year)"
---

Array form (joined with ·):

---
references:
  - "Author, <em>Title</em> (Year)"
  - "Second source"
---

Inline (when you need a link or richer HTML):

<div class="ref">Source · Author, <em>Title</em> (Year) · <a href="...">link</a></div>

CSS classes

Utilities

| Class | Effect | |---|---| | .ref | Vertical source label, top-right | | .mono | Force monospace font | | .muted | Muted text color | | .primary | Primary text color |

Icons

Includes Pixelify Icons (816 pixel-art icons, installed automatically).

<pixelarticons-star />
<pixelarticons-arrow-right class="text-2xl" />

Browse at icones.js.org (collection: pixelarticons).

Development

npm install
npm run dev

License

MIT