VS Code Theme Generator

An interactive CLI tool that converts Ghostty terminal color schemes into VS Code theme extensions. Built with TypeScript, React (Ink), and Vite for a seamless terminal-based experience.

✨ Features

Interactive Workflow - Step-by-step guided process for creating VS Code themes
Ghostty Compatibility - Supports multiple Ghostty color scheme formats (palette and key-value)
Professional Output - Generates complete VS Code extension packages ready for publishing
Validation & Error Handling - Comprehensive input validation with helpful error messages
Customizable Options - Configure theme metadata, descriptions, and advanced settings
Zero Configuration - Works out of the box with sensible defaults

🚀 Quick Start

The easiest way to use the VS Code Theme Generator is with bunx (no installation required):

bunx vscode-theme-gen

This will start the interactive CLI that guides you through:

Theme File Selection - Choose your Ghostty color scheme file
Theme Configuration - Set name, description, and metadata
Options Selection - Configure advanced settings and preferences
Generation - Create your complete VS Code extension

📖 Usage

Basic Usage

bunx vscode-theme-gen

The interactive interface will guide you through each step:

┌─ VS Code Theme Generator ─────────────────────────────────────┐
│                                                               │
│  Convert Ghostty color schemes to VS Code themes              │
│                                                               │
│  Select theme file: /path/to/your/ghostty-theme.conf          │
│  Theme name: My Custom Theme                                  │
│  Description: A beautiful theme based on my terminal          │
│  Author: Your Name                                            │
│                                                               │
│  Generating extension...                                      │
│                                                               │
└───────────────────────────────────────────────────────────────┘

Command Line Options

# Show help
bunx vscode-theme-gen --help

# Show version
bunx vscode-theme-gen --version

Generated Extension Structure

The tool creates a complete VS Code extension with:

my-custom-theme/
├── package.json           # Extension metadata and configuration
├── README.md             # Documentation with preview images
├── CHANGELOG.md          # Version history
├── icon.png              # Extension icon
├── themes/
│   └── my-custom-theme.json    # Your VS Code theme
└── vsc-extension-quickstart.md # VS Code extension guide

🛠️ Development

Prerequisites

Bun or Node.js 18+
Git

Setup

# Clone the repository
git clone https://github.com/corismix/vscode-theme-gen.git
cd vscode-theme-gen

# Install dependencies
bun install

# Run in development mode
bun run dev

Available Scripts

Command	Description
`bun start`	Build production version and run CLI
`bun run dev`	Build development version and run CLI
`bun run build`	Production build (creates executable with shebang)
`bun run build:dev`	Development build with debugging
`bun run build:watch`	Watch mode for development
`bun run type-check`	TypeScript type checking (no emit)
`bun run lint`	ESLint with zero warnings policy
`bun run lint:fix`	Auto-fix linting issues
`bun run format`	Format code with Prettier
`bun run format:check`	Check formatting without changes
`bun run test`	Run all tests with verbose output
`bun run test:watch`	Run tests in watch mode
`bun run test:coverage`	Generate coverage reports
`bun run test:ui`	Visual test interface
`bun run clean`	Remove build artifacts and cache
`bun run analyze:bundle`	Analyze bundle size and content

Project Structure

src/
├── components/           # React components for the CLI interface
│   ├── steps/           # Step-by-step workflow components
│   └── ui/              # Reusable UI components
├── lib/                 # Core business logic
│   ├── theme-generator.ts    # Ghostty → VS Code conversion
│   ├── file-generators.ts    # Extension file generation
│   └── utils-simple.ts       # Utilities and validation
├── types/               # TypeScript type definitions
├── config/              # Configuration and limits
└── test/                # Test files and utilities

Key Technologies

TypeScript - Type-safe development
React + Ink - Terminal UI components
Vite - Fast build system with custom plugins
Meow - CLI argument parsing
Vitest - Testing framework

🧪 Testing

# Run all tests
bun run test

# Run tests in watch mode
bun run test:watch

# Generate coverage report
bun run test:coverage

# Open visual test interface
bun run test:ui

Test Categories

Unit Tests - Core business logic (theme generation, file operations)
Integration Tests - CLI workflows and file system interactions
Coverage Reports - Focus on critical paths and error handling

🤝 Contributing

Fork the repository
Create a feature branch (git checkout -b feature/amazing-feature)
Make your changes following the existing code style
Run tests (bun run test) and linting (bun run lint)
Commit your changes (git commit -m 'Add amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

Development Guidelines

Zero-warning ESLint policy - All warnings must be resolved
Strict TypeScript - No implicit any, all types must be defined
Test coverage - Add tests for new features and bug fixes
Documentation - Update README and comments for significant changes

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

Ghostty - The excellent terminal emulator that inspired this tool
Ink - For making beautiful terminal interfaces with React
VS Code - The editor that makes development a joy

Made with ❤️ using Claude Code