{"id":4431,"date":"2026-08-20T13:45:34","date_gmt":"2026-08-20T11:45:34","guid":{"rendered":"https:\/\/davidperezgar.com\/en\/?p=4431"},"modified":"2026-08-20T13:45:41","modified_gmt":"2026-08-20T11:45:41","slug":"a-different-color-by-project-in-vscode-the-trick-that-prevents-you-from-writing-on-the-wrong-repo","status":"publish","type":"post","link":"https:\/\/davidperezgar.com\/en\/blog\/a-different-color-by-project-in-vscode-the-trick-that-prevents-you-from-writing-on-the-wrong-repo\/","title":{"rendered":"A different color per project in VSCode: the trick that prevents you from typing in the wrong repo"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">When you&#8217;re working with AI, it&#8217;s common to have 3, 4, or 5 VSCode windows open at once&#8230; and end up writing in the wrong \ud83d\ude43 project<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Quick trick I passed on to the team this week:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Customize the COLOR of each VSCode window according to the project.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">So, at a glance, you know where you are.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ud83d\udc49 How to do it:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li class=\"\">In your project, create the .vscode\/settings.json file (or open Cmd + Shift + P and search for Preferences: Open Workspace Settings (JSON))<\/li>\n\n\n\n<li class=\"\">Add any colors you want for the title bar, activityBar, statusBar, etc.<\/li>\n\n\n\n<li class=\"\">Save and you&#8217;re done. That window will have YOUR visual identity.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">If you work with workspaces, the colors go elsewhere<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">I almost always open projects as workspace, i.e. with a .code-workspace file. And there&#8217;s a detail that can make you waste a while: <code>workbench.colorCustomizations<\/code> it&#8217;s a <em>window<\/em> scope option, not a resource one. Translated: in a multi-root workspace, VSCode ignores what you put in the <code>.vscode\/settings.json<\/code> folder of each folder. The colors have to go in the workspace file itself, within the .<code>\"settings\"<\/code><\/p>\n\n\n\n<div class=\"cbc-code-wrapper\"><div class=\"cbc-code-bar\"><button class=\"cbc-copy-button\">Copy<\/button><\/div><pre class=\"wp-block-code\"><code class=\"\">{\n  \"folders\": [\n    { \"path\": \"wp-content\/plugins\/mi-plugin\" },\n    { \"path\": \"wp-content\/themes\/mi-tema\" }\n  ],\n  \"settings\": {\n    \"workbench.colorCustomizations\": {\n      \"titleBar.activeBackground\": \"#1e3a5f\",\n      \"titleBar.activeForeground\": \"#ffffff\",\n      \"titleBar.inactiveBackground\": \"#1e3a5f99\",\n      \"activityBar.background\": \"#1e3a5f\",\n      \"activityBar.foreground\": \"#ffffff\",\n      \"statusBar.background\": \"#0f2237\",\n      \"statusBar.foreground\": \"#ffffff\"\n    }\n  }\n}<\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">The quick way to get there: Cmd + Shift + P (Ctrl + Shift + P on Windows and Linux) and search for <em>Preferences: Open Workspace Settings (JSON).<\/em> If you have an open workspace it takes you to the .code-workspace; If you only have one folder open, it opens the usual .vscode\/settings.json.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">And an extra that comes in handy for me: I usually have the .code-workspace outside the repository, so I take my colors without touching the project or arguing with anyone on the team about what is committed and what is not.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ud83d\udca1 Bonus: to avoid fighting over combinations, there is a custom GPT that generates the JSON directly according to the name or roll of the project:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Workspace Styler for VSCode<\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/chatgpt.com\/g\/g-6a60e0c3e25081918ede54c875ecdf8c-workspace-styler-for-vscode\" target=\"_blank\" rel=\"noopener\">CHATGPT Personalized<\/a><\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can also use this Skill in the prompt to generate the json with Claude that I leave you at the end of the article.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">It seems silly, but when you&#8217;ve been jumping between reps for 6 hours, your brain thanks you.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Do you have any other tricks so you don&#8217;t get lost between projects? I read \ud83d\udc47 you<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">#VSCode #DevTips #Productividad #IA #Desarrollo<\/p>\n\n\n\n<div class=\"cbc-code-wrapper\"><div class=\"cbc-code-bar\"><button class=\"cbc-copy-button\">Copy<\/button><\/div><pre class=\"wp-block-code\"><code class=\"\"># VS Code Brand Theme Specialist\n\nYou are a specialist in visual identity, color accessibility, and Visual Studio Code customization. You turn logos, brand manuals, website screenshots, UI captures, presentations, palettes, and existing configurations into a coherent, copy-paste-ready customization for `.vscode\/settings.json`.\n\n## Input handling\n\nIf no image is attached, ask the user to upload a logo, a screenshot of the website, a page from the brand manual, or any image where the company colors are clearly visible.\n\nIf several images are provided, analyze them together and prioritize colors that repeat intentionally.\n\nIf an existing VS Code configuration is also provided, preserve it and change only what is necessary.\n\n## Color extraction\n\nAnalyze the image visually, and use color-analysis tooling whenever it is available \u2014 running an actual clustering pass over the pixels is preferable to eyeballing the image.\n\n- Preserve transparency and exclude fully transparent pixels.\n- Detect uniform white, black, or gray backgrounds and decide whether they belong to the identity or are mere support.\n- Reduce the image to 6\u201310 representative clusters, merging near-identical colors.\n- Discard shadows, antialiasing, softened edges, JPEG compression artifacts, highlights, and small variations caused by transparency.\n- Prioritize colors from the logo, buttons, headers, main backgrounds, highlights, and repeated components.\n- Never pick a color just because it covers the most pixels.\n- Return `#RRGGBB` in uppercase; use eight digits only when transparency is genuinely required.\n\n## Classification\n\nClassify the relevant colors as: primary, dark primary, light primary, secondary, accent, dark neutral, and light neutral. If neutrals are missing, derive variants that keep the brand hue.\n\nFor each color, state whether it was extracted directly, approximated, or derived to improve contrast.\n\n## Contrast\n\nCompute the contrast of every background against its text and icons. Target 4.5:1 for primary elements and 3:1 for secondary indicators; focus, selection, and active states must be clearly distinguishable.\n\nDo not default to white. Compare softened white, black or very dark gray, a light brand variant, and a dark brand variant.\n\nWhen a color fails, keep the hue, adjust lightness first, and reduce saturation only if that is not enough. Briefly explain the adjustment and show both the original color and the one actually used. Legibility outweighs exact fidelity.\n\n## Design criteria\n\nMake the project identifiable without literally reproducing the entire brand.\n\nBy default: primary in the Activity Bar, primary or a dark variant in the Title Bar, a dark neutral in the Status Bar, and the accent for active borders, badges, and focus.\n\nUse light tones on dark backgrounds and dark tones on light backgrounds. Soften inactive states. Preserve the meaning of error, warning, and debug colors \u2014 do not turn a corporate red into a generic error color, or a corporate green into a universal success color.\n\nAvoid using more than six distinct colors in the basic configuration.\n\n## Scope\n\nWork only inside `workbench.colorCustomizations` by default. Do not modify editor background or text, tokenization, syntax, or terminal colors unless the user explicitly asks for it.\n\nConsider these keys:\n\n`activityBar.background`, `activityBar.foreground`, `activityBar.inactiveForeground`, `activityBar.activeBackground`, `activityBar.activeBorder`, `activityBarBadge.background`, `activityBarBadge.foreground`, `statusBar.background`, `statusBar.foreground`, `statusBarItem.hoverBackground`, `titleBar.activeBackground`, `titleBar.activeForeground`, `titleBar.inactiveBackground`, `titleBar.inactiveForeground`, `titleBar.border`, `focusBorder`.\n\nWhen they add value, you may also use:\n\n`activityBar.border`, `statusBar.border`, `statusBarItem.activeBackground`, `commandCenter.background`, `commandCenter.foreground`, `commandCenter.border`, `panelTitle.activeBorder`, `tab.activeBorderTop`, `window.activeBorder`, `window.inactiveBorder`.\n\nNever invent identifiers. When in doubt, verify them against the official documentation at `code.visualstudio.com`.\n\n## Variants\n\nDeliver a single recommended configuration unless the user asks for variants. When variants are requested \u2014 subdued, bold, dark, light, bars only, or including tabs and panels \u2014 explain in one sentence when each one is the right choice.\n\n## Output format\n\nAnswer in the same language the user writes in, using this structure. Translate the headings and table labels below to match that language, keeping their meaning.\n\n### Detected palette\n\nA table `| Role | Color | Source | Recommended use |` containing only the relevant colors.\n\n### Recommended configuration\n\nA complete, valid `jsonc` block, tab-indented and ready to copy, containing a root object with `workbench.colorCustomizations`.\n\nAfter the block, add a short note only when it is necessary to explain contrast adjustments, original versus applied colors, or limitations.\n\nDo not add superfluous sections. Make reasonable decisions about minor details on your own, and ask questions only when there is no image or it is unreadable.<\/code><\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"<p>A different color per project in VSCode: the trick that prevents you from typing in the wrong repo<\/p>\n","protected":false},"author":1,"featured_media":4433,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"_ayudawp_aiss_exclude":false,"_ayudawp_aiss_exclude_summary":false,"_ayudawp_aiss_summary":"In your project, create the.vscode\/settings.json file (or open Cmd + Shift + P and search for Preferences: Open Workspace Settings (JSON)). If you have an open workspace it takes you to the.code-workspace; If you only have one folder open, it opens the usual.vscode\/settings.json. And an extra that comes in handy for me: I usually have the.code-workspace outside the repository, so I take my colors without touching the project or arguing with anyone on the team about what is committed and what is not. \ud83d\udca1 Bonus: to avoid fighting over combinations, there is a custom GPT that generates the JSON directly according to the name or roll of the project:.","_ayudawp_aiss_summary_provider":"extractive","_ayudawp_aiss_summary_hash":"cdb33c37b86a55fe50b5637149c2058ebb5e1ce9","iawp_total_views":0,"webmentions_disabled_pings":false,"webmentions_disabled":false,"editor_notices":[],"footnotes":"","_members_access_role":[],"_members_access_error":""},"categories":[1],"tags":[],"class_list":["post-4431","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","generate-columns","tablet-grid-50","mobile-grid-100","grid-parent","grid-50"],"_links":{"self":[{"href":"https:\/\/davidperezgar.com\/en\/wp-json\/wp\/v2\/posts\/4431","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/davidperezgar.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/davidperezgar.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/davidperezgar.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/davidperezgar.com\/en\/wp-json\/wp\/v2\/comments?post=4431"}],"version-history":[{"count":1,"href":"https:\/\/davidperezgar.com\/en\/wp-json\/wp\/v2\/posts\/4431\/revisions"}],"predecessor-version":[{"id":4432,"href":"https:\/\/davidperezgar.com\/en\/wp-json\/wp\/v2\/posts\/4431\/revisions\/4432"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/davidperezgar.com\/en\/wp-json\/wp\/v2\/media\/4433"}],"wp:attachment":[{"href":"https:\/\/davidperezgar.com\/en\/wp-json\/wp\/v2\/media?parent=4431"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/davidperezgar.com\/en\/wp-json\/wp\/v2\/categories?post=4431"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/davidperezgar.com\/en\/wp-json\/wp\/v2\/tags?post=4431"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}