# slidev-theme-easy

> [![NPM version](https://img.shields.io/npm/v/slidev-theme-easy?color=3AB9D4&label=)](https://www.npmjs.com/package/slidev-theme-easy)

Latest version **0.3.1** (published 2024-01-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install slidev-theme-easy
pnpm add slidev-theme-easy
yarn add slidev-theme-easy
bun add slidev-theme-easy
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.1 |
| Published | 2024-01-25 |
| First published | 2022-12-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=18.0.0 |
| Dependencies | 6 |
| Unpacked size | 2.8 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Can Stand |
| Maintainers | canstand |
| Keywords | slidev-theme, slidev |

## Links

- npm: https://www.npmjs.com/package/slidev-theme-easy
- Repository: https://github.com/canstand/slidev-theme-easy
- Homepage: https://github.com/canstand/slidev-theme-easy#readme
- Issues: https://github.com/canstand/slidev-theme-easy/issues
- npm.io page: https://npm.io/package/slidev-theme-easy

## Dependencies (6)

- [unocss](https://npm.io/package/unocss.md) ^0.58.3
- [@slidev/types](https://npm.io/package/@slidev/types.md) ^0.46.3
- [theme-vitesse](https://npm.io/package/theme-vitesse.md) ^0.7.5
- [prism-theme-vars](https://npm.io/package/prism-theme-vars.md) ^0.2.4
- [@iconify-json/mdi](https://npm.io/package/@iconify-json/mdi.md) ^1.1.64
- [codemirror-theme-vars](https://npm.io/package/codemirror-theme-vars.md) ^0.1.2

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 0.3.1 (latest) — 2024-01-25
- 0.3.0 — 2024-01-21
- 0.2.2 — 2023-11-24
- 0.2.1 — 2023-10-11
- 0.2.0 — 2023-08-08
- 0.1.0 — 2022-12-04

## README

# slidev-theme-easy

[![NPM version](https://img.shields.io/npm/v/slidev-theme-easy?color=3AB9D4&label=)](https://www.npmjs.com/package/slidev-theme-easy)

A simple theme for [Slidev](https://github.com/slidevjs/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.

<pre><code>---
theme: <b>easy</b>
---</code></pre>

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

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

Learn more about [how to use a theme](https://sli.dev/themes/use).

## Layouts

This theme provides the following layouts:

### Cover

Usage:
```md
layout: cover
background: 'https://source.unsplash.com/collection/94734566/1920x1080'
```
![cover](example-export/001.png)

### Intro
Usage:
```md
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](example-export/002.png)

### Image-Left

Usage:
```md
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](example-export/005.png)

```md
layout: image-left
equal: true
imageFrame: true
```
![image-left](example-export/003.png)

### Image-Right

Usage:
```md
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](example-export/004.png)

### Image-Bottom

Usage:
```md
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](example-export/006.png)

## Contributing

- `pnpm install`
- `pnpm dev` to start theme preview of `example.md`
- Edit the `example.md` and style to see the changes
- `pnpm export` to generate the preview PDF
- `pnpm screenshot` to generate the preview PNG

---
_Source: https://npm.io/package/slidev-theme-easy · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._