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) - [Set the accent color](#set-the-accent-color) - [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`, choose `Preferences: Color Theme`, and select one of the Material Theme variants from the list. After activation, the theme will set the correct icon theme based on your active theme variant. ## Fix File Icons If you notice that the folder icons do not match the active Material Theme 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`, 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)]

---