How to change currently active window tab color in atom editor

Question

I'm using atom editor version 1.0 stable in ubuntu 14.04. my question is, How can I change the background colour of currently selected window tab... (means current tab..) by editing style.less file?

I tried,

.tab{ background-color:black; }

to change the tab color,

but, this code only changed all tab colors except current tab color.

So my question is, how can I change the color of current tab in atom editor by editing style.less file?

Mistreat

Answer 1

.tab-bar .tab[data-type="TextEditor"]::after {
  background-color: rgba(20,28,30,0.8);
}

I found this solution by opening developer tools Ctrl+Shift+I, and finding an element by using magnifier tool.

Belorussia

Please consider adding some detail to your answer. – Sympathin

Answer 2

None of these worked for me. Here was my solution (Atom 1.22.1):

.tab-bar .tab.active[data-type$="Editor"] {
 background-color: #167373;
}

Foxe

And if using pinned tabs package, .tab.pinned.active[data-type$="Editor"] { – Tilefish

Answer 3

You have to copy this code and paste in your styles.less file, that's it.

//My awesome tab
.tab-bar .tab.active[data-type="TextEditor"]::after {
background-color: black;
border-bottom: whiTe;
}

.tab-bar .tab.active[data-type$="Editor"] .title {
 background-color: black;
 z-index: 2;
 }

Tamis

Worked for me on Atom 1.40.0 regardless of the theme. Exactly what I needed. – Hapte

Answer 4

Often I like to open multiple panes and have tabs in all of them. With multiple panes comes multiple active tabs. The other answers here will style the "active" tab in all panes, and not specifically target the tab you have selected.

The problem is selector specificity.

Here's one way to specifically target only the tab you have selected, no matter how many panes you have open:

Open your Atom command palette (on a MAC shift+cmd+p) and search for 'style'.

Select the option for 'Application: Open Your Stylesheet'.

Add this style:

.pane.active {
    .tab.active {
        background-color: #00BCD4;
    }
}

Save the style.less sheet and see your changes!

Note: This was tested while using the Atom Material UI theme, though it shouldn't matter which theme you're using.

Prophase

@Jason Awbrey - In Atom 1.17 it's not possible to use .pane.active anymore because the .active class only gets added when there's a split pane. In Chrome 60 a :focus-within pseudo class will get introduced, then it should be possible to use something like .pane:focus-within .tab.active - please edit your answer accordingly :) – Clingy

Works for me in Atom 1.39.1 – Grainger

Answer 5

that's my solution for atom 1.23.1 File > Stylesheed > styles.less

.texteditor.tab.sortable.active::before, .texteditor.tab.sortable.active, .texteditor.tab.sortable.active::after {
        background-image: -webkit-linear-gradient(top, #35404a, #4A7FB2);
}

a beautiful blue gradient.

Christyna

Answer 6

On selection of tab add a class="tab active"

and below style to your style.less file

.tab.active {
    background-color:black;
}

Roden

can you provide fiddlejs url – Roden

jsfiddle.net - create an account and try to reproduce same working and reply with your fiddle url – Roden

first of all, how we could assign 2 classes(.tab,.active) to the same element (tab)? – Mistreat

First find out on selection of tab, is any class is added dynamically if yes then add css property to that CSS class name. – Roden

i dont know whether it's dynamically changing or not.. But your answer is not working..! If, you know the correct solution for my question tell me.. – Mistreat

Answer 7

Extending this for other tab types (e.g. settings, git, search results), I'm currently enjoying:

// mine tab color customizations:
.tab-bar .tab.active {
  background-color: #00593c;
}

.tab-bar .tab.active[data-type$="Editor"] {
  background-color: #103a3a;
}

at style.less file

Baluchi