How to make your own VS Code theme!
Beginner-friendly guide to how to build and publish your own VS Code theme on the VS Code Marketplace.
๐ป LEARN TO CODE ๐ป
MY COURSE:
๐ข Learn how to build a website from scratch with my course -- https://coder-coder.com/responsive
RECOMMENDED RESOURCES:
Tools and resources I use myself and highly recommend, with exclusive discounts (affiliate links help support this channel-- thank you!)
๐ท Frontend Mentor Pro -- Practice building real-world projects (10% off with code JESSCHAN10) -- https://www.frontendmentor.io/?via=jesschan
๐ท Boot.dev -- Learn back-end development (25% off) -- https://www.boot.dev/?promo=CODERCODER
๐ท Zero to Mastery -- Learn web dev, AI, DevOps and more with 100+ courses -- https://academy.zerotomastery.io/a/aff_s3xc407h/external?affcode=441520_ti97uk6b
______________________________________________
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: https://coder-coder.com/vs-code-theme-color-generator/
โถ VS Code Theme Color Reference: https://code.visualstudio.com/api/references/theme-color
โถ Find color schemes at: https://coolors.co/
โถ Get color palettes from an image: https://hexcolor.co/image-to-colors
RESOURCES:
โถ How to Create a Custom VS Code Theme by @codeSTACKr -- https://youtu.be/QCqWzb-9Sy8
โถ Creating a VS Code Theme by Sarah Drasner -- https://css-tricks.com/creating-a-vs-code-theme/
_____________________________________
OTHER STUFF:
๐ข Coder Coder Dark -- My VS Code theme -- https://marketplace.visualstudio.com/items?itemName=CoderCoder.codercoder-dark-theme
๐ข Coder Coder Merch -- get my hoodie, coffee cup, and more! -- https://coder-coder.com/merch
SOCIALS:
https://twitter.com/thecodercoder
https://www.instagram.com/the
Watch on YouTube โ
(saves to browser)
Sign in to unlock AI tutor explanation ยท โก30
Playlist
Uploads from Coder Coder ยท Coder Coder ยท 38 of 60
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
โถ
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
How to Make a Super Simple HTML Website [Tutorial]
Coder Coder
How to make an animated sticky header with CSS and JavaScript!
Coder Coder
How to get coding help by researching online
Coder Coder
IG Live - Advice for beginner web developers
Coder Coder
Quick Start Guide to Parcel JS
Coder Coder
Build a responsive website with HTML & CSS - Part 1 [Live Coding]
Coder Coder
Build a custom Linktree page for Instagram with HTML & CSS
Coder Coder
Gulp 4 Crash Course for Beginners
Coder Coder
How to use CSS position to layout a website
Coder Coder
CSS: 4 Reasons Your Z-Index Isn't Working
Coder Coder
Coding a landing page website with HTML & CSS
Coder Coder
Learn web development as an absolute beginner
Coder Coder
How to write media queries in CSS
Coder Coder
How to build a 2-column layout using flexbox | HTML/CSS
Coder Coder
How to build a simple responsive layout with CSS grid
Coder Coder
Write code faster in VS Code with Emmet shortcuts
Coder Coder
How I setup VS Code for a beginners front-end workflow
Coder Coder
How to make a background-image transparent in CSS
Coder Coder
Build a responsive website from scratch with HTML & CSS | Part 1: Navigation bar
Coder Coder
Animated Hamburger Menu in CSS/JS | Build a responsive website from scratch (Part 2)
Coder Coder
Animated mobile menu with CSS/JS | Build a responsive website from scratch (Part 3)
Coder Coder
How to stay motivated when learning to code?
Coder Coder
Responsive hero | Build a responsive website from scratch (Part 4)
Coder Coder
Responsive 4-column layout with flexbox | Build a responsive website from scratch (Part 5)
Coder Coder
Responsive 4-column layout with CSS Grid | Build a responsive website from scratch (Part 6)
Coder Coder
Building a footer using CSS Grid | Build a responsive website from scratch (Part 7)
Coder Coder
Browsersync + Sass + Gulp in 15 minutes
Coder Coder
Responsive card UI with flexbox and hover effects | HTML/CSS
Coder Coder
CSS grid cards with animated hover effect | HTML/CSS
Coder Coder
How I learned to code and landed a job (no CS degree!)
Coder Coder
Building the website for my course (coding timelapse)
Coder Coder
How to debug your code faster ๐ฅ
Coder Coder
Full timelapse + walkthrough of building my website
Coder Coder
Your questions answered!! โจ100K Q&Aโจ
Coder Coder
Building a pricing block with HTML & PuRe CSS
Coder Coder
Use the Google Maps API to build a custom map with markers
Coder Coder
Building an accordion with HTML, CSS & JS (Part 1)
Coder Coder
How to make your own VS Code theme!
Coder Coder
How to build an accordion with HTML, CSS, and JavaScript (Part 2)
Coder Coder
Life/channel update
Coder Coder
Building a Light/Dark Dashboard, Part 1
Coder Coder
What is NPM, and why do we need it? | Tutorial for beginners
Coder Coder
Building a Node.js app (as a JavaScript noob) | ๐ด LIVE CODING
Coder Coder
Free website project ideas for your portfolio #shorts
Coder Coder
How to add quickly emojis on Windows #shorts
Coder Coder
Building a Light/Dark Dashboard, Part 2
Coder Coder
Learn to code with these 4 free resources! #shorts
Coder Coder
Learn flexbox with these 4 resources! #shorts
Coder Coder
[Typing sound] Comparing mechanical vs regular keyboard
Coder Coder
Building a Light/Dark Dashboard, Part 3
Coder Coder
what making web development tutorials is really like ๐
#shorts
Coder Coder
Generate website starter files with just one command!
Coder Coder
emojis in code
Coder Coder
Stay motivated when coding: don't compare yourself with others #shorts
Coder Coder
Building a Light/Dark Dashboard, Part 4
Coder Coder
Coding motivation: slow and steady wins the race ๐ข๐
Coder Coder
Sass @import is being replaced with @use and @forward
Coder Coder
Coding motivation tip: keep your goal in mind
Coder Coder
How do websites work?
Coder Coder
Building a Light/Dark Dashboard, Part 5
Coder Coder
Related AI Lessons
โก
โก
โก
โก
Technical Wednesday #1: How to Add an Auto-Refresh Checkbox to Your Website (Every 10 Seconds)
Medium ยท Data Science
Demystifying Modern Web Development: What You Actually Need to Know
Medium ยท Programming
React, Explained Like Youโve Never Written Code Before
Medium ยท JavaScript
Angular Security: Subresource Integrity (SRI)
Medium ยท JavaScript
Chapters (8)
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
๐
Tutor Explanation
DeepCamp AI