Coston Slidev Theme

A professional Slidev theme with comprehensive layout options, flexible background support, and logo positioning for corporate presentations and workshops.

Features

• 🎨 Universal Background Support - Every layout accepts background images, colors, or gradients
• 🖼️ Logo Positioning - Add logos to any slide with logoLeft and logoRight props
• 📐 Multiple Layouts - 10+ pre-built layouts for different content types
• 🎯 Two-Column Layout - New flexible two-column layout for side-by-side content
• 🌓 Dark/Light Mode - Built-in support for both color schemes
• 💅 Customizable - Built on Vue.js with full styling control

Installation

npm install --save slidev-theme-coston

Add these scripts to your package.json:

{
  "scripts": {
    "dev": "slidev",
    "build": "slidev build",
    "start": "slidev --open"
  }
}

Usage

Add the theme to your slides.md:

---
theme: slidev-theme-coston
---

Available Layouts

Cover Layout

Title/cover slide with background image support and logo positioning.

---
layout: cover
background: /assets/bg-blue-title.png
logoLeft: /assets/logo.svg
---

# Presentation Title

@Author

Default Layout

Standard content slide with full customization.

---
layout: default
background: "#1a202c"
logoRight: /assets/logo.svg
---

# Slide Title

Your content here

Image-Right Layout

Content on the left, image on the right, with background support on content area.

---
layout: image-right
image: https://example.com/image.jpg
background: "#2D3748"
logoLeft: /assets/logo.svg
---

# Slide Title

Content with image on the right

Image-Left Layout

Image on the left, content on the right, with background support on content area.

---
layout: image-left
image: https://example.com/image.jpg
background: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
---

# Slide Title

Content with image on the left

Two-Cols Layout

Two equal-width columns for side-by-side content with optional header.

Basic usage:

---
layout: two-cols
background: "#f8f9fa"
---

::left::

# Left Column

Content here

::right::

# Right Column

Content here

With header text above columns:

---
layout: two-cols
---

# Slide Title

Any content here appears above both columns

::left::

Left content

::right::

Right content

Section Layout

Section divider slides with centered text.

---
layout: section
background: https://images.unsplash.com/photo-xxx
logoLeft: /assets/logo.svg
logoRight: /assets/logo.svg
---

# Section Title

Statement Layout

Emphasis slides for key statements.

---
layout: statement
background: "#667eea"
---

# This is a Statement

A powerful statement slide

Fact Layout

Highlighting important facts or statistics.

---
layout: fact
background: https://example.com/image.jpg
---

# 100%

Fact information with supporting details

Quote Layout

Quote attribution with styling.

---
layout: quote
background: "#2D3748"
---

# "Notable quote"

Attribution

Center Layout

Centered content with optional background.

---
layout: center
background: "#4F46E5"
logoLeft: /assets/logo.svg
---

# Centered Content

Intro Layout

Introduction slide layout.

---
layout: intro
background: /assets/bg-intro.png
---

# Introduction Slide

This is an intro layout

Background Options

All layouts support three types of backgrounds:

1. External URLs

---
background: https://images.unsplash.com/photo-xxx
---

2. Local Files

Place images in the public/ folder and reference with absolute paths:

---
background: /assets/my-image.jpg
---

Important: Don't use relative paths like ./image.png - they break after build.

3. Colors & Gradients

---
background: "#4F46E5"
---

---
background: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
---

Logo Support

Add logos to any slide using logoLeft and logoRight props:

---
logoLeft: /assets/logo-left.svg
logoRight: /assets/logo-right.svg
---

Logos work with:

• External URLs: logoLeft: "https://example.com/logo.svg"
• Local files: logoLeft: "/assets/logo.svg"
• Both props can be used together
• Automatically contrasts with backgrounds

Development

# Start dev server with example presentation
npm run dev

# Build presentation
npm run build

# Lint code
npm run lint

# Format code
npm run format

License

MIT

Author

Coston