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 →

Ahmad Awais #WP15 🎉

@mrahmadawais

🔥 VSCode.pro/TIP/7 — You can now HIGHLIGHT Indent Guides! 😲

📐 Move cursor to diff code blocks
☄️ Active Code block indent guide gets highlighted

I just pushed an update for my Shades of Purple VS @Code theme which now offers indent highlighting 👌 Does your theme?!

20:38 PM - 03 May 2018

14 18

Comments

[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!

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

[Camilo Martinez]

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

[Ahmad Awais ⚡️]

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

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

[Ahmad Awais ⚡️]

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]

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]

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

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

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

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

[Sparkdex]

really good colours. looks damn good with a light theme