Highlight/lightening background of selected text in editor window


Hi everyone,

I recently started using an external monitor and the highlighting in the editor window isn’t enough of a contrast. I got really used to using the “One Dark” theme and I really like it so I’d like to keep using it if possible, but the problem is that the lightening it does to show which text is selected isn’t bright enough. I’m referring to the background lightening (or darkening with light themes) like left-clicking and moving the cursor, or double clicking, or holding shift and moving around with the arrow keys. I suspect it has something to do with the following line in the style sheet, but I can’t figure out how to edit it in my own personal LESS file as it doesn’t seem to have any effect when I just change the number in the LESS file and save it:

@syntax-selection-color: lighten(@dark-gray, 10%);

then it’s called here

.selection .region { background-color: @syntax-selection-color; }

I’ve tried changing the value in both places but to no avail. Any chance anyone can help me out so I don’t have to give up the syntax theme I’ve really enjoyed using but can still work on my external monitor?




Poking around on a few other threads and trying a whole bunch of solutions later, I’ve found a solution to my own problem:

Not quite sure what the above parameters of the LESS file do then. I’m also a total styling Newbie… And an atom discuss newbie so I can’t figure out how to delete my original post. Any help on either front would be appreciated (just what the original variables controlled and how to delete this post or mark it as solved).



The key part here is the atom-text-editor::shadow selector. That’s necessary for the compiled CSS to know that it’s going inside the shadow-DOM within the <atom-text-editor> tag, and any styling you write that addresses things inside a text editor pane should include that.