The most epic theme meets Visual Studio Code. You can help by reporting issues here

• Getting started
  • Installation - Packaged VSIX Extension - GitHub Repository Clone
  • Activate theme
  • Activate File Icons
  • Set the accent color
  • Override theme colors
• Recommended settings for a better experience
• Other resources
  • Contributors
  • Backers
  • Sponsors

Getting started

You can install this awesome theme through the Visual Studio Code Marketplace.

Installation

Launch Quick Open

• Linux Ctrl+P
• macOS ⌘P
• Windows Ctrl+P

Paste the following command and press Enter:

ext install vsc-material-theme

Packaged VSIX Extension

Download the latest .vsix release file from the GitHub repository and install it from the command line

code --install-extension vsc-material-theme-*.*.*.vsix

or from within VS Code by launching Quick Open and running the Install from VSIX... command.

GitHub Repository Clone

Change to your .vscode/extensions VS Code extensions directory. Depending on your platform it is located in the following folders:

• Linux ~/.vscode/extensions
• macOs ~/.vscode/extensions
• Windows %USERPROFILE%\.vscode\extensions

Clone the Material Theme repository as Equinusocio.vsc-material-theme:

git clone https://github.com/equinusocio/vsc-material-theme.git Equinusocio.vsc-material-theme

Activate theme

Launch Quick Open,

• Linux Ctrl + Shift + P
• macOS ⌘ + Shift + P
• Windows Ctrl + Shift + P

Type theme and choose Preferences: Color Theme, then select Material Theme from the list.

This theme provides different color variants, to change the active theme variant type Material Theme and choose Material Theme: Settings, then select Change color variant and pick one theme from the list.

Activate File Icons

Launch Quick Open,

• Linux Ctrl + Shift + P
• macOS ⌘ + Shift + P
• Windows Ctrl + Shift + P

type icon theme and select Material Theme Icons from the drop-down menu.

Set the accent color

Launch Quick Open,

• Linux Ctrl + Shift + P
• macOS ⌘ + Shift + P
• Windows Ctrl + Shift + P

Type Material Theme and choose Material Theme: Settings, then select Change accent color and pick one color from the list.

Override theme colors

You can override the material theme ui and schemes colors by adding these theme-specific settings to your configuration.

"editor.tokenColorCustomizations": {
    "[Material Theme]": {
        "comments": "#229977"
    },
    "..."
},
"workbench.colorCustomizations": {
    "[Material Theme]": {
        "sideBar.background": "#347890"
    },
    "..."
}

Recommended settings for a better experience

{
    // Controls the font family.
    "editor.fontFamily": "Operator Mono",
    // Controls the line height. Use 0 to compute the lineHeight from the fontSize.
    "editor.lineHeight": 24,
    // Enables font ligatures
    "editor.fontLigatures": true,
    // Controls if file decorations should use badges.
    "explorer.decorations.badges": false
}

Other resources

• AppIcon: Download the official Material Theme app icon for Visual Studio code

Contributors

This project exists thanks to all the people who contribute. [Contribute].

Backers

Thank you to all our backers! 🙏 [Become a backer]

Sponsors

Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]

---

Copyright © 2017 Mattia Astorino and Paolo Roth