🎨 Colorize Folder Tree

⚠️ Critical:

• Only works with VS Code 1.113.0 and later.
• This extension modifies a single internal workbench HTML file.
• It needs admin rights only when you turn it on or off.
• After toggling, VS Code can run as a standard user.
• Back up your workbench file before using it.
• Updating VS Code may require re-enabling the extension.

Refer to the "Important Notes" section below for more details.

Rainbow nesting borders for folders in the VS Code Explorer — like bracket pair colorization, but for your file tree.

Colorize Folder Tree adds colored borders to indent guides in the Explorer, cycling through 6 distinct colors based on nesting depth. Instantly see how deep you are in a folder structure at a glance.

📁 src                    → Level 1 → 🟡 Gold
  📁 components           → Level 2 → 🟣 Magenta
    📁 ui                 → Level 3 → 🔵 Blue
      📁 buttons          → Level 4 → 🟢 Green
        📁 icons          → Level 5 → 🟠 Orange
          📁 svg          → Level 6 → 🩵 Cyan
            📁 animated   → Level 7 → 🟡 Gold (cycles back)

✨ Features

• Rainbow indent guide borders — 6 colors that cycle infinitely, no matter how deep the nesting
• Colored folder collapse/expand icons — folder icons (codicons) match the border color for that depth
• Mode support — choose hover‑only(VS Code default) or always‑visible borders
• Status bar indicator — shows whether Colorize Folder Tree is ON or OFF and displays the current mode
• Zero performance impact — pure CSS, no JavaScript overhead at runtime
• Automatic backup — safely backs up VS Code's workbench HTML before patching

🚀 Getting Started

1. Open the Command Palette (Ctrl+Shift+P / Cmd+Shift+P)
2. Type one of the following commands:

• "Colorize Folder Tree: Enable Rainbow Tree On Hover [DEFAULT]" to show the folder tree only on hover (can be enabled by toggle button in the status bar)

• "Colorize Folder Tree: Enable Rainbow Tree Always" to show all tree lines continuously (can only be enabled by the Command Palette)

3. Click "Restart VS Code" when prompted
4. Done! Your Explorer indent guides now have rainbow borders.

📋 Commands

🎨 Default Color Palette

The colors are inspired by popular bracket pair colorization themes:

Colors cycle back after level 6 — so level 7 = Gold again, level 8 = Magenta, etc.

Customizing Colors

Edit colorize-folder-tree.css in the extension directory. Each color is a simple CSS rule:

/* Change Gold to Red */
.indent-guide:nth-child(6n+1) {
    border-color: #e06c75 !important;
}

You can also adjust the matching icon color rules toward the bottom of the file; they use selectors like .monaco-list-row .codicon combined with the same 6n+X math.

⚠️ Important Notes

"Corrupt Installation" Warning

After enabling Colorize Folder Tree, VS Code will show a warning:

"Your Code installation appears to be corrupt."

This is expected and harmless. It appears because the extension modifies VS Code's internal workbench HTML to inject CSS. Click "Don't Show Again" to dismiss it permanently.

Admin / Write Permissions Required

This extension patches a file inside VS Code's installation directory, which means you only need administrator (or elevated) rights when enabling or disabling the rainbow borders. After the style has been injected (or removed) you can run VS Code normally as a standard user.

You still need write access to the installation path while toggling:

• Windows (User Install): %LOCALAPPDATA%\Programs\Microsoft VS Code\ — ✅ no admin needed
• Windows (System Install): C:\Program Files\Microsoft VS Code\ — ❌ requires admin (run the enable/disable command from an elevated prompt)
• macOS: /Applications/Visual Studio Code.app/ — may need sudo
• Linux: /usr/share/code/ — may need sudo

Tip: If you don't have admin rights, reinstall VS Code using the User Installer instead of the System Installer.

VS Code Updates

When VS Code updates, it may overwrite the patched workbench HTML. Simply re-run "Colorize Folder Tree: Enable Rainbow Tree" after an update. As of now the extension is compatible with VS Code 1.113.0 and later, but if you update to a new major version of VS Code, you may need to wait for an extension update to ensure compatibility.

🧩 How It Works

1. On Enable, the extension:

   • Locates VS Code's internal workbench.html (or workbench.esm.html)
   • Creates a backup of the original file
   • Injects a <style> tag with the rainbow border CSS
   • Prompts you to restart VS Code

2. On Disable, the extension:

   • Restores the original backup
   • Cleans up backup files
   • Prompts you to restart VS Code

The CSS targets .indent-guide:nth-child(6n+X) elements in the Explorer tree, which are the indent guide lines next to nested folders and files, and also colors the corresponding collapse/expand icons (.codicon) using the same depth-based math.

Enjoy! 🎨