CODEWITHSUNDEEP
vscode-extensionsvisual-studio-code
Decapitar
Decapitar

Reputation: 89

adding custom colors to Vscode

hello i recently switched from Atom to Vs-code and tried some of the tutorials that explain on how to add Language Support on theyre website i understand that language support supposed to have colorizer in it

the question is how do i add colors to custom languages? im used to my own colors when i work on basically every language i have a chill faded look so it wont hurt my eyes

and i created a CSS language support after i tried it out i saw that there was no colors in it but for some reason in the VScode setting [css]: {} got added but it was empty

can someone guide me to what i should do next or how to add colors i couldnt find any information in VScode docs or the internet

EDIT: i created an empty language support without importing textmate file using yo generator.

Upvotes: 3

Views: 9453

Answers (3)

tiffon
tiffon

Reputation: 5040

Something like this might be useful:

https://code.visualstudio.com/docs/getstarted/themes#_customizing-a-color-theme

It lets you customize colors via your user settings, e.g. the following would change the color of property names in JSON files:

{
  "editor.tokenColorCustomizations": {
    "textMateRules": [
      {
        "scope": "support.type.property-name.json",
        "settings": {
          "foreground": "#ff0000"
        }
      }
    ]
  }
}

Upvotes: 2

cancerbero
cancerbero

Reputation: 7037

This is the way I found to completely customize colors. In your settings.json, for texample for black background and very reeddish errors:


"workbench.colorCustomizations": {

    // general settings - will apply to all color themes:
    "editorError.border": "#ff0000",
    "editor.background": "#000000",

    // you can customize for a single theme (fpr example, for dark themes)
    "[dark]": {
        "editor.background": "#000000",
        "terminal.background": "#000000",
        "editorError.foreground": "#ff1144",
        "errorForeground": "#ff1144",
    },
},

Settings will autocomplete properties, but just in case you can see the whole list of colors with "Generate color theme from current settings" command.

Upvotes: 3

Oleksiï Nikonov
Oleksiï Nikonov

Reputation: 5578

If you want to customize specific color or other stuff basing on a existing color theme, then open command palette > developer:generate color theme from current settings.

Choose wanted entity and write it in scope and settings as in the example beneath. (I looked for customizing Class color because in the theme "Monokai Dimmed",imo class color there is awful)

"editor.tokenColorCustomizations": {
    "textMateRules": [{
        "scope": "entity.name.class, entity.name.type", 
        "settings": {
            "foreground": "#A6E22E"
         }
    }]
}

That's similar to the previous answer

Upvotes: 5

Related Questions