Slidev Theme Ninja

A modern, sleek theme for Slidev featuring ninja-inspired aesthetics with smooth animations and flexible layouts.

This theme is designed for developers who want to create impactful presentations with minimal setup.

Features

• 🎨 Multiple Layout Options - Six specialized layouts for different content types
• 🌓 Dark/Light Mode - Seamless color scheme switching
• 💻 Code-First Design - Optimized for technical presentations with Shiki highlighting
• 🎭 Flexible Layouts - Reverse options and customizable components
• ⚡ Smooth Animations - Polished transitions and effects
• 📱 Responsive - Perfect on any screen size

Installation

Install the theme in your Slidev project:

npm install slidev-theme-ninja

Add the following frontmatter to your slides.md:

---
theme: ninja
---

Learn more about how to use a theme.

Layouts

This theme provides the following layouts:

Intro intro

The perfect way to start your presentation with impact.

Light Mode

Dark Mode

Usage:

---
layout: intro
---

# Slidev Theme Ninja
## Slidev Theme Ninja
### Speaker: Ninja

Your tagline or description

Properties:

• Displays title, subtitle, and speaker information
• Animated entrance effects
• Supports both light and dark modes

About Me aboutme

Introduce yourself with style using an image and bio layout.

Light Mode

Dark Mode

Usage:

---
layout: aboutme
media: './avatar.png'
reverse: false
---

# About Me
## Your Name

X @your_handle

- Your background
- Your expertise
- Your interests

Properties:

• media (string): Path to your profile image
• reverse (boolean): Set to true to flip image/text positioning

Text-Image text-image

Present content alongside visuals with flexible positioning.

Standard Layout:

Light Mode

Dark Mode

Reverse Layout:

Light Mode

Dark Mode

Usage:

---
layout: text-image
media: './image.png'
caption: 'Optional image caption'
reverse: false
---

# Your Title

Your detailed content here with markdown support.

- Bullet points
- **Bold text**
- And more...

Properties:

• media (string): Path to your image
• caption (string, optional): Caption displayed below image
• reverse (boolean): Flip layout - image on left when true

New Section new-section

Create dramatic section breaks in your presentation.

Light Mode

Dark Mode

Usage:

---
layout: new-section
---

# New Section Title

![Optional Background Image](./image.png)

Properties:

• Full-screen section divider with animated effects
• Supports background images
• Great for transitioning between topics

Code code

Showcase code with beautiful syntax highlighting.

Light Mode

Dark Mode

Usage:

---
layout: code
---

# Code Examples

```vue
<script setup>
import { TresCanvas } from '@tresjs/core'
</script>

<template>
  <TresCanvas clear-color="#82DBC5">
    <TresMesh>
      <TresBoxGeometry :args="[1, 1, 1]" />
    </TresMesh>
  </TresCanvas>
</template>
```

Properties:

• Syntax highlighting powered by Shiki
• Supports all major programming languages
• Line numbers and highlighting

Default default

A clean, versatile layout for any content.

Light Mode

Dark Mode

Usage:

---
# No layout specified defaults to 'default'
---

# Your Slide Title

Your content here with full markdown support.

Components

FancyLink

A styled link component for external references.

Usage:

<FancyLink href="https://example.com">
  Visit Example
</FancyLink>

LayoutFooter

Automatic footer component displayed on applicable layouts.

TheConsole

Terminal-style console component for command demonstrations.

Contributing

Contributions are welcome! Here's how to get started:

1. Clone the repository
2. Install dependencies: npm install
3. Start the dev server: npm run dev
4. Make your changes
5. Test your changes: npm run build
6. Export screenshots: npm run screenshot
7. Format code: npm run format
8. Submit a pull request

Development Scripts

# Start development server with example slides
npm run dev

# Build the example presentation
npm run build

# Export example slides as PNG images
npm run screenshot

# Format code with Prettier
npm run format

# Create a new release
npm run release

Learn More

• Slidev Documentation
• Theme Customization Guide
• View Example

License

MIT License © 2024 Yuta Noguchi

Made with ❤️ for the Slidev community