How to Install and Configure Material Theme and Fira Code Font in VS Code

The Material Theme is one of the most starred themes on GitHub, offering a more comfortable color scheme compared to other themes the author has used.

Official theme screenshots are provided for both macOS and Windows platforms.

Installation can be done directly via the built‑in package installer by searching for "Material Theme" and selecting the desired style; the theme also supports five different color variations.

Additional recommended user settings can be added by opening the user preferences and inserting the following JSON configuration:

<code>{
  "always_show_minimap_viewport": true,
  "bold_folder_labels": true,
  "font_options": ["gray_antialias", "subpixel_antialias"],
  "indent_guide_options": ["draw_normal", "draw_active"],
  "line_padding_bottom": 3,
  "line_padding_top": 3,
  "overlay_scroll_bars": "enabled"
}</code>

The author also recommends the Fira Code font, which improves readability by clearly distinguishing lowercase "l" from the digit "1" and provides programming ligatures (e.g., ">=" becomes "≥", "!=" becomes "≠").

Fira Code can be downloaded from its GitHub repository, extracted, and the five font files installed via right‑click.

After installation, update the VS Code user settings to use the new font by adding or modifying the following line:

<code>{ "font_face": "Fira Code" }</code>

With these steps completed, the editor will have the Material Theme applied and the Fira Code font enabled, providing a comfortable and visually appealing development environment.