--- name: vscode-theme description: Generate VSCode color themes, package them as .vsix files, and install to VSCode. Use when creating custom VSCode themes, designing color schemes, or when the user mentions VSCode theme, color theme, dark theme, or light theme. --- # VSCode Theme Generator Generate custom VSCode color themes from scratch, package them, and install them directly to VSCode. ## Prerequisites The following tools are required: - `@vscode/vsce` (VSCode Extension Manager) - `code` command (VSCode CLI) Check if tools are installed: ```bash which vsce || echo "vsce is not installed" which code || echo "code command is not installed" ``` Install if missing: ```bash # vsce npm install -g @vscode/vsce # code command: In VSCode, press Cmd+Shift+P → "Shell Command: Install 'code' command in PATH" ``` ## Theme Builder This skill includes a theme builder script that enables efficient theme creation by editing individual part files. ### Directory Structure ``` / ├── .vscodeignore # Excludes parts/ from .vsix ├── package.json # Extension manifest ├── parts/ # Edit these files to customize │ ├── base.json # name, type, semanticHighlighting │ ├── colors-editor.json # Editor colors │ ├── colors-ui.json # UI colors (sidebar, tabs, etc.) │ ├── colors-terminal.json # Terminal colors │ ├── tokens.json # Syntax highlighting │ └── semantic.json # Semantic token colors └── themes/ └── -color-theme.json # Generated by merge ``` ### Builder Commands ```bash # Initialize a new theme from template node /theme-builder.js init "" [--type dark|light] # Merge parts into final theme file node /theme-builder.js merge # Package as .vsix node /theme-builder.js package # Bump version node /theme-builder.js bump [patch|minor|major] ``` ## Instructions ### Step 1: Gather theme requirements Ask the user for: - Theme name (e.g., "Ocean Blue") - Theme type: dark or light - Color preferences (base colors, accent colors) - Any specific style inspiration ### Step 2: Initialize theme ```bash node /theme-builder.js init "" --type dark ``` Replace: - ``: Path to this skill directory - ``: lowercase with hyphens (e.g., `ocean-blue`) - ``: display name (e.g., `Ocean Blue`) ### Step 3: Edit part files Edit the files in `/parts/` to customize the theme. #### parts/base.json ```json { "name": "Theme Name", "type": "dark", "semanticHighlighting": true } ``` #### parts/colors-editor.json Editor-related colors: | Property | Description | |----------|-------------| | `editor.background` | Main editor background | | `editor.foreground` | Default text color | | `editorLineNumber.foreground` | Line number color | | `editorCursor.foreground` | Cursor color | | `editor.selectionBackground` | Selection highlight | | `editorBracketMatch.*` | Matching bracket highlight | | `editorError.foreground` | Error underline | | `editorWarning.foreground` | Warning underline | #### parts/colors-ui.json UI element colors: | Property | Description | |----------|-------------| | `activityBar.background` | Left sidebar icon bar | | `sideBar.background` | File explorer background | | `statusBar.background` | Bottom status bar | | `titleBar.activeBackground` | Window title bar | | `tab.activeBackground` | Active tab | | `tab.inactiveBackground` | Inactive tabs | | `list.activeSelectionBackground` | Selected item in lists | | `input.background` | Input field background | | `button.background` | Button background | #### parts/colors-terminal.json Terminal colors including ANSI colors: | Property | Description | |----------|-------------| | `terminal.background` | Terminal background | | `terminal.foreground` | Terminal text | | `terminal.ansiBlack` - `terminal.ansiWhite` | ANSI colors | | `terminal.ansiBrightBlack` - `terminal.ansiBrightWhite` | Bright ANSI colors | #### parts/tokens.json Syntax highlighting (array of token rules): | Scope | Applies to | |-------|-----------| | `comment` | Comments | | `string` | String literals | | `keyword` | `if`, `for`, `const`, etc. | | `storage.type` | Type keywords | | `entity.name.function` | Function names | | `entity.name.type` | Type/class names | | `variable` | Variables | | `constant.numeric` | Numbers | | `entity.name.tag` | HTML/XML tags | | `entity.other.attribute-name` | Attributes | Example token rule: ```json { "scope": ["comment", "punctuation.definition.comment"], "settings": { "foreground": "#6A9955", "fontStyle": "italic" } } ``` #### parts/semantic.json Semantic token colors (optional, object format): ```json { "function": "#DCDCAA", "variable.readonly": "#4FC1FF" } ``` ### Step 4: Merge and package ```bash # Merge parts into theme file node /theme-builder.js merge # Package as .vsix node /theme-builder.js package # Install to VSCode code --install-extension /-0.0.1.vsix ``` ### Step 5: Notify user After installation: > Theme installed successfully! > Press `Cmd+K Cmd+T` (Mac) or `Ctrl+K Ctrl+T` (Windows/Linux) to select your new theme. ## Updating an Existing Theme When updating a theme, bump the version before packaging: ```bash # Bump version (default: patch) node /theme-builder.js bump # Merge and package node /theme-builder.js merge node /theme-builder.js package # Install updated theme code --install-extension /-.vsix ``` ## Color Design Tips ### Dark themes - Background: `#1a1a2e` to `#2d2d44` - Foreground: `#d4d4d4` to `#eaeaea` - Limit accent colors to 1-2 ### Light themes - Background: `#ffffff` to `#f5f5f5` - Foreground: `#1a1a1a` to `#333333` - Use muted accent colors ### Transparency Use alpha channel for subtle effects: `#ffffff40` (last two digits = opacity 00-ff) ### Accessibility Aim for reasonable contrast between text and background for readability. ## Troubleshooting ### Theme not appearing Run `Developer: Reload Window` from command palette.

vscode-theme

Installation

SKILL.md