Creating Custom VSCode Themes | How I built one | Complete Step By Step Process

-

Creating Custom VSCode Themes | How I built one | Complete Step By Step Process

STEP 1 :


Install Yo Code Generator : Yo Code Generator Docs

npm install -g yo generator-code

Run It :  

yo code



    Select -> New Color Theme


    Select -> Start Fresh and Give it  Name , Description
    Also Select -> Dark / Light / High Contrast based on what theme you want


STEP : 2

    cd into your theme folder

    To See your Theme in action Press "F5" Run->Start Debugging to see a new window popup with your new Theme





    * If you had multiple environments setup in your VSCode it may probably ask you to Select one , I overcame this by Choosing the launch.json and Adding Configuration for VScode Extension and Select Launch Extension in your Debug window





STEP 3 :


    The Themes .json file is where all the magic happens . You can change individual colors and see how it changes your theme . 

Tools like Ctrl + Shift + P  -> Developer: Inspect TM Scopes , can help you inspect specific elements .

    




    You can either use tools like : Coolors or hexcolor to generate a color palette

    I used an awesome website made by Coder Coder : VScode Color Theme Generator which makes the entire process hassle free 

    If you want to publish your theme in the market Place check out this : Publishing Docs

STEP 5:


    Change "Cursor" into Iron Man Style , to do that install : Power Mode Extension  and you can add your custom gif as cursor .


So the steps are

1 . Install Power Mode Extension 

2 . Go to settings -> Extensions -> Power Mode -> And there you can find different options on the extension -> Select Edit in settings.json 

3 . To add custom git - You can either download the gif or use url

I used iron man gif

To make this as your cursor add the following code in your settings.json file :

"powermode.enabled": true,
"powermode.enableEditorComboCounter": true,

"powermode.enableShake": true,
"powermode.customExplosions": [
    "explosion gif",
    "Iron man gif",
],

"powermode.explosionSize":6,
"powermode.explosionDuration": 290,
"powermode.backgroundMode": "image",
"powermode.customCss": {
    "top": "-50px",
},
"powermode.explosionOrder": "sequential",


The first link in the powermode.customExplosions is the link for particles effect and the second one is the iron man gif

Do use appropriate links while inserting in your code








The Code I used to get the best Result : 



FINAL STEP :


    The Final Step is to just enjoy Using Your Theme , No need to waste time searching for the Perfect Theme , Just Create One . Share it with someone who needs it .

Comments

Post a Comment

Popular posts from this blog

8 Awesome VSCode Themes for 2021 | Crazy Unique Themes to try | Old School | Different | Hacker | Neon

-
Image
8 Awesome VSCode Themes for 2021 Tired of using the same boring fonts , here are a set of new fonts that would help you feel like you are in a new coding environment and ultimately can help you with your workflow . You may not expect the same One Dark Pro or similar Styles over here . This is a collection of cool and crazy underrated themes , that will give you a new coding area .  And in no particular order , The themes are : 1 . Tokyo Night     If you love punchy colors , You will love this theme .  A clean, dark (and now light) Visual Studio Code theme that celebrates the lights of Downtown Tokyo at night . Many UI elements are intentionally low contrast so as not to distract.  Tokyo Night 2 . Hacker-Theme     This one is a crazy theme . Ever wanted to have the same hollywood hacker window on your workflow . This theme makes that possible for you . Wear a black hoodie and you are all set to be a hacker .  Hacker-Theme 3 . Aurora X     This is another one punchy theme to boost up the
Read more

Getting Started With THREE.JS | Insert Your FIRST 3D Model into your Website

-
Image
CONCEPTS INCLUDED : Scene Renderer Camera Position Material Textures  Animation Controls   We start of with a pretty empty project Just a html boiler plate code :       Importing CDN :   We have the html boiler plate Now we need someway to get the three js into our project     Cdn website :   threejs cdn : https://www.jsdelivr.com/package/npm/three   WorkFlow :       For better understanding I will be using Wrestling or WWE as a theme .   SCENE :   1st we need an area / environment to place our 3d objects Like in wrestling we must have the ring to fight      Similarly here we have something called scene     So a Scene here is a 3d area which has x , y and z co-ordinates . Let's initialise it by saying scene = new THREE.Scene ()       RENDERER : Now we have our ring setup for our wrestling ready But we need a broadcasting service to actually display it in television     And that is called a renderer A renderer takes the components and renders our scene for us with th
Read more

5 Ways to Make Money Coding

-
Image
5 Ways to Make Money Coding             You can ofcouse get a Job and make money Coding . But what if you couldn't get a Job or you don't want to get a Job . There are ways you can still earn money at your comfort . Lets see the Top 5 ways you can fill your pockets doing your passion .  5 . Freelancing :             Yes , it is the most Obvious way to make cash with Coding . You don't have to be a pro to sell your service , there could be people who needed small scripts for their projects or an hour of mentoring . Getting the first few orders will be the most difficult job . But after that everything will get in flow .  4 . Bug Bounty :             This is a way where developers can receive recognition and compensation for reporting bugs , especially reagarding security exploits . To maintain their reputation huge companies pay the person who found the bug as a reward . This way of making money mostly stays as a secret as ethical hackers don't want it to become compet
Read more