How to Change Folding Bar Colors in Code Editors

You can customize folding bar colors in most modern code editors to improve caret visibility, with methods varying by editor. In Visual Studio, use Tools → Options → Environment → Fonts and Colors → Display items → Collapsible Region to change folding bar colors. For VS Code, you can modify folding colors through workbench.colorCustomizations in settings.json, and use "editor.showFoldingControls": "always" to make folding icons persistently visible.

Contents

• Visual Studio Solutions
• Visual Studio Code Customization
• Cross-Editor Theme Conversion
• Alternative Approaches
• Editor-Specific Solutions

Visual Studio Solutions

In Visual Studio, you have direct control over folding bar colors through the interface:

1. Change Folding Bar Colors:

   • Navigate to Tools → Options → Environment → Fonts and Colors
   • Select “Display items” and find “Collapsible Region”
   • Modify the foreground and background colors to make folding bars more visible
   • This is the most straightforward method to address color overlap issues with the caret

2. Caret Color Customization:

   • You can also adjust caret colors separately using the same Fonts and Colors menu
   • Search for “caret” and modify the Foreground and Background colors
   • This alternative approach helps maintain visibility when the caret overlaps with folding elements

The cursor caret does not always honor the ‘Caret (Primary)’ settings in some configurations, so you may need to experiment with different color combinations

Visual Studio Code Customization

For VS Code, folding bar customization requires editing settings:

JSON Method (Recommended)

Add these settings to your settings.json file:

{
  "workbench.colorCustomizations": {
    "editor.foldingHighlightBackground": "#ff000080",
    "editor.lineHighlightBorder": "#00000000"
  },
  "editor.showFoldingControls": "always"
}

Key Settings Explained:

• editor.foldingHighlightBackground: Controls the background color of folding highlights (use hex with alpha for transparency)
• editor.showFoldingControls: Set to "always" to persistently show folding icons, even when not actively hovering
• editor.lineHighlightBorder: Can be used to adjust border visibility around folded regions

Alternative: Extension Solutions

If you need more advanced folding customization, consider:

• Bracket Colorizer 2: Provides visual bracket matching which can help with overall code structure visibility
• Theme-based solutions: Many VS Code themes include custom folding bar styling

According to the VS Code documentation, you can find these extensions in the Visual Studio Marketplace or search within the extensions sidebar once you open your editor.

Cross-Editor Theme Conversion

If you use multiple editors, you can share themes across platforms:

VS Code to Sublime Text Conversion

Several tools exist to convert VS Code themes to Sublime Text:

1. code-theme-converter by tobiastimm:

   • Open-source project specifically for theme conversion
   • Currently supports converting to Sublime color schemes
   • More editor support planned

2. sublime-vscode-plus package:

   • Direct Visual Studio Code color scheme port for Sublime
   • Available on GitHub for manual installation

VS Code to IntelliJ IDEA Conversion

• Similar conversion tools exist for IntelliJ IDEA
• The code-theme-converter project mentions IntelliJ support is in development
• This allows you to maintain consistent theming across different development environments

Alternative Approaches

Indentation-Based Solutions

If you prefer folding bars to be visually separated from the main code area (like Visual Studio does):

1. Visual Studio Default Behavior:

   • The folding bars are rendered with a small indent by default
   • This creates natural separation from the caret position
   • This is the behavior you’re asking about as an alternative

2. VS Code Settings for Indentation:

   • While VS Code doesn’t have a direct “indent folding bars” setting
   • You can adjust the overall editor indentation to create visual separation
   • Consider using "editor.renderIndentGuides": true for additional visual structure

Caret Position Optimization

For better caret visibility regardless of folding bar colors:

1. Adjust Caret Width:

   json

   {
     "editor.cursorWidth": 3
   }
   

2. Caret Style Options:

   • Block caret: "editor.cursorStyle": "block"
   • Line caret: "editor.cursorStyle": "line"
   • Underline caret: "editor.cursorStyle": "underline"

Editor-Specific Solutions

Sublime Text

• Use Package Control to install theme managers
• Folding bar colors are controlled through theme files (.tmtheme)
• Convert VS Code themes using the sublime-vscode-plus package
• Sublime Text offers flexibility in changing window UI to match preferences

Atom

• Install Bracket Colorizer package for enhanced bracket visibility
• Folding customization is primarily theme-based
• Atom’s extensive customization system allows for deep UI modifications

IntelliJ IDEA

• Use Rainbow Brackets plugin for enhanced bracket visibility
• Theme customization through IDE settings
• Folding behavior can be adjusted in editor settings

Vim/Neovim

• Rainbow Parentheses Improved plugin provides bracket colorization
• Folding customization through .vimrc configuration
• Color schemes control folding appearance

Sources

1. Stack Overflow - How can I change the colour of the folding bars?
2. Microsoft Learn - Collapse and Expand Regions of Code
3. Stack Overflow - Make the code folding icons always show in Visual Studio Code
4. Medium - 5 Awesome Code Editor Tips And Tricks
5. DEV Community - Convert any Visual Studio Code Theme to Sublime Text 3 or IntelliJ IDEA
6. GitHub - sublime-vscode-plus
7. Stack Overflow - Change visual studio caret color

Conclusion

Customizing folding bar colors is achievable in most major code editors, with Visual Studio offering the most straightforward approach through its Fonts and Colors menu. For VS Code users, JSON-based customization provides flexible control over folding appearance and behavior. If you work across multiple editors, theme conversion tools help maintain consistent visual environments. When dealing with caret visibility issues, consider both direct color modifications and alternative approaches like adjusting caret width or style. The key is to experiment with different settings to find the optimal balance between visual appeal and functionality for your specific development workflow.