How to make your own VS Code theme!
Вставка
- Опубліковано 24 лип 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)
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.
Your videos are amazing. Well organized and great use of visuals. I can tell you put a lot of work into your content!
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.
Thanks for putting this awesome guide together, Jess. Very helpful for those wanting an extreme degree of customization.
Omg I spent an entire day changing the color scheme on sublimetext, thank you so much!
Another fantastic video. I always wondered how you made themes and here is the answer! Thanks!
I’ve been coding for about 10 minutes now & I’m about to jump down this rabbit hole. Wish me luck!!
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!
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
Thank you soo much for holding my hand for this. Would have never managed without this video!
I was struggling to finish the theme but just because of your color generator thing I finished thank you.
stumbled upon this first video from 'i quit' video... you are an excellent teacher... precise, to the point, elegant
This is the one.
I was waiting For this video for a long time.
Intros always funny😂
thank you!!
Never thought this would be soo easy.
Great content, clear explanation, its really fun to watch.
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.
Jessica, I just started with Vscode, THIS HELPS A LOT, Thank youu my guy!
No problem!
Very well explained bro! All the best
Thank you for making this video. Love your content!
I really needed this video to make my own extension.
Thank you very much!
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.
You are insanely good making those videos
Totally appreciated effort you put into this video 🎉
I just got to youtube to search and I saw your video recommended and I am your permanent subscriber.
What an excellent, EXCELLENT tutorial. Thank you.
Loved the way we built a VSCODE theme in just 15 minutes
Now that's quality vid'! 👌👍
Thanks for shedding light on this hairy task
Just published mine. Thank you!!
Getting that popup to show up even trying to let popups through was super fun.
Going to build one, thanks for the video
thanks so much coder coder!!!
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!
Awesome tutorial! Thank you!
Seriously! Your editing 🤯
Thanks! Very informative and well done!
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?
Just what I needed! Thanks!
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!
AMAZING!!, I rarelysubscribe to any channel. I'm hooked!
Thank you for this! Been wanting to make a theme for a while
sweet, hope this helps!
Awesome tutorial! Big thanks!
I was searching for the exact theme thanks :-))
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!
This is amazing. Thank you!
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
Your Coder Coder Dark theme is nice!
Great video, helped a lot!
Thanks so much for this great video!
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
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!!
Mam? If i want to add more theme json file what should i do?
great video! got a lot of info from it :)
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 🙏
I have missed coding since i started my masters program. I seem not find time to code each day.
Thank you so much for this!
Excellent video. You are the best.
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
just the beginning of the video is so damm funny, im subbing :p
How can you add multiple themes to your extension, like a dark and light theme inside the same extension?
Pretty Funny tutorial ,subed!
Whoa!! amazing video, thank u
Hi
I have a problem in vs code that is when i change the theme the variable's color didn't change ,help please
Awesome as always 👍😀
Thanks so much!
Is it possible to add/remove entire parts of the UI? Or edit them, like rounding off edges for example?
how do u change the text cursor size and color @Coder Coder
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
Nice tutorial. Just published my first plugin with this.
Thank you so much ... I just completed making my custom theme ...
Wowsomesauce video! Thanks a lot!
You've got a great voice for voice-over
i cant find the .vscode folder (im on mac), does anybody know the file path???
(~/.vscode/extensions doesnt work with spotlight search)
the npm cmd is not working in termibal how can i fix that ?
finally, a theme that satisfied me...😂
Please help, I still cannot change the colour of all brackets in visual studio code using my theme?
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
I've installed the package but my terminal is saying 'command not found' any idea how to fix?
you're awesome coder thank you for informations I'm so happy to make my new vscode
You are just amazing.
Informative video!
You didnt have to make that app but you did. Thank you.
anyone know name theme at 2:05 ? thanks for the explanation btw
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.
Is there any specific extension required to debug the theme, as I am unable to debug the theme?
Thank you so much!
how I can get different tokens for different programming languages and customize their color?
Hey, There´s a way to put an icon to my extension theme?
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! 😁
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
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?
could you add your own icon to vscode also?
such as a custom folder icon
let's get into it 🙌🏻😄
haha that's right 😁
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
dear help me i get svchost problems during writing code on vs code studio
Thankyou so much!
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 😅
Background music was very pleasing. Best that I have heard till now , on UA-cam
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
very useful. but how to change color for "No theme selector" tokens?
When i tried to update the theme this error occurred
Error occurred while parsing the manifest file.