This is a question I got pretty frequently “What color theme are you using on VS Code?”. So I thought I would share my VS Code color template configuration.

Buy Me a Coffee? Your support is much appreciated!

For my VS Code color template, I am using One Dark Pro by binaryify with some of my own customizations see the JSON settings below.



Color Settings in JSON  

"editor.tokenColorCustomizations": {
    "textMateRules": [            
        {
            // "comment symbols",
            "scope": "punctuation.definition.comment",
            "settings": {
                "foreground": "#ffffff",
                "fontStyle": ""
            },
        },

        {
            // "long comment",
            "scope": "string.quoted.docstring.multi.python",
            "settings": {
                "foreground": "#ffffff",
                "fontStyle": ""
            },
        },            
        {
            // "comment text",
            "scope": "comment",
            "settings": {
                "foreground": "#a8eeb9",
                // "fontStyle": "italic bold"
                "fontStyle": "italic"
            },
        },            
        // { 
        //     // Long comment symbol
        //     "scope": "punctuation.definition.string.begin,punctuation.definition.string.end",
        //     "settings": {
        //         "foreground": "#ffffff"
                
        //     }
        // },

        {
        "scope": "markup.quote.markdown",
        "settings": {
            "foreground": "#184394"
        }
        },
        {
            "name": "Python Keyword Control",
            "scope": "keyword.control.import.python,keyword.control.flow.python",
            "settings": {
                "fontStyle": ""
            }
        },
    ]
},
"workbench.colorTheme": "One Dark Pro",
"workbench.colorCustomizations": {
    "editor.background": "#122B3A",
    "activityBar.background": "#122B3A",
    "terminal.background": "#122B3A",
    "tab.inactiveBackground": "#1D2B3A",
    "tab.activeBackground": "#323f4d",
    "tab.border": "#a3a2a2",
    "tab.unfocusedHoverBackground": "#D73A49",
    "tab.unfocusedHoverForeground": "#ffffff",
    "tab.hoverBackground": "#323f4d",
    "tab.hoveroreground": "#ffffff",
    "editorGroupHeader.tabsBackground": "#1D2B3A",
    "menu.background": "#1D2B3A",
    "titleBar.activeBackground": "#1D2B3A",
    "titleBar.inactiveBackground": "#454F5E",
    "titleBar.activeForeground": "#ffffffb6",
    "editorLineNumber.foreground": "#ffffff83",
    "sideBar.background": "#122B3A",
    "editor.lineHighlightBackground": "#1073cf2d",
    "editor.lineHighlightBorder": "#9fced11f"
},