CODEWITHSUNDEEP
atom-editor
bradrice
bradrice

Reputation: 1755

Changing the color of the hidden character in Atom Text Editor

For some reason adding style to my style.less file doesn't seem to affect my editor. I'm trying to change the color of a hidden character. If I use this code in my style.less file:

atom-text-editor .invisible-character, :host .invisible-character {
  color: purple;
}

I don't get the color. If I check in the developer tool, this style is showing instead

atom-text-editor .invisible-character, :host .invisible-character {
  color: rgba(171, 178, 191, 0.15);
}

I don't see my styles in the dev tool. I just don't see how to get my styles to apply. I can't find documentation showing it either. Does anyone know how to do this? I am running Atom 1.2.7

Upvotes: 1

Views: 1227

Answers (1)

Dan Lowe
Dan Lowe

Reputation: 56627

You have to modify it in the context of the shadow DOM.

atom-text-editor::shadow .invisible-character {
    color: purple;
}

For now, at least. In Atom 1.13, they are removing the shadow DOM, at which point you should be able to do it using a regular selector.

/* Atom 1.13 or later */
atom-text-editor .invisible-character {
    color: purple;
}

Upvotes: 3

Related Questions