DEV Community

Cover image for Ctrl+Alt+Gorgeous: How to make your Vscode look Aesthetic 🔥 | Shah Stavan
Mr.Shah
Mr.Shah

Posted on

Ctrl+Alt+Gorgeous: How to make your Vscode look Aesthetic 🔥 | Shah Stavan

Namaste everyone🙏

Hey everyone! Remember when we added that cool typing effect to VSCode in previous blog? Well, today we're doing something even better!

We're going to change how VSCode looks completely. It's not just about colors - we're changing the whole setup.

You might be wondering, "Does it really matter how VSCode looks?" Well, I think it does! It'll make your VSCode look super cool, and who knows? It might even help you work better.

Sound interesting? Stay tuned and I'll show you how to do it. You might end up enjoying coding even more than before!

Ready to start? Let's make your VSCode look amazing!

Note: I don't own a Macbook that's why the steps mentioned below are for cool Windows Developer😏.

Without any further ado, let's dive into the topic.

Before

Normal User

Newbie coding environment
Image credits:

The above image credits go to Mr.Kaivan Shah.

After

Initial Page

Coding Environment

Search Bar

Follow the below given instructions

  • My Vscode Appearance Settings:

Go to: View -> Appearance

Appearance Settings

  • Install Extension: Custom CSS and JS Loader

Custom css and js loader extension install

  • Create two files named custom.css and custom.js files in your Documents directory.
  • Copy the css code from the following link and paste the code in the custom.css file which you created.
  • Copy the js code from the following link and paste the code in custom.js file which you created.
  • Go to settings.json file and add the following code in it:
"vscode_custom_css.imports" :[
        "file:///C:\\Users\\shahs\\OneDrive\\Documents\\custom.css",
        "file:///C:\\Users\\shahs\\OneDrive\\Documents\\custom.js"
   ],
Enter fullscreen mode Exit fullscreen mode

Add absolute path of newly created css and js files and it should be written in the same manner as mentioned above in the code.

settings.json

  • Press Ctrl+Shift+P command and enable Enable Custom CSS and JS extension.

Enabling Custom Css and Js

  • Restart Vscode and see the magic.

Restart Vscode

  • Disable Custom CSS and JS: It will disable custom CSS.

Still facing any issue !! You can checkout the following youtube video.

Upvote 🤍 and share this blog with your friends and welcome them to the cool & crazzyy developers community.

Top comments (0)