Change color of selected text


#1

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
#2

I think it’s

.editor .selection .region


#3

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
#4

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;
}


#5

This is a great tip that lead me to set .editor.is-focused 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);
}

.editor.is-focused  .selection .region {
background-color: yellow;
}

#6

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?


#7

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


#8

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.


#9

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:


#10

Added that for you :laughing:


#11

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
#12

Doesn’t for me.


#13

This one worked for me. Thanks!


#14

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