vscode-theme-skill
🥈SilverA Claude Code Skill for generating VSCode Color Themes
900Updated 3mo ago
Intermediate30min to implementautomation
Saves ~5 min per use
Quick InstallView Source
git clone https://github.com/jugyo/vscode-theme-skill.gitWorks with:
Claude
Overview
About This Skill
The vscode-theme-skill is a Claude Code automation skill designed to streamline the process of generating custom color themes for Visual Studio Code (VSCode). This skill allows users to create personalized themes that enhance their coding environment, making it visually appealing and tailored to individual preferences. With an intermediate difficulty level, this skill can be implemented in approximately 30 minutes, providing users with a quick way to elevate their development experience. One of the key benefits of the vscode-theme-skill is its ability to save time by automating the tedious aspects of theme creation. Instead of manually adjusting color settings, developers can leverage this skill to generate a cohesive color palette that aligns with their project requirements or personal style. While the exact time savings are unknown, the efficiency gained from automating this process is invaluable for developers looking to optimize their workflow. This skill is particularly beneficial for developers, product managers, and UI/UX designers who are involved in creating or customizing applications. By using the vscode-theme-skill, these professionals can enhance their productivity and focus on more critical aspects of their projects. For instance, a frontend developer can quickly generate a theme that matches the branding of a client’s application, ensuring consistency across the project without getting bogged down in manual adjustments. Implementing the vscode-theme-skill requires an intermediate understanding of VSCode and its theming capabilities. As part of an AI-first workflow, this skill integrates seamlessly into the development process, allowing users to harness AI automation for repetitive tasks. By incorporating this skill, teams can improve their overall efficiency and creativity, ultimately leading to better project outcomes.
How to Use
1. **Define your theme specifications**: Open the prompt template and replace all [PLACEHOLDERS] with your desired values (e.g., `[THEME_NAME]` → "Solarized Dark Pro", `[BASE_COLOR_SCHEME]` → "dark", `[ACCENT_COLOR]` → "#268BD2"). 2. **Run the prompt in your AI assistant**: Paste the customized prompt into Claude, ChatGPT, or your preferred AI tool. Ensure the AI generates a complete `theme.json` file with all required fields. 3. **Validate the output**: Copy the generated JSON into a file named `theme-name.json` and save it in your VSCode themes folder (typically `%USERPROFILE%\.vscode\extensions\themes\` on Windows or `~/.vscode/extensions/themes/` on macOS/Linux). 4. **Apply the theme**: Open VSCode, go to `File > Preferences > Theme > Color Theme`, and select your newly generated theme. Restart VSCode if the theme doesn’t appear immediately. 5. **Refine and iterate**: Use the AI to tweak specific colors or token rules if the theme doesn’t meet your needs. For example, ask the AI to adjust contrast for accessibility or optimize syntax highlighting for a specific language like Python or JavaScript. **Tips for better results**: - Specify exact HEX color codes (e.g., `#FF6B6B` for red) instead of vague terms like "bright red" to avoid inconsistencies. - Mention the primary use case (e.g., "for Python development" or "for pair programming in low light") to guide the AI’s design choices. - Request a preview of the theme in the AI’s response to quickly assess if it meets your expectations before saving the file.
Setup & Installation
Quick Install
No install command available. Check the GitHub repository for manual installation instructions.
Alternative Install (Git Clone)
git clone https://github.com/jugyo/vscode-theme-skillRequirements
- Claude Code or compatible AI agent
- Works with: Claude
Quick Start Guide
1
Install the Skill
Copy the install command above and run it in your terminal.
2
Open Your AI Agent
Launch Claude Code, Cursor, or your preferred AI coding agent.
3
Try It Out
Use the prompt template or examples below to test the skill.
4
Customize
Adapt the skill to your specific use case and workflow.
Usage Examples
Prompt Template
Generate a VSCode color theme JSON file for [THEME_NAME] that matches these specifications: [BASE_COLOR_SCHEME] with [ACCENT_COLOR] as the primary accent. Include syntax highlighting for [LANGUAGE_FOCUS] (e.g., Python, JavaScript, etc.), ensuring high contrast for readability. Make the theme suitable for [USE_CASE] (e.g., 'dark theme for late-night coding', 'light theme for pair programming', 'high-contrast for accessibility'). Use the following structure: { "name": "[THEME_NAME]", "type": "dark|light", "colors": { ... }, "tokenColors": [ ... ] }.Example Output
```json
{
"name": "Aurora Night",
"type": "dark",
"colors": {
"editor.background": "#0A1E2A",
"editor.foreground": "#E0E0E0",
"editorCursor.foreground": "#FF6B6B",
"editor.lineNumber.foreground": "#5A7A8A",
"editor.selectionBackground": "#2A4D5A",
"editor.inactiveSelectionBackground": "#1A2E3A",
"editorIndentGuide.background": "#1A2E3A",
"editorIndentGuide.activeBackground": "#2A4D5A",
"editorBracketMatch.background": "#2A4D5A",
"editorBracketMatch.border": "#FF6B6B",
"editorError.foreground": "#FF6B6B",
"editorWarning.foreground": "#FFD166",
"editorInfo.foreground": "#5CDBD3",
"editorHint.foreground": "#5CDBD3",
"activityBar.background": "#0A1E2A",
"sideBar.background": "#0A1E2A",
"sideBarSectionHeader.background": "#1A2E3A",
"titleBar.activeBackground": "#0A1E2A",
"titleBar.activeForeground": "#E0E0E0",
"statusBar.background": "#1A2E3A",
"statusBar.foreground": "#E0E0E0",
"statusBar.debuggingBackground": "#FF6B6B",
"statusBarItem.hoverBackground": "#2A4D5A",
"tab.activeBackground": "#1A2E3A",
"tab.inactiveBackground": "#0A1E2A",
"tab.border": "#2A4D5A",
"tab.hoverBackground": "#2A4D5A",
"panel.background": "#0A1E2A",
"panelTitle.activeBorder": "#FF6B6B",
"panelTitle.activeForeground": "#E0E0E0",
"panelTitle.inactiveForeground": "#5A7A8A",
"panelTitle.inactiveBorder": "#1A2E3A",
"dropdown.background": "#1A2E3A",
"dropdown.foreground": "#E0E0E0",
"input.background": "#1A2E3A",
"input.foreground": "#E0E0E0",
"input.placeholderForeground": "#5A7A8A",
"inputOption.activeBorder": "#FF6B6B",
"button.background": "#2A4D5A",
"button.foreground": "#E0E0E0",
"button.hoverBackground": "#3A5D6A",
"badge.background": "#FF6B6B",
"badge.foreground": "#0A1E2A"
},
"tokenColors": [
{
"scope": ["comment", "punctuation.definition.comment"],
"settings": {
"foreground": "#5A7A8A",
"fontStyle": "italic"
}
},
{
"scope": ["keyword", "storage.type", "storage.modifier"],
"settings": {
"foreground": "#FF6B6B"
}
},
{
"scope": ["entity.name.function", "entity.name.function-call"],
"settings": {
"foreground": "#5CDBD3"
}
},
{
"scope": ["string", "punctuation.definition.string"],
"settings": {
"foreground": "#A5D8FF"
}
},
{
"scope": ["variable.parameter"],
"settings": {
"foreground": "#FFA07A"
}
},
{
"scope": ["constant.numeric"],
"settings": {
"foreground": "#FFD166"
}
},
{
"scope": ["entity.name.class"],
"settings": {
"foreground": "#FFA07A"
}
},
{
"scope": ["entity.name.type"],
"settings": {
"foreground": "#5CDBD3"
}
},
{
"scope": ["entity.name.tag"],
"settings": {
"foreground": "#FF6B6B"
}
},
{
"scope": ["invalid"],
"settings": {
"foreground": "#FF6B6B",
"background": "#3A1E1E"
}
},
{
"scope": ["support.function"],
"settings": {
"foreground": "#A5D8FF"
}
},
{
"scope": ["support.class"],
"settings": {
"foreground": "#FFA07A"
}
},
{
"scope": ["meta.embedded"],
"settings": {
"foreground": "#E0E0E0"
}
}
]
}
```Apply to these tools
Browse all toolsClaude
AI assistant built for thoughtful, nuanced conversation
Microsoft Teams
Get more done every day with Microsoft Teams – powered by AI
Drata
Automate security compliance and monitor real-time security posture seamlessly.
GPT for work
Automate your spreadsheet tasks with AI power
Respell
Agentic AI Workflow platform
Notion
Connected workspace for docs, wikis, and projects
Compatible MCP servers
Browse all MCP servers
Find the right skills for your stack
Take a free 3-minute scan and get personalized AI skill recommendations.
Take free scan