Tab pane in editor - Change tab color by filetype - is it possible?


I would like to modify tab background color based on it’s filetype, in the tabpane.

Now it seems like I can’t do this just by modifying CSS alone, since the tab element is like this:

I can easily target the title, by doing something like:

But I can’t seem to target the tab itself. - Anyone know how I would go about doing that? I know Javascript very well, but am a total newbie to CoffeeScript and most of the inner workings of Atom.


No one? I’d appreciate even hints where to get started :slight_smile:


Okay, I managed to get it working. It’s not exactly 100% pretty, and I’m probably listening to the wrong event (but onDidOpen and the like didn’t seem to trigger - and this doesn’t introduce THAT much overhead, so I’ll keep it for now).

I used the following javascript code in init.js:

atom.workspace.onDidChangeActivePaneItem(function(editor) {
	var tabs = document.getElementsByClassName('tab');
	for(var i=0;i<tabs.length;i++) {
		var fileName = tabs[i].childNodes[0].getAttribute('data-name');
		var ext = fileName.substr(fileName.lastIndexOf('.') + 1);
		var className = 'filetype_' + ext;
		if (!tabs[i].classList.contains(className)) {

And then you can add the following to your styles file.

.tab.filetype_js {
	background-color: #ff23aa;