Visual Studio Code

Visual Studio Code

Monokai-Flat theme for VSCode based on Material Theme, currently tested for C#, Java, Python, HTML, CSS, XML, JSON, YAML, Markdown which Markdown, CSS, YAML need update

Installation

1. Install Material Theme extension
2. Select Material Theme theme (Command Palette > Preferences: Color Theme > Material Theme)
3. Open settings json file (Command Palette > Preferences: Open Settings (JSON))
4. Copy and paste the content of Monokai-Flat.jsonc without the first {} scope
5. You can now customise the theme colors as you please

Customization

You can change each color by changing the appropriate property in the JSON config. Workbench colors are after // Workbench Theme and language specific syntax after // Syntax Theme.

All properties are grouped so you can easily select what you want to modify and do a Replace on one color.

You can find all used colors in the main README and in the color palette.

Cursor color

Cursor color (orange) is defined by the property "editorCursor.foreground": "#FD971F" in // Editor Colors

Separation/Border colors

You can change the purple separation color using the following properties:

"activityBar.border": "#B287FF",
...
"sideBar.border": "#B287FF",
...
"editorGroup.border": "#B287FF",
...
"panel.border": "#B287FF",
"panelTitle.activeBorder": "#B287FF",
...

"statusBar.border": "#B287FF",
"statusBarItem.prominentBackground": "#B287FFDD",
...

Notes on accent color

Changing accent color using Material Theme command override this theme settings (you can recover from it easily by doing an Undo in the settings file).

To change accent color, find // Accent color in the settings, select all accent color properties and do a Replace.

Community Material Theme

This theme has not been tested on Community Material Theme but it should work by just changing

// Workbench Theme
"workbench.colorCustomizations": {
    "[Material Theme]": {

To

// Workbench Theme
"workbench.colorCustomizations": {
    "[Community Material Theme]": {