Strange Formatting of PHP comments


I’m running Atom 1.8.0 and I notice that PHP comments are displayed strangely:

What’s special about the white on red comments and how I can change this? I’d just like all my PHP comments to be green.



Are you able to change a white-on-red comment to the normal grey and back again?

Comment colors are controlled by your syntax theme.


Under Themes I see a Syntax Theme dropdown with several names, like One Dark, Atom Dark, but I don’t see anywhere to change comment colors.


When I say that colors are controlled by the syntax theme, I mean that literally. You can check out the LESS files in the one-dark-syntax theme for examples. If you want to change the colors and aren’t familiar with CSS, I’d recommend browsing through the various theme packages to find one that suits you better. If you just want to change the colors of the comments, a rule addressing atom-text-editor::shadow .comment in your styles.less file will do the job.


Ah! Ok. Got it! I was expecting a nice drop down somewhere with text colors to select but I guess Atom wants you to actually change a css file yourself somewhere to change text colors. Ok, I can do that. This is still my first day with Atom so I’ve got a long way to go.



You don’t have to change the file (pedantic note: it’s LESS, so plain CSS does work, but you also get to use fun things like nesting and importing @ui_variables and @syntax_variables to make your life easier), but it’s easier for the devs and more powerful for the users to do it this way. There are essentially three levels of customization here. The first is changing your theme; there are a lot of very well-designed themes out there, and you can download and try them out without ever leaving Atom. The second is editing styles.less for if you want minor tweaks to an existing theme. The third level is to bake your own theme, which is really easy to do once you’re comfortable with LESS.


Ok, I’ll try first working with the styles.less file. I assume the way to get to it is to click the your stylesheet link in Settings |Themes:

But the file is only 33 lines and most is commented out so it looks like you have to already know the class of what you want to change so you can add something new to the file. Is there a way to do something like right-click a line and see what the current styling is and where it’s coming from? How would I know, for example, the class for comments? And where can I find all this information so I don’t have to bother you guys?



It’s faster to get through File -> Stylesheet... (Windows) or Edit -> Stylesheet... (OS X?/Linux).

Is there a way to do something like right-click a line and see what the current styling is and where it’s coming from?

Yes, if you open the window in dev mode (View -> Developer -> Open in Dev Mode...). I gave you the answer, though. You need atom-text-editor::shadow .comment to reference elements within the shadow DOM inside the editor element.


Yes, I know you gave me the class for comments. Thank you for that. But I want to learn to fish. The fish itself is not that important .

Thanks for your great help!