Change Gutter Background Color


#1

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!


#2

This should be atom-text-editor:shadow


#3

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

#4

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.


#5

It’s in the Atom Flight Manual:

http://flight-manual.atom.io/using-atom/sections/basic-customization/#styling-the-editor


#6

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


#7

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.


#8

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