Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 745
Decapitar Avatar asked Jun 12 '26 06:06

Decapitar


2 Answers

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

like image 64
Alexey Nikonov Avatar answered Jun 14 '26 10:06

Alexey Nikonov


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.

like image 41
cancerbero Avatar answered Jun 14 '26 09:06

cancerbero



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!