Slidev-theme-easy NPM

slidev-theme-easy

A simple theme for Slidev. The main feature is the support for configuring theme colors with transparency.

Install

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

Theme color variables must provide both HEX and RGB formats to support background color transparency.

---
themeConfig:
  primary: #ff0000
  primary-rgb: '255,0,0'
---

Learn more about how to use a theme.

Layouts

This theme provides the following layouts:

Cover

Usage:

layout: cover
background: 'https://source.unsplash.com/collection/94734566/1920x1080'

cover

Intro

Usage:

layout: intro
image: 'https://source.unsplash.com/collection/94734566/1920x1080'
class: opacity-75
# use `left: false` to toggle the color block to the right
left: true

intro

Image-Left

Usage:

layout: image-left

# the image source
image: ./path/to/the/image

# a custom class name to the content
class: my-cool-content-on-the-right

# equal or one third
equal: false

# show frame
imageFrame: false

image-left

layout: image-left
equal: true
imageFrame: true

image-left

Image-Right

Usage:

layout: image-right

# the image source
image: ./path/to/the/image

# a custom class name to the content
class: my-cool-content-on-the-left

# equal or one third
equal: true

# show frame
imageFrame: false

image-right

Image-Bottom

Usage:

layout: image-bottom

# the image source, can be empty (show bg color)
image: ./path/to/the/image

# a custom class name to the content
class: my-cool-content

# image height, one-sixth or one-third
thin: true

image-bottom