Skip to content
Hallway
0:00 / 0:00

#vscode#vscodethemes#json

How to make your own VS Code theme!

Coder Coder

552K subscribers • 1 video on Hallway

YouTube
  • Recommended by 1 person: 1 on Stack Overflow and its sister sites.
  • Presented by Jess Chan, creator of Coder Coder

Beginner. No background in the topic needed.

290K views5 years ago1 recommendation

Tools and practiceVim, Emacs and editors

Jess Chan explains how colors and themes work in VS Code and demonstrates how to customize them using settings JSON files.

💥 Learn how to build a website from a Figma design with HTML, CSS, and JS -- coder-coder.com/?utm_source=YouTube&utm_medium=videos&utm_ca… 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) -- frontendmentor.io/?via=jesschan 🔷 Boot.dev -- Learn back-end development (25% off) -- boot.dev/?promo=CODERCODER 🔷 Zero to Mastery -- Learn web dev, AI, DevOps and more with 100+ courses -- academy.zerotomastery.io/a/aff_s3xc407h/external?affcode=441… ______________________________________________ - Intro - How colors work in VS Code - How VS Code themes work - Create theme files w/ Yo Code extension generator - Customizing your theme colors - Online theme color generator - Register, package, and publish your theme - Maintaining and updating your theme LINKS FROM THE VIDEO: ▶ My Theme Color Generator: coder-coder.com/vs-code-theme-color-generator/ ▶ VS Code Theme Color Reference: code.visualstudio.com/api/references/theme-color ▶ 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 -- youtu.be/QCqWzb-9Sy8 ▶ Creating a VS Code Theme by Sarah Drasner -- css-tricks.com/creating-a-vs-code-theme/ _____________________________________ OTHER STUFF: 🟢 Coder Coder Dark -- My VS Code theme -- marketplace.visualstudio.com/items?itemName=CoderCoder.coder… 🟢 Coder Coder Merch -- get my hoodie, coffee cup, and more! -- coder-coder.com/merch SOCIALS: twitter.com/thecodercoder instagram.com/thecodercoder #css #javascript #html

Why it's here

1 person recommends this

What people say. Recommended as a step-by-step guide to customizing VS Code workbench colors and creating custom themes.

Techy Shadowon Stack Overflow • Recommends

I've been following this tutorial by Coder Coder to make my vscode look better (tutorial link link to this video). As per the video I've opened the settings.json file and just wrote some code But when I can't be able to find the code to change the background of the tab-bar.( ) Here is what I've tried: "tab.background" : "#000000" Here is the code: "workbench.colorCustomizations": { "editor.background": "#000814", "sideBar.background": "#000d20", "sideBarTitle.foreground": "#ffd60a", "sideBarSectionHeader.foreground": "#ffd60a", "activityBar.activeBackground": "#ffea81d5", "activityBar.background": "#22223b", "statusBar.background": "#ffd60a", }
6View the answer