Ahmad Awais ⚡️ for VSCode.pro

Posted on Oct 3, 2018 • Updated on Apr 14, 2020 • Originally published at vscode.pro

VSCode Theme Highlight-able Indent Guides FTW 💯

#vscode #code #vscodetheme

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 →

Top comments (12)

Esteban Rocha • Oct 3 '18

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!

Ahmad Awais ⚡️ • Oct 3 '18

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. ✌

Camilo Martinez • Oct 3 '18

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

Ahmad Awais ⚡️ • Oct 4 '18

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

Whipstitch Webwork • Jan 25 '19

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)"
]

Ahmad Awais ⚡️ • Jan 26 '19 • 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.

Camilo Martinez • Oct 5 '18

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".

APixel Visuals • Oct 4 '18 • Edited

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

Whipstitch Webwork • Jan 25 '19

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)"
]

Ahmad Awais ⚡️ • Apr 27 '19

🦄 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! ✌️

🇮🇱Tsami Schwarts🇮🇱 • Aug 31 '19

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)"
],