DEV Community

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

Posted on

2

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.

Heroku

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started

Top comments (0)

Eliminate Context Switching and Maximize Productivity

Pieces.app

Pieces Copilot is your personalized workflow assistant, working alongside your favorite apps. Ask questions about entire repositories, generate contextualized code, save and reuse useful snippets, and streamline your development process.

Learn more

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay