# Web-Video-Presentation Skill: Complete Guide to All 23 Built-In Themes

> Explore 23 built-in themes for the web-video-presentation skill. Customize your presentations with pre-configured design tokens and CSS variables. Get the complete guide now.

- Repository: [ConardLi/garden-skills](https://github.com/ConardLi/garden-skills)
- Tags: tutorial
- Published: 2026-09-02

---

**The web-video-presentation skill includes 23 built-in themes located in `skills/web-video-presentation/themes/`, each providing pre-configured design tokens via [`theme.json`](https://github.com/ConardLi/garden-skills/blob/main/theme.json) and compiled CSS variables in [`tokens.css`](https://github.com/ConardLi/garden-skills/blob/main/tokens.css).**

The ConardLi/garden-skills repository hosts the web-video-presentation skill, a specialized tool for generating video presentations with consistent styling. This skill ships with 23 distinct built-in themes ranging from professional editorial designs to experimental creative styles, all stored in the `themes/` directory with standardized configuration files.

## Complete List of Built-In Themes

The web-video-presentation skill provides 23 themes covering diverse aesthetic categories. Each theme resides in its own subdirectory under `skills/web-video-presentation/themes/`:

| Theme Name | Directory Path |
|------------|----------------|
| Warm Keynote | `themes/warm-keynote/` |
| Vintage Editorial | `themes/vintage-editorial/` |
| Terminal Green | `themes/terminal-green/` |
| Swiss IKB | `themes/swiss-ikb/` |
| Sunset Zine | `themes/sunset-zine/` |
| Split Canvas | `themes/split-canvas/` |
| Pastel Dream | `themes/pastel-dream/` |
| Paper Press | `themes/paper-press/` |
| Newsroom | `themes/newsroom/` |
| Neon Cyber | `themes/neon-cyber/` |
| Monochrome Print | `themes/monochrome-print/` |
| Midnight Press | `themes/midnight-press/` |
| Kraft Paper | `themes/kraft-paper/` |
| Indigo Porcelain | `themes/indigo-porcelain/` |
| Forest Ink | `themes/forest-ink/` |
| Electric Studio | `themes/electric-studio/` |
| Dune | `themes/dune/` |
| Dark Botanical | `themes/dark-botanical/` |
| Creative Voltage | `themes/creative-voltage/` |
| Chalk Garden | `themes/chalk-garden/` |
| Bold Signal | `themes/bold-signal/` |
| Blueprint | `themes/blueprint/` |
| Bauhaus Bold | `themes/bauhaus-bold/` |

Each theme directory contains two critical files: [`theme.json`](https://github.com/ConardLi/garden-skills/blob/main/theme.json) defining the design tokens and [`tokens.css`](https://github.com/ConardLi/garden-skills/blob/main/tokens.css) providing the compiled CSS variables.

## Theme Architecture and File Structure

Understanding the file structure is essential for customizing or debugging themes in the web-video-presentation skill.

### Core Theme Files

Every theme follows a consistent structure within `skills/web-video-presentation/themes/`:

- **[`theme.json`](https://github.com/ConardLi/garden-skills/blob/main/theme.json)**: Defines colors, typography, spacing, and other design tokens in JSON format
- **[`tokens.css`](https://github.com/ConardLi/garden-skills/blob/main/tokens.css)**: Compiled CSS custom properties (variables) generated from the JSON configuration

### Key Skill Integration Files

Several files manage theme integration across the skill:

- [`skills/web-video-presentation/manifest.json`](https://github.com/ConardLi/garden-skills/blob/main/skills/web-video-presentation/manifest.json): Declares the default theme and skill metadata
- [`skills/web-video-presentation/SKILL.md`](https://github.com/ConardLi/garden-skills/blob/main/skills/web-video-presentation/SKILL.md): Contains human-readable documentation and usage instructions
- [`skills/web-video-presentation/references/THEMES.md`](https://github.com/ConardLi/garden-skills/blob/main/skills/web-video-presentation/references/THEMES.md): Documents theme conventions and token structure standards
- [`skills/web-video-presentation/templates/src/registry/types.ts`](https://github.com/ConardLi/garden-skills/blob/main/skills/web-video-presentation/templates/src/registry/types.ts): TypeScript definitions including the `ThemeId` union type enumerating all 23 theme identifiers

## How to Select and Apply Themes

The web-video-presentation skill supports three methods for theme selection: manifest configuration, runtime JavaScript API, and direct CSS inclusion.

### Configuring the Default Theme in Manifest

Set the default theme by modifying `defaultTheme` in the skill manifest:

```json
// skills/web-video-presentation/manifest.json
{
  "name": "web-video-presentation",
  "description": "Create a video-presentation with styled slides.",
  "defaultTheme": "warm-keynote"
}

```

Replace `"warm-keynote"` with any valid theme folder name from the 23 available options.

### Runtime Theme Selection via JavaScript

Override the default theme programmatically when initializing the presentation:

```javascript
import { initPresentation } from '@garden-skills/web-video-presentation';

await initPresentation({
  theme: 'electric-studio',
  // additional configuration options
});

```

The `theme` parameter accepts any of the 23 theme identifiers defined in the `ThemeId` union type.

### Direct CSS Variable Access

For custom implementations or external styling, import the theme's CSS variables directly:

```html
<link rel="stylesheet" href="/skills/web-video-presentation/themes/electric-studio/tokens.css">
<style>
  body {
    background: var(--background);
    color: var(--primary);
  }
</style>

```

This method provides access to all design tokens defined in the source [`theme.json`](https://github.com/ConardLi/garden-skills/blob/main/theme.json) without requiring JavaScript initialization.

## Summary

- The **web-video-presentation skill** includes **23 built-in themes** ranging from editorial styles like *Vintage Editorial* and *Newsroom* to experimental designs like *Neon Cyber* and *Electric Studio*
- All themes reside in `skills/web-video-presentation/themes/` with standardized [`theme.json`](https://github.com/ConardLi/garden-skills/blob/main/theme.json) and [`tokens.css`](https://github.com/ConardLi/garden-skills/blob/main/tokens.css) files
- Theme selection supports three methods: **manifest configuration**, **runtime JavaScript API**, and **direct CSS import**
- The `ThemeId` TypeScript type in [`templates/src/registry/types.ts`](https://github.com/ConardLi/garden-skills/blob/main/templates/src/registry/types.ts) provides compile-time validation of theme names according to the ConardLi/garden-skills source code

## Frequently Asked Questions

### How do I create a custom theme for the web-video-presentation skill?

Create a new folder in `skills/web-video-presentation/themes/` containing a [`theme.json`](https://github.com/ConardLi/garden-skills/blob/main/theme.json) file with your design tokens and a [`tokens.css`](https://github.com/ConardLi/garden-skills/blob/main/tokens.css) file with the compiled variables. Follow the structure defined in [`references/THEMES.md`](https://github.com/ConardLi/garden-skills/blob/main/references/THEMES.md) and ensure your theme ID is added to the `ThemeId` union type in [`templates/src/registry/types.ts`](https://github.com/ConardLi/garden-skills/blob/main/templates/src/registry/types.ts).

### Can I switch themes dynamically during a presentation?

Yes. The runtime JavaScript API supports dynamic theme switching by calling `initPresentation()` with a different `theme` parameter value, or by updating the theme property on an existing presentation instance if the implementation supports reactive updates.

### Where are theme colors and fonts defined?

Theme specifications reside in each theme's [`theme.json`](https://github.com/ConardLi/garden-skills/blob/main/theme.json) file within `skills/web-video-presentation/themes/[theme-name]/`. These JSON files define colors, typography scales, spacing values, and other design tokens, which are compiled into CSS custom properties in the corresponding [`tokens.css`](https://github.com/ConardLi/garden-skills/blob/main/tokens.css) files.

### What is the default theme if none is specified?

The default theme is defined in [`skills/web-video-presentation/manifest.json`](https://github.com/ConardLi/garden-skills/blob/main/skills/web-video-presentation/manifest.json) under the `defaultTheme` key. If this field is omitted or invalid, the skill typically falls back to `warm-keynote` or the first available theme alphabetically, though specific fallback behavior should be verified in the skill's initialization logic.