CODEWITHSUNDEEP
colorsatom-editorappearance
Amir Abdullaev
Amir Abdullaev

Reputation: 141

How can I change the gutter's background colors in atom

How can I change these background colors?

Upvotes: 1

Views: 17624

Answers (6)

Silvia42
Silvia42

Reputation: 129

The background can be easily changed through the menu:

ATOM -> Preferences -> Themes -> Choose a theme

You can set UI theme and Syntax theme.

Atom Dark, Atom Light, One Dark, One Light, ...

Upvotes: 0

Amir Abdullaev
Amir Abdullaev

Reputation: 141

I found the solution. You should edit these less attributes in styles.less (usually in the file ~/.atom/styles.less)

atom-text-editor::shadow .gutter {
    background-color: #282828;
}
atom-text-editor::shadow .gutter .line-number {
    background-color: #282828;
}

I hope someone it will be useful

Upvotes: 9

Basavaraj Hadimani
Basavaraj Hadimani

Reputation: 1104

Go to Packages->setting views-> manage themes-> UI theme

Change the UI theme to ONE LIGHT

Change the Syntax theme to ONE LIGHT

Upvotes: 0

ylev
ylev

Reputation: 2569

Just to add : styles.less is located under c:\Users\youruser\.atom\styles.less

Upvotes: 0

Sandya
Sandya

Reputation: 61

After lot of search, This is what worked for me.. Go to tab Packages -> settings view -> manage themes. On top you see an option - you can also style Atom by editing your stylesheet. Click this and edit the settings css as needed. There is already a tag available as

atom-text-editor { .. } Inside this one, i gave values Color: black; background-color: white;

Upvotes: 5

allap
allap

Reputation: 696

Go to atom install directory, default is .atom in the $HOME directory, open styles.less

Here is my final configuration, which gave me lighter background:

// style the background color of the tree view
.tree-view {
  //background-color: whitesmoke;
}

// style the background and foreground colors on the atom-text-editor element itself
atom-text-editor {
    color: #404040;
    background-color: #FFFAED;
}

// To style other content in the text editor's shadow DOM, use the::shadow expression
atom-text-editor::shadow .cursor {
  //border-color: red;
}

To customize colors to your taste refer to HEX RGB values at http://www.rapidtables.com/web/color/RGB_Color.htm

Tested with 

Ubuntu 16.04
Atom   1.12.9

Upvotes: 4

Related Questions