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
• Official Portings
• Other resources
  • Contributors
  • Backers
  • Sponsors

Screenshots

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
}

Official Portings

Thanks to the Material Theme community you can use is with other softwares, here the official portings:

• Atom Editor: atom-material-ui (by @silvestreh)
• IntelliJ IDEA (thanks to @ChrisRM and @mallowigi).
• Vim (thanks to @kristijanhusak).
• Terminal OSX (thanks to @mvaneijgen).
• iTerm2 (by @Revod) and iTerm2 Palenight (by @jonathanspeek).
• Hyper.
• ConEmu (thanks to @rajadain).
• Slack App ( #263238,#2e3a40,#80CBC4,#FFFFFF,#13191C,#ffffff,#50fa7b,#FF5555 )
• Nylas N1 (thanks to @jackiehluo)
• Base16 (by @ntpeters)

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