[](https://github.com/equinusocio/vsc-material-theme/releases)
The most epic theme meets Visual Studio Code. You can help by reporting issues [here](https://github.com/equinusocio/vsc-material-theme/issues)
- [Getting started](#getting-started)
- [Installation](#installation)
- [Packaged VSIX Extension](#packaged-vsix-extension)
- [GitHub Repository Clone](#github-repository-clone)
- [Activate theme](#activate-theme)
- [Fix File Icons](#fix-file-icons)
- [Set the accent color](#set-the-accent-color)
- [Disabling/enabling file icons auto-applying](#disablingenabling-file-icons-auto-applying)
- [Override theme colors](#override-theme-colors)
- [Color Scheme override](#color-scheme-override)
- [Recommended settings for a better experience](#recommended-settings-for-a-better-experience)
- [Official Portings](#official-portings)
- [Other resources](#other-resources)
- [Contributors](#contributors)
- [Backers](#backers)
- [Sponsors](#sponsors)
# Getting started
You can install this awesome theme through the [Visual Studio Code Marketplace](https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-material-theme).
## Installation
Launch *Quick Open*
- 
Linux `Ctrl+P`
- 
macOS `⌘P`
- 
Windows `Ctrl+P`
Paste the following command and press `Enter`:
```shell
ext install material theme
```
And pick the one by **Mattia Astorino** (me) as author.
#### Packaged VSIX Extension
[Download the latest .vsix release](https://marketplace.visualstudio.com/_apis/public/gallery/publishers/Equinusocio/vsextensions/vsc-material-theme/latest/vspackage) file from the marketplace and install it from the command line
```shell
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](https://code.visualstudio.com/docs/extensions/install-extension#_side-loading).
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`:
```shell
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 one of the Material Theme variant from the list. After the activation the theme will set the correct icons theme for you, based on your picked theme variant.
## Fix File Icons
If you notice that the folder icons does not match the material theme active variant you can fix it with just a command.
Launch *Quick Open*,
- Linux `Ctrl + Shift + P`
- macOS `⌘ + Shift + P`
- Windows `Ctrl + Shift + P`
type `material theme` and select `Material Theme: Fix file icons` from the drop-down menu, this command will set the correct icon theme based on your active material theme variant.
## 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: Set accent color` and pick one color from the list.
## Disabling/enabling file icons auto-applying
By default material theme will apply the correct icons theme based on your active theme variant. To disable this behavior follow these steps:
Launch *Quick Open*,
- Linux `Ctrl + Shift + P`
- macOS `⌘ + Shift + P`
- Windows `Ctrl + Shift + P`
Type `material theme` and choose `Material Theme: Enable or disable icons auto-applying` and choose to disable or enable this behavior.
## Override theme colors
You can override the material theme ui and schemes colors by adding these theme-specific settings to your configuration. For advanced customisation please check the [relative section on the vs code documentation](https://code.visualstudio.com/docs/getstarted/themes#_customizing-a-color-theme)
### Color Scheme override
**Basic example**
```js
"editor.tokenColorCustomizations": {
"[Material Theme]": {
"comments": "#229977"
}
},
```
**Advanced example**
```js
"editor.tokenColorCustomizations": {
"[Material Theme VARIANT]": {
"sideBar.background": "#347890",
"textMateRules": [
{
"scope": [
"punctuation.definition.comment",
"comment.block",
"comment.line",
"comment.block.documentation"
],
"settings": {
"foreground": "#FF0000"
}
}
]
},
},
```
# Recommended settings for a better experience
```js
{
// 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](https://github.com/silvestreh/atom-material-ui) (by [@silvestreh](https://github.com/silvestreh))
- [IntelliJ IDEA](https://github.com/ChrisRM/material-theme-jetbrains) (thanks to [@ChrisRM](https://github.com/ChrisRM) and [@mallowigi](https://github.com/mallowigi)).
- [Vim](https://github.com/hzchirs/vim-material) (thanks to [@hzchirs](https://github.com/hzchirs)).
- [Terminal OSX](https://gist.github.com/mvaneijgen/4c56701215847dd5ddcf) (thanks to [@mvaneijgen](https://github.com/mvaneijgen)).
- [iTerm2](https://gist.github.com/Revod/3f3115f8d4b90fc986fd4b61441c2567) (by [@Revod](https://github.com/Revod)) and [iTerm2 Palenight](https://github.com/JonathanSpeek/palenight-iterm2) (by [@jonathanspeek](https://github.com/jonathanspeek)).
- [Hyper](https://github.com/equinusocio/hyper-material-theme).
- [ConEmu](https://gist.github.com/rajadain/b306b2ba71bd58a1df41) (thanks to [@rajadain](https://github.com/rajadain)).
- [Slack App](https://slack.com/) ( #263238,#2e3a40,#80CBC4,#FFFFFF,#13191C,#ffffff,#50fa7b,#FF5555 )
- [Nylas N1](https://github.com/jackiehluo/n1-material) (thanks to [@jackiehluo](https://github.com/jackiehluo))
- [Base16](https://github.com/ntpeters/base16-materialtheme-scheme) (by [@ntpeters](https://github.com/ntpeters))
# Other resources
- **AppIcon:** [Download](https://github.com/equinusocio/vsc-material-theme/files/989048/vsc-material-theme-appicon.zip) the official Material Theme app icon for Visual Studio code
## Contributors
This project exists thanks to all the people who contribute. [[Contribute]](CONTRIBUTING.md).
## Backers
Thank you to all our backers! 🙏 [[Become a backer](https://opencollective.com/vsc-material-theme#backer)]
## Sponsors
Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [[Become a sponsor](https://opencollective.com/vsc-material-theme#sponsor)]
---
Copyright © 2017 Mattia Astorino
