# How to List Available Themes for the Web Video Presentation Skill

> Discover how to list available themes for the Web Video Presentation skill. Explore the THEMES.md file, scan directories, or query programmatically for seamless theme management.

- Repository: [ConardLi/garden-skills](https://github.com/ConardLi/garden-skills)
- Tags: how-to-guide
- Published: 2026-08-29

---

**You can list available themes for the Web Video Presentation skill by reading the [`THEMES.md`](https://github.com/ConardLi/garden-skills/blob/main/THEMES.md) reference file, scanning the `skills/web-video-presentation/themes/` directory for [`theme.json`](https://github.com/ConardLi/garden-skills/blob/main/theme.json) files, or querying the metadata programmatically using shell scripts or Python.**

The **Web Video Presentation** skill in the ConardLi/garden-skills repository ships with pre-defined visual themes that control the color palette and styling of generated presentation videos. Each theme is self-contained in its own subdirectory under `skills/web-video-presentation/themes/`, making enumeration straightforward through file system operations or documentation parsing.

## Where Themes Are Stored

Themes reside in individual subdirectories beneath `skills/web-video-presentation/themes/`. Every theme folder contains two essential files:

- **[`theme.json`](https://github.com/ConardLi/garden-skills/blob/main/theme.json)** – Metadata including the theme ID, display name, description, mood tags, and color preview data.
- **[`tokens.css`](https://github.com/ConardLi/garden-skills/blob/main/tokens.css)** – CSS custom properties defining the color palette and style tokens used during video rendering.

For example, the **Indigo Porcelain** theme is located at [`skills/web-video-presentation/themes/indigo-porcelain/theme.json`](https://github.com/ConardLi/garden-skills/blob/main/skills/web-video-presentation/themes/indigo-porcelain/theme.json), while the **Warm Keynote** theme stores its CSS variables in [`skills/web-video-presentation/themes/warm-keynote/tokens.css`](https://github.com/ConardLi/garden-skills/blob/main/skills/web-video-presentation/themes/warm-keynote/tokens.css).

## Method 1: Read the Reference Documentation

The repository maintains a human-readable index at [`skills/web-video-presentation/references/THEMES.md`](https://github.com/ConardLi/garden-skills/blob/main/skills/web-video-presentation/references/THEMES.md). This markdown file lists every available theme alongside a brief description of its visual style.

To view the list in a browser, open the raw file from the repository:

```bash
curl https://raw.githubusercontent.com/ConardLi/garden-skills/main/skills/web-video-presentation/references/THEMES.md

```

The file contains entries formatted as:

- **indigo-porcelain** – Deep-indigo ink on porcelain white
- **warm-keynote** – Warm, inviting color scheme for keynote-style videos

## Method 2: Scan the File System

You can enumerate themes directly from the file system by locating all [`theme.json`](https://github.com/ConardLi/garden-skills/blob/main/theme.json) files within the themes directory.

List all theme directories:

```bash
ls skills/web-video-presentation/themes/

```

Display the metadata for every installed theme:

```bash
for f in skills/web-video-presentation/themes/*/theme.json; do
  echo "----- $(basename $(dirname $f)) -----"
  cat "$f"
done

```

For a concise list of theme IDs only:

```bash
find skills/web-video-presentation/themes -mindepth 2 -maxdepth 2 -name theme.json \
  -exec dirname {} \; | xargs -n1 basename

```

This outputs the directory names (such as `indigo-porcelain` and `warm-keynote`) which serve as the canonical theme identifiers.

## Method 3: Parse theme.json Programmatically

For applications that need structured data, parse the [`theme.json`](https://github.com/ConardLi/garden-skills/blob/main/theme.json) files directly. Each JSON file contains fields such as `id`, `name`, `description`, `mood`, `bestFor`, and a `preview` object with color hex codes.

Here is a complete Python helper to extract theme information:

```python
import json
from pathlib import Path

THEME_ROOT = Path("skills/web-video-presentation/themes")

def list_themes():
    themes = []
    for theme_dir in THEME_ROOT.iterdir():
        json_path = theme_dir / "theme.json"
        if json_path.is_file():
            data = json.loads(json_path.read_text())
            themes.append({
                "id": data["id"],
                "name": data["name"],
                "description": data["description"],
                "preview": data["preview"]
            })
    return themes

if __name__ == "__main__":
    for t in list_themes():
        print(f"{t['id']}: {t['name']}\n  {t['description']}\n  Preview: {t['preview']}\n")

```

Running this script against the ConardLi/garden-skills repository produces output similar to:

```

indigo-porcelain: Indigo Porcelain
  Deep-indigo ink on porcelain white — the indigo IS the ink...
  Preview: {'shell': '#e4e8ec', 'surface': '#f1f3f5', 'text': '#0a1f3d', 'accent': '#1e3a8a'}

```

## Understanding Theme File Structure

When listing themes programmatically, understanding the schema helps determine what data is available for each theme.

The [`theme.json`](https://github.com/ConardLi/garden-skills/blob/main/theme.json) file defines:

- **id** – The URL-safe identifier matching the directory name
- **name** – Human-readable display title
- **description** – Detailed explanation of the visual style
- **mood** – Tags describing the emotional tone (e.g., "professional", "warm")
- **bestFor** – Recommended use cases for the theme
- **preview** – Dictionary of color codes for UI rendering

The companion [`tokens.css`](https://github.com/ConardLi/garden-skills/blob/main/tokens.css) file in each theme directory contains the actual CSS custom properties (such as `--color-shell` and `--color-accent`) that the skill uses at render time. While [`theme.json`](https://github.com/ConardLi/garden-skills/blob/main/theme.json) provides the metadata needed to list and select themes, [`tokens.css`](https://github.com/ConardLi/garden-skills/blob/main/tokens.css) provides the implementation details.

## Summary

- Themes are stored in subdirectories under `skills/web-video-presentation/themes/` in the ConardLi/garden-skills repository.
- The [`skills/web-video-presentation/references/THEMES.md`](https://github.com/ConardLi/garden-skills/blob/main/skills/web-video-presentation/references/THEMES.md) file provides a human-readable list of all available themes.
- Each theme contains a [`theme.json`](https://github.com/ConardLi/garden-skills/blob/main/theme.json) file with metadata (id, name, description, preview colors) and a [`tokens.css`](https://github.com/ConardLi/garden-skills/blob/main/tokens.css) file with style definitions.
- Use shell commands to list theme directories or Python scripts to parse JSON metadata for programmatic enumeration.
- Theme IDs correspond directly to folder names, making filesystem traversal the most reliable discovery method.

## Frequently Asked Questions

### What file contains the human-readable list of available themes?

The file [`skills/web-video-presentation/references/THEMES.md`](https://github.com/ConardLi/garden-skills/blob/main/skills/web-video-presentation/references/THEMES.md) maintains the official list. It describes each theme (such as Indigo Porcelain and Warm Keynote) with brief explanations of their visual characteristics and intended use cases.

### How do I access theme metadata programmatically?

Parse the [`theme.json`](https://github.com/ConardLi/garden-skills/blob/main/theme.json) file inside each theme directory. According to the source code in `skills/web-video-presentation/themes/`, every theme directory contains this JSON file with fields like `id`, `name`, `description`, and `preview` colors. You can read these files using any JSON parser in Python, Node.js, or other languages.

### What is the difference between theme.json and tokens.css?

The [`theme.json`](https://github.com/ConardLi/garden-skills/blob/main/theme.json) file contains descriptive metadata about the theme (its name, description, and color preview), while [`tokens.css`](https://github.com/ConardLi/garden-skills/blob/main/tokens.css) contains the actual CSS custom properties that define the color palette. When listing themes, you only need [`theme.json`](https://github.com/ConardLi/garden-skills/blob/main/theme.json); when rendering videos, the skill uses [`tokens.css`](https://github.com/ConardLi/garden-skills/blob/main/tokens.css) to apply the visual styles.

### Can I create custom themes for the Web Video Presentation skill?

Yes, the directory structure suggests you can add custom themes by creating a new subdirectory under `skills/web-video-presentation/themes/` containing both a [`theme.json`](https://github.com/ConardLi/garden-skills/blob/main/theme.json) file with valid metadata and a [`tokens.css`](https://github.com/ConardLi/garden-skills/blob/main/tokens.css) file defining your color tokens. Ensure your theme ID in [`theme.json`](https://github.com/ConardLi/garden-skills/blob/main/theme.json) matches the directory name for consistency with the enumeration scripts.