{"id":4679,"date":"2026-07-23T08:10:02","date_gmt":"2026-07-23T06:10:02","guid":{"rendered":"https:\/\/davidperezgar.com\/blog\/un-color-distinto-por-proyecto-en-vscode-el-truco-que-evita-que-escribas-en-el-repo-equivocado\/"},"modified":"2026-08-20T13:41:06","modified_gmt":"2026-08-20T11:41:06","slug":"un-color-distinto-por-proyecto-en-vscode-el-truco-que-evita-que-escribas-en-el-repo-equivocado","status":"publish","type":"post","link":"https:\/\/davidperezgar.com\/es\/un-color-distinto-por-proyecto-en-vscode-el-truco-que-evita-que-escribas-en-el-repo-equivocado\/","title":{"rendered":"Un color distinto por proyecto en VSCode: el truco que evita que escribas en el repo equivocado"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Cuando trabajas con IA, es habitual tener 3, 4 o 5 ventanas de VSCode abiertas a la vez... y acabar escribiendo en el proyecto equivocado \ud83d\ude43<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Truco r\u00e1pido que le pas\u00e9 al equipo esta semana:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Personalizar el COLOR de cada ventana de VSCode seg\u00fan el proyecto.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">As\u00ed, de un vistazo, sabes d\u00f3nde est\u00e1s.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ud83d\udc49 C\u00f3mo hacerlo:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li class=\"\">En tu proyecto, crea el archivo .vscode\/settings.json (o abre Cmd + Shift + P y busca Preferences: Open Workspace Settings (JSON))<\/li>\n\n\n\n<li class=\"\">A\u00f1ade los colores que quieras para la barra de t\u00edtulo, la activityBar, el statusBar, etc.<\/li>\n\n\n\n<li class=\"\">Guarda y listo. Esa ventana tendr\u00e1 SU identidad visual.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Si trabajas con workspaces, los colores van en otro sitio<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Yo casi siempre abro los proyectos como workspace, es decir, con un archivo .code-workspace. Y ah\u00ed hay un detalle que te puede hacer perder un rato: <code>workbench.colorCustomizations<\/code> es una opci\u00f3n de \u00e1mbito <em>window<\/em> (de ventana), no de recurso. Traducido: en un workspace multi-root, VSCode ignora lo que pongas en el <code>.vscode\/settings.json<\/code> de cada carpeta. Los colores tienen que ir en el propio archivo del workspace, dentro del bloque <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\">La forma r\u00e1pida de llegar ah\u00ed: Cmd + Shift + P (Ctrl + Shift + P en Windows y Linux) y busca <em>Preferences: Open Workspace Settings (JSON)<\/em>. Si tienes un workspace abierto te lleva al .code-workspace; si solo tienes una carpeta abierta, te abre el .vscode\/settings.json de siempre.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Y un extra que a m\u00ed me viene bien: el .code-workspace normalmente lo tengo fuera del repositorio, as\u00ed que me llevo mis colores sin tocar el proyecto ni discutir con nadie del equipo sobre qu\u00e9 se commitea y qu\u00e9 no.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ud83d\udca1 Bonus: para no pelearte eligiendo combinaciones, hay un GPT personalizado que te genera el JSON directamente seg\u00fan el nombre o el rollo del proyecto:<\/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 Personalizado<\/a><\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Tambi\u00e9n puedes usar este Skill en el prompt para generar el json con Claude que te dejo al final del art\u00edculo.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Parece una tonter\u00eda, pero cuando llevas 6 horas saltando entre repos, el cerebro te lo agradece.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u00bfTen\u00e9is alg\u00fan otro truco para no perderos entre proyectos? Os leo \ud83d\udc47<\/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>Un color distinto por proyecto en VSCode: el truco que evita que escribas en el repo equivocado<\/p>\n","protected":false},"author":1,"featured_media":4776,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":39,"footnotes":""},"categories":[1,168],"tags":[],"class_list":["post-4679","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-desarrollo-web"],"_links":{"self":[{"href":"https:\/\/davidperezgar.com\/es\/wp-json\/wp\/v2\/posts\/4679","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/davidperezgar.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/davidperezgar.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/davidperezgar.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/davidperezgar.com\/es\/wp-json\/wp\/v2\/comments?post=4679"}],"version-history":[{"count":1,"href":"https:\/\/davidperezgar.com\/es\/wp-json\/wp\/v2\/posts\/4679\/revisions"}],"predecessor-version":[{"id":5982,"href":"https:\/\/davidperezgar.com\/es\/wp-json\/wp\/v2\/posts\/4679\/revisions\/5982"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/davidperezgar.com\/es\/wp-json\/wp\/v2\/media\/4776"}],"wp:attachment":[{"href":"https:\/\/davidperezgar.com\/es\/wp-json\/wp\/v2\/media?parent=4679"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/davidperezgar.com\/es\/wp-json\/wp\/v2\/categories?post=4679"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/davidperezgar.com\/es\/wp-json\/wp\/v2\/tags?post=4679"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}