BB-Dev VS Code Themes

A collection of dark VS Code themes with a built-in visual theme editor.

Developing the Extension

Get up and running straight away

• Press F5 to open a new window with your extension loaded.
• Open the color theme picker with File > Preferences > Theme > Color Theme, or use the Preferences: Color Theme command (Ctrl+K Ctrl+T) and pick your theme.
• Open a file to see syntax highlighting in action.

Creating a VSIX for Installation

1. Install the VS Code extension tool if you don't have it:

   npm install -g @vscode/vsce

2. Package the extension:

   vsce package

3. Install the generated .vsix file in VS Code via Extensions > ... > Install from VSIX

Theme Customization

Colors in the theme files follow the VS Code color theme format. The token colorization uses standard TextMate scopes.

Theme Editor

This project includes a custom-built visual theme editor located in the theme-editor/ folder. The editor was created by Claude Code to simplify customizing VS Code theme colors.

Features

• Live Preview - See theme changes in real-time with a VS Code-like mock UI
• Color Controls - Organized sections: Title Bar, Activity Bar, Side Bar, Editor, Status Bar, and Tabs
• SketchPicker Integration - Full color picker with hex input, RGB sliders, and preset colors
• JSON Export - View and copy the complete theme JSON with syntax highlighting
• Persistence - Colors are automatically saved to localStorage

Running the Theme Editor

1. Navigate to the theme-editor folder:

   cd theme-editor

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

4. Open your browser to the URL shown (typically http://localhost:5173)