Change color of selected text


Hi, which css selector should I have to change the color of selected text?

Coloring text
Spyder-like automatic find selection?
Change colour of selected text

I think it’s

.editor .selection .region


This will not allow you to change the selected text color, only the selection background color. The selection div representing the current selection is a child of the editor underlayer, while the editor text lies in lines and have no markup that correspond to the text selection.

Change colour of selected text

I have added this to the stylesheet, but when I select some text (after a restart) the background color does change. Only when I select some other window and the focus is lost on Atom, the selected text becomes yellow.

.editor .selection .region {
background-color: yellow;


This is a great tip that lead me to set as well. Now highlighted text shows up as yellow when the window is in focus, and grey when the window is not in focus:

.editor .selection .region {
background-color: rgba(0, 0, 0, 0.2);
}  .selection .region {
background-color: yellow;


This seems to work well, except when the text you’re selecting has its own custom background-color. Then, because of shadow-DOM, it seems impossible to style all the selected text inside the selection with .editor .selection .region. In other words, the custom background-color remains what it was as unselected. I’ll admit I know very little about shadow DOM, however. Any ideas how to work around this?


What you’re describing is not a Shadow DOM issue. Selections (and other markers) are on a different Z-level than the actual text. So the text’s background color is drawn on top of the marker. There may be a solution to this, but I’m Not a CSS Guy™ … so I don’t know off the top of my head what it is.

/cc @abe @simurai @braver


That makes sense, thank you. It’s really not a critical issue or anything, more of a curiosity I ran across when working on my theme.


The selection highlight isn’t like the highlighting that happens in a website, it’s actually div's that are drawn in a layer beneath the editor text. The editor is wrapped in a div that gets a has-selection class if a selection is present, so you could use that to de-activate custom backgrounds in the editor layer if selections are present to make sure the selection highlights are always visible.

PS. where do I get a “CSS-Guy” badge? :wink:


Added that for you :laughing:


With Atom 1.0, this seems to do the trick:

atom-text-editor::shadow .selection .region {
  background-color: LightGoldenRodYellow;

Highlight/lightening background of selected text in editor window

Doesn’t for me.


This one worked for me. Thanks!


atom-text-editor::shadow is depreciated, use instead: .editor