Add Batman in Your VS Code

May 12, 20221 min read

As a Software Developer, it is not always about writing code. We also share a passion to personalize our workstations and development environment. I have personally been a fan of that aspect. Very often, I customize fonts, icons and themes of my VS code.

The extension name is “Power Mode” that you can find in the marketplace of VS Code extension. This is how it looks like:

Once installed, you can see the fun part after enabling the feature from Settings of VS Code ( Files > Preferences > Settings). Select a type of animation by searching for Power Mode and enable it.

And here is how it looks like:

But our fun does not stop there. This can be easily done by anyone. So, let’s customize it further with my favorite Superhero Batman 😄.

To add our custom animation, we should open settings.json

Clicking on either of these links work. Once opened, copy paste below code to the settings.json

"powermode.customExplosions": [
     "https://c.tenor.com/xT0EW92-o60AAAAi/batman-dc.gif"
],
"powermode.customCss": {    
   "margin-top": "1rem",
   "height": "5rem",
   "width": "5rem",
},

The final json structure may look like: