visual-studio-codethemescodehighlighter

How to change the color of a specified syntax in VSCode, without affecting the rest of the syntax that is colored by the theme?

I really like the V.S. Code theme, Abyss. On occasion I find that the theme makes my code difficult to read, the text rendered in the editor will look like it is blending into the background, therefore; I thought changing individual syntax color would be a good solution.

I want to be able to adjust a couple of color-tokens, while leaving the rest of the syntax unchanged. How can I select, and change the properties of color tokens, without impacting any other parts of the theme that's currently set in the editor?

enter image description here

I want to use the code syntax color of the GitHub dark default theme with the Abyss theme on the rest of UI.

enter image description here

I found a site (click to see) that suggests changing the syntax colors with the editor.tokenColorCustomizations property.

I am not able to understand that how can I copy the color configuration from GiHub dark default to the Abyss theme.

Solution

  • V.S. Code users have the ability to style the syntax that is displayed in the editor, as well as the ability to style the editor its self — this includes the workbench, and all off the items in the workbench. To start styling the workbench, or syntax in the editor, you must first add the following JSON properties to either your user-scoped settings.json file, or by adding it to a workspace-scoped settings.json.

    Example of a properly configured settings.json file:

    // "./.vscode/settings.json"
{
    "workbench.colorCustomizations": {
        "editor.background": "#08182F",
        "sideBar.background": "#00132D",
        "panel.background": "#00132D",
        "activityBar.background": "#002040",
        "editorGroupHeader.tabsBackground": "#00132D",
        "tab.inactiveBackground": "#00132D",
        "tab.activeBackground": "#003054",
        "tab.activeBorder": "#003054",
        "breadcrumb.background": "#003054",
        "statusBar.background": "#005280",
        "sideBar.border": "#103050",
        "titleBar.border": "#103050",
        "statusBar.border": "#103050",
        "menu.border": "#103050",
        "contrastBorder": "#103050",
        "panel.border": "#103050",
        "editorRuler.foreground": "#103050",
        "tab.border": "#103050",
        "tab.lastPinnedBorder": "#103050",
        "activityBar.border": "#103050",
    },

    "editor.tokenColorCustomizations": [
        {
            "scope": "punctuation",
            "settings": {
                "foreground": "#C4C4C4",
                "fontStyle": ""
            }
        },

        {
            "scope": "comment",
            "settings": {
                "foreground": "#246488",
                "fontStyle": ""
            }
        },

        {
            "scope": "string",
            "settings": {
                "foreground": "#98DAF4",
                "fontStyle": ""
            }
        },
    ]
}

    There are many more properties that can be used to style your editor and syntax. A good resource to refer to is this template, its from the YO CODE generator, and it is what several theme designers use as a starting point when creating a new theme.

    Theme Template (e.g. you don't have to make a theme to use the properties).

    The most useful tool at your disposal is when writing theme properties — just like in the example above — is VSCodes suggestion widget. The suggestion widget is most often used to auto complete code, however, its usefulness extends much further than finishing a line of text for you. If you type, "background", while you are focused inside of one of the colors, or tokenColors, properties a whole list of available background properties will be available to choose from, and you are not limited to just background properties, the suggestion widget will work for finding borders, foregrounds, icons, buttons, inputs, bars, highlights and a whole lot more


    Perhaps the best resource to read would be the VSCode Contributed Page on Color-Themes

    EDIT: If you download the GitHub theme, you can find the theme's JSON file, which is the source code for the "Dark GitHub Theme" in the following location:

    $HOME/.vscode/extensions/github.github-vscode-theme-4.1.1/themes/dark.json

    When ever you have a theme's source JSON Document, you can copy and paste individual properties from the theme you located, into your ./.vscode/settings.json file using the properties:


    NOTE: It takes some practice, and some reading to get good at creating themes, or even just configuring your current theme to customize it a bit like your doing now.


    ADDITIONAL HELP

    I think it might help if I explain what it is your doing.

    The workspace settings.json file, located in the root of each project...

    "./.vscode/settings.json"

    ...takes precedence over all other configuration files, therefore, when a setting, or property is being configured in two files, and one of the files is "./.vscode/settings.json" then the configuration set inside "./.vscode/settings.json" will win-out the configuration in the other file, because "./.vscode/settings.json" overrides any configurations it holds, that are also held somewhere else. (I Hope that makes sense)...

    Next to the workspace "settings.json" file, is the users settings.json file, which is located at:

    "$HOME/.config/Code/User/settings.json"

    So basically all you need to know at this point is your settings.json files are the word of the land, everything else is overridden. This is very important, because when you use the settings.json files to set color-token properties to highlight some syntax that is being colored by a theme, and your recoloring it because you don't like it, what you are doing, is overriding the theme's JSON file located in the themes extension directory @ $HOME/.vscode/extensions. If you don't set a property in a valid settings.json file, then the property will remain unchanged. This lets you select and choose which properties to change, by overriding the properties you don't like. And as I have stated in the comments and above, these are the properties you will use to preform the overrides.

    Rather than trying to copy and paste entire themes, just try to change a single element. Once you succeed at changing one element, then you can try changing several in unison.