DEV Community

Ahmad Awais ⚡️ for VSCode.pro

Posted on • Edited on • Originally published at vscode.pro

9 1

VSCode Theme Highlight-able Indent Guides FTW 💯

This is just a small tip for VSCode.

Since VSCode v1.23 got released you can style the active indent guides. 😲 VS Code can now highlight the active indent guides, only if your VSCode theme has support for that. I released a new version of my 🦄 Shades of Purple VSCode theme to support this feature.

So, as you move your cursor between various source code blocks. The color name is editorIndentGuide.activeBackground.

I shared this as a VSCode Tip

👋 Kindness is contagious

Please leave your appreciation by commenting on this post!

It takes one minute and is worth it for your career.

Get started

Thank you!

Top comments (12)

Collapse
 
jeroka profile image
Esteban Rocha

Great tip! Bracket Pair Colorizer does a great job highlighting the current indent scope but it sometimes gets stuck on jinja like languages and that's where this built-in shines. I have just integrated this into my own custom theme and works awesome, thank you!

Collapse
 
ahmadawais profile image
Ahmad Awais ⚡️

Glad you liked it. I don't personally like the Bracket color ext. It makes my code look like a rainbow. But I see the appeal. 👌

In my VSCode course I made an entire video on how to make things look morr cohesive with complete color controls that goes beyond just brackets. ✌

Collapse
 
equiman profile image
Camilo Martinez

Good know it, I'm using Indent-Rainbow extension.

Collapse
 
ahmadawais profile image
Ahmad Awais ⚡️

I don't use that either. Too colorful for my taste. But see the appeal :)

Collapse
 
wwebwork profile image
Whipstitch Webwork

It is easily adjusted brother. If colors are not your thing, do what cool dudes do. Change reality.

"indentRainbow.colors": [
"rgba(16,16,16,0.1)",
"rgba(16,16,16,0.3)",
"rgba(16,16,16,0.6)",
"rgba(16,16,16,0.4)",
"rgba(16,16,16,0.2)"
]

Thread Thread
 
ahmadawais profile image
Ahmad Awais ⚡️ • Edited

I personally feel that it's too much color. I know it can be customized. Context: I built the 🦄 Shades of Purple theme that over a million devs use. And a course on VSCode.pro — I think a decision from me might impact the workflow of thousands of developers.

Collapse
 
equiman profile image
Camilo Martinez

That's what an Spanish friend says: "Para gustos están los colores." or his English equivalent "One man's meat is another man's poison".

Collapse
 
apixelvisuals profile image
APixel Visuals • Edited

Yeah that's also why I don't use the color brackets extension

Thread Thread
 
wwebwork profile image
Whipstitch Webwork

Here APixel...

"indentRainbow.colors": [
"rgba(16,16,16,0.1)",
"rgba(16,16,16,0.3)",
"rgba(16,16,16,0.6)",
"rgba(16,16,16,0.4)",
"rgba(16,16,16,0.2)"
]

Thread Thread
 
ahmadawais profile image
Ahmad Awais ⚡️

🦄 Shades of Purple styles for indent-rainbow.

    "indentRainbow.colors": [
        "rgba(165, 153, 233,0.5)",
        "rgba(165, 153, 233,0.4)",
        "rgba(165, 153, 233,0.3)",
        "rgba(165, 153, 233,0.2)",
        "rgba(165, 153, 233,0.1)"
    ],

Peace! ✌️

Collapse
 
tsamishwarts profile image
🇮🇱Tsami Schwarts🇮🇱

here is my version, call it shades of blue.

"indentRainbow.colors": [
"rgba(0,157,255,0.3)",
"rgba(13,162,255,0.3)",
"rgba(38,171,255,0.3)",
"rgba(89,191,255,0.3)",
"rgba(140,211,255,0.3)",
"rgba(191,230,255,0.3)",
"rgba(217,241,255,0.3)",
"rgba(232,255,255,0.3)"
],

Collapse
 
sparkedx profile image
Sparkdex

really good colours. looks damn good with a light theme

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay