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

𝐇𝐚𝐫𝐝 𝐃𝐚𝐫𝐤

hard-dark

𝐌𝐞𝐝𝐢𝐮𝐦 𝐃𝐚𝐫𝐤

medium-dark

𝐒𝐨𝐟𝐭 𝐃𝐚𝐫𝐤

soft-dark

𝐇𝐚𝐫𝐝 𝐋𝐢𝐠𝐡𝐭

hard-light

𝐌𝐞𝐝𝐢𝐮𝐦 𝐋𝐢𝐠𝐡𝐭

medium-light

𝐒𝐨𝐟𝐭 𝐋𝐢𝐠𝐡𝐭

soft-light

Marketplace | Repository | Issues | Changelog

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

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

Installation

Via Marketplace

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

Via Quick Open

Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.

ext install sainnhe.gruvbox-material

Usage

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

FAQ

Q: What's the font used in the screenshots?

A: Fira Code iCursive Op

Q: How to enable italic in this theme?

A: See this blog.

Example config(enable italic in all themes):

    "editor.tokenColorCustomizations": {
        "textMateRules": [
            {
                "scope": "emphasis",
                "settings": {
                    "fontStyle": "italic"
                }
            },
            {
                "scope": "strong",
                "settings": {
                    "fontStyle": "bold"
                }
            },
            {
                "scope": "entity.other.attribute-name",
                "settings": {
                    "fontStyle": "italic"
                }
            },
            {
                "scope": "markup.underline",
                "settings": {
                    "fontStyle": "underline"
                }
            },
            {
                "scope": "markup.bold",
                "settings": {
                    "fontStyle": "bold"
                }
            },
            {
                "scope": "markup.heading",
                "settings": {
                    "fontStyle": "bold"
                }
            },
            {
                "scope": "markup.italic",
                "settings": {
                    "fontStyle": "italic"
                }
            },
            {
                "scope": "storage.type",
                "settings": {
                    "fontStyle": "italic"
                }
            },
            {
                "scope": "storage.modifier",
                "settings": {
                    "fontStyle": "italic"
                }
            },
            {
                "name": "String interpolation",
                "scope": [
                    "punctuation.definition.template-expression.begin",
                    "punctuation.definition.template-expression.end",
                    "punctuation.section.embedded"
                ],
                "settings": {
                    "fontStyle": "italic"
                }
            },
            {
                "scope": "keyword.control",
                "settings": {
                    "fontStyle": "italic"
                }
            },
            {
                "scope": [
                    "keyword.operator.new",
                    "keyword.operator.expression",
                    "keyword.operator.cast",
                    "keyword.operator.sizeof",
                    "keyword.operator.logical.python"
                ],
                "settings": {
                    "fontStyle": "italic"
                }
            },
            {
                "name": "this.self",
                "scope": "variable.language",
                "settings": {
                    "fontStyle": "italic"
                }
            },
            {
                "name": "@Decorator",
                "scope": [
                    "meta.decorator punctuation.decorator"
                ],
                "settings": {
                    "fontStyle": "italic"
                }
            },
            {
                "scope": [
                    "punctuation.definition.comment",
                    "comment"
                ],
                "settings": {
                    "fontStyle": "regular"
                }
            }
        ]
    }

See gruvbox-material/gruvbox-material

Contributing

See CONTRIBUTING.md

Credits

The color palette is based on gruvbox by @morhetz
The color palette is adjusted by @sainnhe
Workbench colors are based on jdinhify/vscode-theme-gruvbox
The icon 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
Google Material Design

Gruvbox Material

sainnhe