Change Gutter Background Color


I would like to change the background color of the gutter/line number backgrounds.

I’ve tried both of these in my styles.less but neither work:

.editor .gutter {
    background-color: #cccccc;

atom-text-editor .gutter {
    background-color: #cccccc;

I also tried copying the styles directly from the Chrome inspector and changing the color with the same result:

atom-text-editor .gutter, :host .gutter {
    background-color: #cccccc;

I have saved and reloaded the window after each change. So, I’m starting to think I’m doing something that is obviously wrong. Any suggestions? I don’t want to build a theme; just tweak this setting. Current UI/theme is Unity/Atom Dark. Thanks!


This should be atom-text-editor:shadow


Thanks @mark_hahn - works perfectly.

Here’s the code I’ve added to the styles.less file:

atom-text-editor::shadow .gutter {
    background-color: #373737;


What’s the best way to have known we needed to add ::shadow?

I would have liked to find it somewhere in documentation rather than the message board.


It’s in the Atom Flight Manual:


ah thank you. was looking in the later section “Creating a Theme”


You don’t need to add ::shadow when creating a syntax theme because the stylesheets from a syntax theme are loaded inside the shadow boundary.


thanks, yes I am modifying my UI theme however, so ::shadow worked