𝐆𝐫𝐮𝐯𝐛𝐨𝐱 𝐌𝐚𝐭𝐞𝐫𝐢𝐚𝐥

𝐃𝐚𝐫𝐤 𝐇𝐚𝐫𝐝 𝐅𝐥𝐚𝐭

𝐃𝐚𝐫𝐤 𝐌𝐞𝐝𝐢𝐮𝐦 𝐌𝐚𝐭𝐞𝐫𝐢𝐚𝐥

𝐃𝐚𝐫𝐤 𝐒𝐨𝐟𝐭 𝐇𝐢𝐠𝐡 𝐂𝐨𝐧𝐭𝐫𝐚𝐬𝐭

𝐋𝐢𝐠𝐡𝐭 𝐇𝐚𝐫𝐝 𝐅𝐥𝐚𝐭

𝐋𝐢𝐠𝐡𝐭 𝐌𝐞𝐝𝐢𝐮𝐦 𝐌𝐚𝐭𝐞𝐫𝐢𝐚𝐥

𝐋𝐢𝐠𝐡𝐭 𝐒𝐨𝐟𝐭 𝐇𝐢𝐠𝐡 𝐂𝐨𝐧𝐭𝐫𝐚𝐬𝐭

Marketplace | Registry | Repository | Issues | Changelog

This color scheme is a port of Gruvbox Material for Visual Studio Code and its forks.

Gruvbox Material is a modified version of Gruvbox, the contrast is adjusted to be softer in order to protect developers' eyes.

There are 3 palettes available in this color scheme, the screenshots above only show the material palette. See sainnhe/gruvbox-material for a preview of all palettes.

Features

Carefully designed color palette for eye protection.
Switch back to the original color palette whenever you like.
Customizable.
Rich support for common file types.
Semantic highlighting support.
Italic support.

Optimized File Types and Syntax Extensions: (click on this line to expand)

The following file types and syntax extensions are basically optimized, feedback is welcome :)

C#: builtin
C++: buildin, Better C++ Syntax
C: builtin
Clojure: builtin
CMake: CMake
CoffeeScript: builtin
CSS: builtin
Dart: Dart
Diff: builtin
Dockerfile: builtin, vscode-docker-syntax, Better Dockerfile Syntax
Elixir: vscode-elixir
Elm: elm
Erlang: erlang
F#: builtin
Fish: fish-vscode
Fortran: Modern Fortran
Git: builtin
Go: builtin
GraphQL: GraphQL, GraphQL for VSCode
Groovy: builtin
Haskell: Haskell Syntax Highlighting
Html: builtin
Java: builtin
JavaScript: builtin (~~Babel JavaScript~~ not recommend #6)
JSON: builtin
JSX: builtin
Julia: Julia
Kotlin: Kotlin Language
LaTex: LaTex
LESS: builtin
Lisp: Lisp
Lua: builtin, Lua Plus
Makefile: builtin
Markdown: builtin
ObjectiveC: builtin
Perl: builtin
PHP: builtin
PowerShell: builtin
Protobuf: vscode-proto3
Pug: builtin
PureScript: PureScript IDE
Python: builtin
R: builtin
reStructuredText: reStructuredText
Ruby: Ruby Language Colorization
Rust: builtin, vscode-rust-syntax
SASS: Sass
Scala: Scala Syntax (official)
Shell: builtin, Better Shell Syntax
SQL: builtin
Stylus: Stylus
Swift: builtin
Tmux: tmux
TOML: Better TOML
TSX: builtin
TypeScript: builtin
VimL: vscode-viml-syntax
VUE: jcbuisson.vue, liuji-jim.vue
Xml: builtin
YAML: builtin

Installation

Press extensions icon in your editor.
Search for sainnhe.gruvbox-material.
Select this extension and press install button.

Usage

Click the gear button in the lower left corner.
Click Color Theme.
Select Gruvbox Material in the list.

Customization

Several configuration options are provided, you can customize the palette, contrast, workbench style, etc. used in this theme.

Click the gear button in the lower left corner.
Click Settings.
Select Gruvbox Material and change the settings.

Note: For better syntax highlighting support, please:

Don't enable gruvboxMaterial.colorfulSyntax (this setting is disabled by default).
Disable semantic highlighting for all languages except editor.semanticHighlighting.enabled, see FAQ.

FAQ

Q: How to enable cursive italic keywords?

A: The italicKeywords is designed to use with fonts that support cursive italic styles. To enable this feature:

Install a font that supports cursive italic styles, for example: Fira Code iCursive Op(this is the font used in the screenshots).
Set the gruvboxMaterial.italicKeywords option to true in user settings.
(optional)Set the gruvboxMaterial.italicComments option to false in user settings.

Q: How to disable semantic highlighting?

In your settings.json:

To disable it globally: "editor.semanticHighlighting.enabled": false
For C/C++: "C_Cpp.enhancedColorization": "Disabled"
For C#: "csharp.semanticHighlighting.enabled": false
For Java: "java.semanticHighlighting.enabled": false

Related Projects

See this wiki page.

More Color Schemes

Contributing

See this article.

Credits

The color palette is based on gruvbox by @morhetz
The color palette is adjusted by @sainnhe
The icon is designed by @GulajavaMinistudio
The material workbench style is designed by @sainnhe
The flat workbench style is designed by @sainnhe
The high contrast workbench style is designed by @GulajavaMinistudio

Inspirations

morhetz/gruvbox: original gruvbox
atom.io: the white color in the dark variant
zefei/cake16: the black color in the light variant
material-theme/vsc-material-theme: the material workbench style
Binaryify/OneDark-Pro: the flat workbench style
Monokai Pro: the high contrast workbench style
Google Material Design

ronakg/gruvbox-material-vscode