Geek Answers Handbook

How to change the current active color of a window tab in the atom editor

I am using Atom editor version 1.0 stable in ubuntu 14.04. my question is How to change the background color on the tab of the selected window ... (means the current tab). by editing the style.less file?

I tried,

.tab{ background-color:black; }

to change the color of the tab,

Well, this code only changed the tab colors, except for the current tab color.

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

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

I found this solution by opening the developer tools Ctrl + Shift + I and finding the element using the magnifying glass tool.

+7
source

Often I like to open several panels and have tabs in all of them. With multiple panels, several active tabs appear . Other answers here will display the “active” tab in all panels, rather than specifically setting the tabs you have selected.

The problem is the specificity of the selector .

Here is one way to specifically target only the selected tab, regardless of how many panels you open:

Open the Atom command palette (when shifting MAC + cmd + p) and find "style".

Select the "Application: Open Your Style Sheet" option.

Add this style:

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

Save the style.less sheet and see your changes!

Note. This has been tested using the Atom Material interface theme , although it doesn't matter which theme you use.

+2
source

None of them worked for me. Here is my solution (Atom 1.22.1):

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

You must copy this code and paste into your styles.less file so that 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; }
+1
source

When you select a tab, add the class = "active" tab

and below style in style.less file

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

what is 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); }

beautiful blue gradient.

0
source

More articles:


All Articles