Search code examples
csscolorssyntax-highlightingsublimetext2color-scheme

Removing drastic Sublime Text syntax highlighting on named CSS colours

CSS has a variety of named colours you can use instead of hex/HSL/RGB values, such as "red", "lightcoral", and "maroon". For some reason, almost every colour scheme available for Sublime Text, including Monokai, highlights these - and specifically the CSS colour keywords, not any old incorrect syntax - in an unbearably awful way. Behold:

enter image description here

It seems to span across colour schemes:

enter image description here

What setting - or section of the syntax highlighting files - is causing this? I've had little luck on Google, given how search-proof this problem is.

Edit: The first example is SCSS, the second regular CSS.

Solution

  • The problem is the .tmLanguage syntax definition - the color keywords are being recognized as invalid.deprecated.color.w3c-non-standard-color-name.css and are being highlighted as such. You'll either have to edit the syntax file to change the scope, or stop using the deprecated color names.

    EDIT

    After reading through the CSS3 color specs, it looks like these color names are now supported by all major browsers, and are no longer deprecated. I updated my Packages/CSS/CSS.tmLanguage file and posted it on Github for your perusal.