How to make your own VS Code theme!

Рет қаралды 233,619

Күн бұрын

🔥 Learn how to build a responsive website from a Figma design with HTML, SCSS, JS ➡️ coder-coder.com/responsive/
😎 Join the Coder Coder Club and get sneak peeks of videos: courses.coder-coder.com/p/club
👕 Get my hoodie here: coder-coder.com/merch
______________________________________________
0:00 - Intro
0:56 - How colors work in VS Code
2:58 - How VS Code themes work
4:02 - Create theme files w/ Yo Code extension generator
5:07 - Customizing your theme colors
8:57 - Online theme color generator
9:56 - Register, package, and publish your theme
14:32 - Maintaining and updating your theme
LINKS FROM THE VIDEO:
▶ My Theme Color Generator: coder-coder.com/vs-code-theme...
▶ VS Code Theme Color Reference: code.visualstudio.com/api/ref...
▶ Find color schemes at: coolors.co/
▶ Get color palettes from an image: hexcolor.co/image-to-colors
RESOURCES:
▶ How to Create a Custom VS Code Theme by ‪@codeSTACKr‬ -- • How to Create a Custom...
▶ Creating a VS Code Theme by Sarah Drasner -- css-tricks.com/creating-a-vs-...
_____________________________________
💻 Become a full-stack web dev with Zero to Mastery: academy.zerotomastery.io/a/af...
🎨 Get my VS Code theme: marketplace.visualstudio.com/...
🔽 FOLLOW CODER CODER
Twitter -- / thecodercoder
Instagram -- / thecodercoder
#css #javascript #html

Пікірлер: 336

@Gustafonair 2 жыл бұрын

If anyone runs into the issue of "you don't have an extension for debugging json with comments" or similar, make sure you open the correct folder in VS code. It has to be the one created from running the "yo code"-script

@mazwrld 2 жыл бұрын

What if it's a repo I forked??

@createdxvibez1183 Жыл бұрын

I ran into that issue, from what I've gathered it just means you don't have your debugger of choice, chosen. you have to select the bug icon and choose "show all automatic debug configurations" select which debugger you want to use and it should work.

@randomluck9802 Жыл бұрын

is your bug fixed?? if you don't i could help you

@moustafael-shaboury2659 Жыл бұрын

@@randomluck9802 Hey, I'm getting this bug too and can't seem to see the issue. Would you mind helping?

@moustafael-shaboury2659 Жыл бұрын

Actually I fixed it - turns out you literally need to have nothing open apart from the folder itself when you press f5 (so don't open any .json files)

@blonduose 3 жыл бұрын

I don't care about making my own theme, because changing the colours makes me anxious, but this was just fun to watch! :D

@paulvorderegger1522 3 жыл бұрын

I was on Intellij's IDEs since I started programming (The community editions are always free). Now I wanted to get into C++ but the C++ IDE from Intellij costs 400$ a year (Java and Python are free) so I did everything to make VSCode feel like Intellij. Changed the font, changed the icons, and spent a day making exactly the theme from Intellij for C++. It really is a PITA but now it looks like the IDE i know.

@claudettebentley 3 жыл бұрын

Your videos are amazing. Well organized and great use of visuals. I can tell you put a lot of work into your content!

@Silentbob1494 17 күн бұрын

I absolutely love this video, easy to understand and you're addressing literally every question that's come up in my mind while i'm watching.

@jdlien81 Жыл бұрын

Thanks for putting this awesome guide together, Jess. Very helpful for those wanting an extreme degree of customization.

@xNeitorx 3 жыл бұрын

Omg I spent an entire day changing the color scheme on sublimetext, thank you so much!

@ernesticus6593 5 ай бұрын

I’ve been coding for about 10 minutes now & I’m about to jump down this rabbit hole. Wish me luck!!

@mind_of_a_darkhorse 3 жыл бұрын

Another fantastic video. I always wondered how you made themes and here is the answer! Thanks!

@mvaleno 2 жыл бұрын

Outstanding! This was so well done! Everything I needed to know, and now I can pull all the tons of code out of my settings.json! Thank you!

@niainafitiairinarasamimana2392 3 жыл бұрын

Amazing video! Everything ran smoothly until the install 'yo generator-code part'. I literally spent the whole morning trying to figure out what was wrong. And finally after using powershell and cmd and failing I used git bash and like a miracle it worked! All the errors disappeared and now my theme is out there in the marketplace. Thank you for the awesome tutorial!

@MRX-qu1lt Жыл бұрын

can you make a theme if I send you the colors ?

@niainafitiairinarasamimana2392 Жыл бұрын

@@MRX-qu1lt Yes sure

@KoloStories 3 жыл бұрын

Thank you soo much for holding my hand for this. Would have never managed without this video!

@aklilllsabyss 3 жыл бұрын

I was struggling to finish the theme but just because of your color generator thing I finished thank you.

@mpty2022 3 жыл бұрын

stumbled upon this first video from 'i quit' video... you are an excellent teacher... precise, to the point, elegant

@my_j.a.r.v.i.s. 3 жыл бұрын

This is the one. I was waiting For this video for a long time.

@FransixWeb 3 жыл бұрын

Intros always funny😂

@TheCoderCoder 3 жыл бұрын

thank you!!

@asimgiri4269 3 жыл бұрын

Never thought this would be soo easy.

@dimasabimanyu5398 3 жыл бұрын

Great content, clear explanation, its really fun to watch.

@web1n Жыл бұрын

Thank you for this. I don't know why Microsoft had to make this so ridiculously complicated. But, your video helped me actually do it.

@dave371 3 жыл бұрын

Jessica, I just started with Vscode, THIS HELPS A LOT, Thank youu my guy!

@TheCoderCoder 3 жыл бұрын

No problem!

@the_yugandharr Жыл бұрын

Very well explained bro! All the best

@urlroute1489 3 жыл бұрын

Thank you for making this video. Love your content!

@blessinghirwa 3 жыл бұрын

I really needed this video to make my own extension. Thank you very much!

@leoMC4384 2 жыл бұрын

Good stuff. I had one dark theme from an extension but I wasn't satisfied with the colors and I couldn't find any dark theme I fully like, so I started changing this one I downloaded, I changed pretty much everything!! And added some extra colors tokens from other themes and even some colors I created myself. I spent a shitload of hours testing so many colors but it was worth it. I'm super happy with my theme now. 😁😁😁

@ChristianReyess 10 ай бұрын

how did you go about that? I want to just edit one that already exists.

@dariosanchez1373 2 ай бұрын

You are insanely good making those videos

@-maddhruv Жыл бұрын

Totally appreciated effort you put into this video 🎉

@aklilllsabyss 3 жыл бұрын

I just got to youtube to search and I saw your video recommended and I am your permanent subscriber.

@Cloud-Yo 2 жыл бұрын

What an excellent, EXCELLENT tutorial. Thank you.

@vedantpawar4962 2 жыл бұрын

Loved the way we built a VSCODE theme in just 15 minutes

2 жыл бұрын

Now that's quality vid'! 👌👍 Thanks for shedding light on this hairy task

@aklilllsabyss 3 жыл бұрын

Just published mine. Thank you!!

@stevenluoma1268 6 ай бұрын

Getting that popup to show up even trying to let popups through was super fun.

@ayushsaini9798 3 жыл бұрын

Going to build one, thanks for the video

@ei5705 2 ай бұрын

thanks so much coder coder!!!

@King-Kyle 3 жыл бұрын

I found you through dev ed and I am not disappointed! time to build my own theme!

@TheCoderCoder 3 жыл бұрын

Thanks for watching! Best of luck making your theme!

@nro337 3 жыл бұрын

Awesome tutorial! Thank you!

@nobitaq_nsem 2 жыл бұрын

Seriously! Your editing 🤯

@merling5825 2 жыл бұрын

Thanks! Very informative and well done!

@RMike-xq1cm 2 жыл бұрын

Had some issues when I tried to debug this as I got "Couldn't find task npm " error but then managed to see my theme by clicking "debug anyway". When I try the "vsce package" command I get the following error : "ERROR Extension manifest not found" Is there any workaround?

@Firewallx2 2 жыл бұрын

Just what I needed! Thanks!

@astrodas1910 2 жыл бұрын

There is this theme I really like but some of the colors were off to me. After watching your video now I'm able to customize at my will :) Thank you!

@rc_f9542 Жыл бұрын

AMAZING!!, I rarelysubscribe to any channel. I'm hooked!

@cinialvespow1054 3 жыл бұрын

Thank you for this! Been wanting to make a theme for a while

@TheCoderCoder 3 жыл бұрын

sweet, hope this helps!

@MiW4iQOFruxobatofrOn 2 жыл бұрын

Awesome tutorial! Big thanks!

@aaradhanah5059 2 жыл бұрын

I was searching for the exact theme thanks :-))

@cleverwat1224 3 жыл бұрын

Great video! However I am currently stuck at the debugging part - 6:10 - I can't seem to have the extension that debugs JSON with js :(

@udhayr3690 2 жыл бұрын

same!

@Jimmy-lu6pr 3 жыл бұрын

This is amazing. Thank you!

@MicroTeck 2 жыл бұрын

I got so many problem but I did it thank you sooooooo much !!! you are actually really good to explaining ! (Im just trash to follow steps lol) thx

@montazmeahii6029 3 жыл бұрын

Your Coder Coder Dark theme is nice!

@leonamlvs Жыл бұрын

Great video, helped a lot!

@LewiUberg Жыл бұрын

Thanks so much for this great video!

@mathieuL2204 3 жыл бұрын

I actually already knew all this but the presentation is so good that I stayed till the end. And very well done on the theme-generator website. 👍

@TheCoderCoder 3 жыл бұрын

Thanks so much!!

@devanshdua6989 Жыл бұрын

My activity bar is not changing its colour i need help with that even though its set to custom and i need help with how to set my theme as base theme

@labibkhanofficialbd 3 жыл бұрын

Mam? If i want to add more theme json file what should i do?

@tannercampbell 2 жыл бұрын

great video! got a lot of info from it :)

@relaxingwithmidfulmoment1177 Жыл бұрын

Dear Jessica, Help! Help! my vscode editor is not loading the preview but the new window is popping up and no error at all. Please help me out 🙏

@Christogonus_uche 3 жыл бұрын

I have missed coding since i started my masters program. I seem not find time to code each day.

@psychoclips6817 2 жыл бұрын

Thank you so much for this!

@antoniorodma 3 жыл бұрын

Excellent video. You are the best.

@imluctor5997 2 жыл бұрын

just the beginning of the video is so damm funny, im subbing :p

@chillow.98 2 жыл бұрын

when Im installing yo code, it says it has vulnerabilities and when i run "yo code" , it doesn't identify yo code even though it downloaded correctly. why and help pls it also says it has running scripts disabled and i would like to know how to fix this thanks. it does work in the cmd but then it doesn't let me paste the creator token

@dtar380 5 ай бұрын

How can you add multiple themes to your extension, like a dark and light theme inside the same extension?

@ElinLiu0823 Жыл бұрын

Pretty Funny tutorial ,subed!

@alejandrohiguera2125 2 жыл бұрын

Whoa!! amazing video, thank u

@laaroussimohamed475 2 жыл бұрын

Hi I have a problem in vs code that is when i change the theme the variable's color didn't change ,help please

@rangabharath4253 3 жыл бұрын

Awesome as always 👍😀

@TheCoderCoder 3 жыл бұрын

Thanks so much!

@KeplerEmeritus 2 жыл бұрын

Is it possible to add/remove entire parts of the UI? Or edit them, like rounding off edges for example?

@mayureshzende7649 2 жыл бұрын

how do u change the text cursor size and color @Coder Coder

@rikter2114 2 жыл бұрын

I hit F5 (I am on windows) and It gives a pop up saying You don't have an extension to debug json with comments. I try to search for an extension but no results

@flowlime 9 ай бұрын

Nice tutorial. Just published my first plugin with this.

@vennynagraj8415 7 ай бұрын

Thank you so much ... I just completed making my custom theme ...

@nikhilmwarrier7948 3 жыл бұрын

Wowsomesauce video! Thanks a lot!

@stellarstudio5495 Жыл бұрын

You've got a great voice for voice-over

@dracul222 2 жыл бұрын

the npm cmd is not working in termibal how can i fix that ?

@novynee 10 ай бұрын

i cant find the .vscode folder (im on mac), does anybody know the file path??? (~/.vscode/extensions doesnt work with spotlight search)

@vradhibishnoi5896 3 жыл бұрын

finally, a theme that satisfied me...😂

@Tlion2102 7 ай бұрын

Please help, I still cannot change the colour of all brackets in visual studio code using my theme?

@javigarza7748 3 жыл бұрын

I've installed the package but my terminal is saying 'command not found' any idea how to fix?

@user-nl5zn6gy4q 2 жыл бұрын

you're awesome coder thank you for informations I'm so happy to make my new vscode

@techxpertpcs 3 жыл бұрын

nice tutorial. I have created my first theme named sr blue dark. I have a question on how to add images so that people can see what the theme looks like

@aklilllsabyss 3 жыл бұрын

You are just amazing.

@ripnephils148 2 жыл бұрын

You didnt have to make that app but you did. Thank you.

@swehub3666 3 жыл бұрын

Informative video!

@alanc497 2 жыл бұрын

holy Thank you, every written version online trying to explain this very thing doesn't even bother how to get to settings.json and it drove me mad.

@creedel 3 жыл бұрын

anyone know name theme at 2:05 ? thanks for the explanation btw

@fellaini2223 3 жыл бұрын

Is there any specific extension required to debug the theme, as I am unable to debug the theme?

@rodholseth6354 2 жыл бұрын

Thank you so much!

@soumyaranjan4187 3 жыл бұрын

how I can get different tokens for different programming languages and customize their color?

@Hicoffeman 11 ай бұрын

Hey, There´s a way to put an icon to my extension theme?

@maiklapatataotaku6404 7 ай бұрын

does anyone knows how to change de "()" or de "[]" colors? I know they use like 3 or 4 diferente colors but how can I change them? The inspector doesn't show the ids

@arasanjuan6524 3 жыл бұрын

YOUR SO AWESOME !!!! I'll be following your steps to become like you on programming skills.... i have recently started but you make this feels like sooo easy and entertaining!!!! 🤗🤩😍☕☕☕☕☕☕

@TheCoderCoder 3 жыл бұрын

Hahaha that's great! Glad you like it! 😁

@codingwithpaul 2 жыл бұрын

This is awesome! I wonder how could I create this theming feature for an application to allow users customize colors like vs code. Any ideas?

@swiveiproduction9192 3 жыл бұрын

could you add your own icon to vscode also? such as a custom folder icon

@wcandillon 3 жыл бұрын

let's get into it 🙌🏻😄

@TheCoderCoder 3 жыл бұрын

haha that's right 😁

@HussainMurtaza-ov4ln Жыл бұрын

Does anyone runs into the issue of "Part URI is not valid per rules defined in the Open Packaging Conventions specification." Please If you are help me to solve this

@funny-wl1gj 3 жыл бұрын

dear help me i get svchost problems during writing code on vs code studio

@shubhsharma19 6 ай бұрын

Thankyou so much!

@brandonmulas648 2 жыл бұрын

This was quite possibly the most convoluted process for installing a robust custom theme that I've ever experienced. 0 / 10, actually wouldn't wish this on my worst enemy. No idea why I put myself through this.

@TheCoderCoder 2 жыл бұрын

I was asking myself the same thing the entire way through 😅

@rohanayush 2 жыл бұрын

Background music was very pleasing. Best that I have heard till now , on KZfaq Also if someone installing yo code generator and your command is not found. Reinstall yo by just typing - npm install -g yo And yo code will work

@shubhsharma19 6 ай бұрын

When i tried to update the theme this error occurred Error occurred while parsing the manifest file.