How to make your own VS Code theme!
HTML-код
- Опубликовано: 30 июл 2024
- 🔥 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 
Наука
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
What if it's a repo I forked??
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.
is your bug fixed??
if you don't i could help you
@@randomluck9802 Hey, I'm getting this bug too and can't seem to see the issue. Would you mind helping?
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)
Your videos are amazing. Well organized and great use of visuals. I can tell you put a lot of work into your content!
I don't care about making my own theme, because changing the colours makes me anxious, but this was just fun to watch! :D
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.
Thanks for putting this awesome guide together, Jess. Very helpful for those wanting an extreme degree of customization.
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.
Another fantastic video. I always wondered how you made themes and here is the answer! Thanks!
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!
Omg I spent an entire day changing the color scheme on sublimetext, thank you so much!
Thank you soo much for holding my hand for this. Would have never managed without this video!
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!
can you make a theme if I send you the colors ?
@@MRX-qu1lt Yes sure
stumbled upon this first video from 'i quit' video... you are an excellent teacher... precise, to the point, elegant
I was struggling to finish the theme but just because of your color generator thing I finished thank you.
I’ve been coding for about 10 minutes now & I’m about to jump down this rabbit hole. Wish me luck!!
This is the one.
I was waiting For this video for a long time.
Intros always funny😂
thank you!!
Great content, clear explanation, its really fun to watch.
I really needed this video to make my own extension.
Thank you very much!
What an excellent, EXCELLENT tutorial. Thank you.
Jessica, I just started with Vscode, THIS HELPS A LOT, Thank youu my guy!
No problem!
Thank you for making this video. Love your content!
I just got to youtube to search and I saw your video recommended and I am your permanent subscriber.
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. 😁😁😁
how did you go about that? I want to just edit one that already exists.
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.
Very well explained bro! All the best
Totally appreciated effort you put into this video 🎉
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
Now that's quality vid'! 👌👍
Thanks for shedding light on this hairy task
Never thought this would be soo easy.
Just published mine. Thank you!!
Awesome tutorial! Thank you!
I found you through dev ed and I am not disappointed! time to build my own theme!
Thanks for watching! Best of luck making your theme!
Thank you for this! Been wanting to make a theme for a while
sweet, hope this helps!
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!
Thanks! Very informative and well done!
Going to build one, thanks for the video
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. 👍
Thanks so much!!
You are insanely good making those videos
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!!!! 🤗🤩😍☕☕☕☕☕☕
Hahaha that's great! Glad you like it! 😁
This is amazing. Thank you!
AMAZING!!, I rarelysubscribe to any channel. I'm hooked!
Awesome tutorial! Big thanks!
I was searching for the exact theme thanks :-))
Just what I needed! Thanks!
Seriously! Your editing 🤯
thanks so much coder coder!!!
you're awesome coder thank you for informations I'm so happy to make my new vscode
Thanks so much for this great video!
great video! got a lot of info from it :)
Thank you so much for this!
Getting that popup to show up even trying to let popups through was super fun.
Your Coder Coder Dark theme is nice!
Loved the way we built a VSCODE theme in just 15 minutes
Great video, helped a lot!
Excellent video. You are the best.
just the beginning of the video is so damm funny, im subbing :p
Whoa!! amazing video, thank u
Awesome as always 👍😀
Thanks so much!
Nice tutorial. Just published my first plugin with this.
Thank you so much ... I just completed making my custom theme ...
Informative video!
You didnt have to make that app but you did. Thank you.
You are just amazing.
Wowsomesauce video! Thanks a lot!
Pretty Funny tutorial ,subed!
Thank you so much!
finally, a theme that satisfied me...😂
Thankyou so much!
I love the way u explain.
Thank you! Glad you liked it :D
Hello, Jessica, this is Eleeyas from India I'm your new subscriber. I like your tutorials. Thanks this Theme is awesome. But your vs code theme is different I like that theme very much and your computer desk setup is arranged beautifully.
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.
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.
I was asking myself the same thing the entire way through 😅
Nice🔥🔥
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 :(
same!
I love your work station
let's get into it 🙌🏻😄
haha that's right 😁
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?
I love your theme (using It xD)
It's really helpful, btw can you make a custom vscode icon tutorial?
Jessica, you should consider informercials as well as a side hustle. Your commentary is over the limit
I guess i'll have no excuses now since you gave all the tools to this Microsoft hell !
haha Thank you very much !!
haha awesome, best of luck!!
Very interesting!
Great video!
Thanks for watching!
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
You've got a great voice for voice-over
im love with you. thank you for this lmao.
It's really helpful , Thanks😊.
You're welcome!
@@TheCoderCoder hey Jessica when are launching the cource.🙄I am waiting for it.
I have missed coding since i started my masters program. I seem not find time to code each day.
Background music was very pleasing. Best that I have heard till now , on RUclips
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
"Because if it doesn't look cool, I don't want to code" finally someone gets it too 😌
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?
nice one!
Thank you.
Thank you a lot
Thanks, smarty girl your videos really provides me a big help and your explanation is really very nice that make anyone understand, I just want to ask that
can you tell me how to get a job at google without a degree?
I made a theme in just a day all thanks to you.It's name is 'Darkai theme'.
It is type of old fashioned but ya for starting it is just amazing It will rock soon if you will make it more modern
@@aaryanbhurtel5378
Can you please explain what you mean by "more modern" ? Thanks for the feedback👍👍
@UCBj_bvbp6yWhHjBi8yDxaEw oh K cool
That Nezuko Chan part 🤣🤣🤣
Is it possible to add/remove entire parts of the UI? Or edit them, like rounding off edges for example?
Thank you so much madam 👍
How can you add multiple themes to your extension, like a dark and light theme inside the same extension?
so good.