How to set preferred syntax colors per language setting?

I’m trying to customize my styles.less file for syntax highlighting tuned to my preferences per language. For example: a cs variable might be a different color than a java variable.
I’m trying to figure out the API that lets me manipulate the syntax colors, but when I inspect a certain element and get the CSS selectors, it doesn’t work.

For example: In a cs file I want to change the color for all cs only variables. In the inspector, a variable’s CSS class is syntax--variable syntax--other syntax--cs. However that doesn’t register in the styles.less file. .syntax--variabledoes register, but I don’t want to change it for all the languages.

How do I get the correct language type selector in the CSS?

It would be helpful to know what exactly you put into your stylesheet. You should probably use the result from the Copy selector entry in the inspector’s context menu.

1 Like
.syntax--variable .syntax--other .syntax--cs {
   color: rgba(25, 190, 200, 1);
}

This is what I get from copy selector.

body > atom-workspace > atom-workspace-axis > atom-workspace-axis > atom-pane-container > atom-pane > div > atom-text-editor:nth-child(1) > div > div.scroll-view > div:nth-child(1) > div.lines > div:nth-child(4) > div:nth-child(2) > span > span > span:nth-child(5)

Which doesn’t make CSS sense.

The text editor element has a data grammar property somewhere nearby that can be targeted.