Atom is so powerful that it blows my mind


I don’t know either :slight_smile: but you don’t need to know to overwrite. Probably in the core though.


Inspect the editor, you can find how the CSS is defined. But yeah, it’s in the core, we don’t have access to these files. Yet? :slight_smile:


OK, so I believe that we’re not using the same syntax theme. I’m using a Base16 one and the opacity is set a 1. I think you are using the default Atom Dark. Am I wrong? :wink:

Actually, we do. Try something like:

$ atom /Applications/

And, voilà! The LESS files are located in /app/static/


Actually, we do. Try something like:

I don’t think you’re understanding what @iam4x is saying - there’s no public repository for the core app with the .less to issue a pull request against.


I assumed that by “access to theses files” he meant “show the files content”. Also we were talking about editor.less, so maybe I misunderstood what @iam4x said, but maybe not.

Thank you, I’m well aware of that (and I believe everybody who reads this discussion platform is too).


I’m trying to do something similar to this, albeit a little different. I want invisible characters to be shown only when the text is highlighted. I tried this:

.editor {
    line-height: 2em;

    .invisible-character {
        opacity: 0;
    .invisible-character::selection {
        opacity: 1;

But apparently the ::selection pseudo-class doesn’t work? Unless I don’t understand something. Any suggestions?

Show invisibles only on text selection
Show distinct Spaces vs. Tabs on highlight, like Sublime Text
Change tabs to spaces

Seems like .invisible-character elements don’t actually get highlighted when you highlight. In the markup, there’s a .selection element within the .underlayer in the .editor that controls the highlighting. So, :selection won’t work, sadly.

Given that, I’m not really sure how to achieve a show-only-when-highlighted effect. Hope this helps, though.


Not quite what you were looking for, but I updated my css to show the white space darker on my current line.

.editor {
  .invisible-character {
    opacity: 0.3;

  .cursor-line .invisible-character {
    opacity: 1;


The way the current highlighting works is by placing a colored box behind the current text. The only solution I can think of right now is by setting the color of the invisible characters to be the same as your editor’s background-color.

.editor-colors {
    background-color: @base03;

.editor {
    .invisible-character {
        color: @base03;


@thgaskell – that’s perfect, works for me. Clever suggestion.


I feel extremely stupid, but I have tried a bunch of rules in my .atom/styles.less, and nothing happens. I tried closing and reopening, and still nothing. Is there anything I am missing?


I was just about thinking the exact same thing.

While it’s good for atom to be easy ‘hackable’, it’s quite obvious the ‘hidden’ characters should be low opacity by default to prevent distraction or a messy editor.


Have you checked the JavaScript console in the developer tools? IIRC I had errors there at some point, when I used @base03 as in one of the examples posted (probably because I’m using a later Atom).

Show invisibles only in selected text


Indeed, my variable @base03 was undefined.


So I’m trying to get @thgaskell’s hack working, but @base03 doesn’t seem correct anymore. I’m looking instead at something like @syntax-background-color or @base-background-color. But when I use either for some reason the invisibles just show up white - it’s acting like the variables form your ui theme and and syntax theme aren’t available in styles.less for some reason. Anyone know what I’m doing wrong?

Also, the new selector seems to be atom-text-editor::shadow .invisible-character not .editor .invisible-character.

Even when it does work through it seems like indentation guides get styled by this change as well. Realistically the only good solution to this probably lies with something like this: Show invisibles only in selected text


This works for now:

@import "syntax-variables";
atom-text-editor::shadow .invisible-character {
	color: @syntax-background-color;


The dots aren’t everywhere:

version atom :
••••channel =

version sublime :

I use this dots for indent. But i use them for non-breaking space too.
I would like to detect the non breaking point easily. Like a warning "you are doing a mystake dude ! ". "Thx Atom you rox ! :wink: "
If I copy/paste a text and there is a non-breaking space in it, the point won’t be print like normal space.
But maybe you have another solution like non-breaking space have a red background.


What is the syntax-theme you use for css?


There is a deprecation warning when atom-text-editor::shadow is used:
Starting from Atom v1.13.0, the contents of atom-text-editor elements are no longer encapsulated within a shadow DOM boundary. This means you should stop using :host and ::shadow pseudo-selectors, and prepend all your syntax selectors with syntax–. To prevent breakage with existing style sheets, Atom will automatically upgrade the following selectors:

atom-text-editor::shadow .invisible-character => atom-text-editor.editor .invisible-character
Automatic translation of selectors will be removed in a few release cycles to minimize startup time. Please, make sure to upgrade the above selectors as soon as possible.


I think it makes sense also to post a link to Github issue related to this –