How to Customize VS Code Themes and Icons

· Category: VS Code & Developer Tools

Short answer

VS Code supports custom color themes, file icon themes, and product icon themes. You can install them from the marketplace or create your own.

Steps

  1. Open the Command Palette and run "Preferences: Color Theme".
  2. Select a built-in theme or install new ones from the marketplace.
  3. Run "Preferences: File Icon Theme" to change how file icons look.
  4. Install the "Custom CSS and JS Loader" extension for deeper UI tweaks.
  5. Adjust individual colors in settings.json under workbench.colorCustomizations.

Tips

  • Popular dark themes include Dracula Official, One Dark Pro, and Night Owl.
  • Set a different theme per workspace to visually distinguish projects.
  • Icon themes like Material Icon Theme add thousands of file type icons.

Common issues

  • Custom CSS loaders may break after VS Code updates and need reinstallation.
  • Some themes do not cover all UI elements, leaving default colors in places.