Color tab by language

Posted by dafi on 2009-03-26 10:27

I'm not sure somebody already developed it but I needed and after googling without success I've implemented myself.

If it already exists please point me to the right direction.

The macro allows to color view tabs by language

Consider I want to implement it as extension with a pref panel from which user can set style for all Komodo supported language but if it already developed I will discard my code.
Should be cool also to collect different styles (like stylish)
I've added on 5 styles (PHP, Javascript, HTML, CSS, all XML dialects) and color combinations are very ugly, I know :(

ColorTabByLang.kpz3.03 KB

stan | Thu, 2009-03-26 10:32

Perhaps an icon in front of each tab can improve the appearance a bit? Just a thought.

dafi | Thu, 2009-03-26 10:35

Do you say icon replacing color? Sure can be done

Both options can be added and user can choose
- only icon
- only color
- both

But I need someone draws icons :P

Enhance KomodoEdit with MoreKomodo

stan | Thu, 2009-03-26 10:41

Yeah that can be tough, no designers around : ) I am no good either. Anyway, it was just a though should you consider to add more features at some point.

pd | Thu, 2009-03-26 11:13

> But I need someone draws icons :P
Why don't you use the default icons from the respective languages sites?

nathan | Thu, 2009-03-26 11:16

I would recommend using the famfamfam icons, since this is what Komodo uses.

I just tested icons out of curiousity and it's aint that hard to implement but it doesn't really have any added value imo.. the colors alone are sufficient for me :)

langMap["PHP"] = "color: #000 !important; background-color: #9999CC !important; background-image: url('') !important; background-repeat: no-repeat; background-position: left; padding-left: 18px;";

nathan | Thu, 2009-03-26 10:55

Once again Stan; you are my hero! :)

Personally I wouldn't use an icon feature.

One thing that I've been longing for since a long time though, is to have a double tab bar.. and by that I mean have the tabs spread over 2 bars (vertically positioned underneath each other). Once a certain amount of tabs are open.. pretty much the same way Firefox does it :) Anyway, this is not related to this macro in any way.. but since you seem quite experienced in the field.. perhaps you'd be interested to make such a modification :)

stan | Thu, 2009-03-26 10:57

I think I don't deserve the hero award, not just yet at least :)

dafi | Thu, 2009-03-26 11:00

> but since you seem quite experienced in the field

I'm not so experienced (sob sigh) :(

A double tab isn't so easy (IMHO) but I like the idea

Enhance KomodoEdit with MoreKomodo

nathan | Thu, 2009-03-26 11:10

Oops.. I'm a bit embarrassed.. I read Stan as the last replier and assumed it was his macro .. Very sorry about that! (You are still my hero though, Stan ;))

My praise goes to you dafi, a simple Macro but a very nice idea :) This will make my work in Komodo Edit a lot more intuitive.

dafi | Thu, 2009-03-26 11:14

I'm this kind of hero

Enhance KomodoEdit with MoreKomodo

stan | Thu, 2009-03-26 11:18


Oh very dangerous indeed. Here's what Dafi's TODO list looks like: "My next macro will transfer everyone's abilities to code in their programming language of choice to ME!"
Ultimate power :D

dafi | Thu, 2009-03-26 11:21


Enhance KomodoEdit with MoreKomodo

nathan | Thu, 2009-03-26 10:59

langMap["Smarty"] = "color: #000 !important; background-color: #F0C040 !important;";

To match the Smarty homepage :)

dafi | Thu, 2009-03-26 11:03

Smarty added

Enhance KomodoEdit with MoreKomodo

nathan | Fri, 2009-03-27 06:40

Since you suggested it would be cool if everyone would share their styles; here's mine..

(only includes the ones I use myself).

        langMap["HTML"] = "color: #000 !important; background-color: #DAF1F0 !important;";
        langMap["JavaScript"] = "color #000 !important; background-color: #BCE9AD !important;";
        langMap["PHP"] = "color: #000 !important; background-color: #9999CC !important;";
        langMap["Smarty"] = "color: #000 !important; background-color: #F0C040 !important;";

On a side note, you should really place an event handler in your script and have it execute on startup instead.. as in it's current state it would not color tabs that are launched when restoring the last session on startup.

dafi | Fri, 2009-03-27 06:43

I'm working to the extension, no more macro

The first version (without UI to define colors) is ready
Enhance KomodoEdit with MoreKomodo

dafi | Mon, 2009-03-30 09:38

I've released the extension version of the macro.

Something is changed from the macro behavior, the patterns are based on file names.

Only a few file are colored (only my own favorites).

If you want I can add any other file scheme combination.

Share you color scheme ;)

You can download from colortab

Enhance KomodoEdit with MoreKomodo

nathan | Tue, 2009-03-31 08:31

Is there an easy way to import / export color schemes? In order to share them.. :p

dafi | Tue, 2009-03-31 08:51

Under profile there is the folder dafizilla and inside it the file colortab.json, you can copy it to a different profile directory to 'export' settings.

I want to add a section on website with color schemes preview and download feature but only if the extesion will have a few users.

You can quicky open the profile directory using the macro I use for myself.

var currProfPath = Components.classes[";1"]
    .get("PrefD", Components.interfaces.nsILocalFile)


Enhance KomodoEdit with MoreKomodo

nathan | Tue, 2009-03-31 08:48

Regardless; here are mine:

color: rgb(0, 0, 0); background-color: rgb(246, 250, 125); border: 1px solid #000 !important; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; background-image: url(;

color:#000; background-color:#FFCC99; border: 1px solid #000 !important; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; background-image: url(;

color: rgb(0, 0, 0); background-color: rgb(190, 206, 161); border: 1px solid #000 !important; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; background-image: url(;

color: rgb(0, 0, 0); background-color: rgb(197, 212, 242); border: 1px solid #000 !important; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; background-image: url(;

background-image: url(;

It would be really cool if there was a way you could define different styles depending on the state of the tab (ie; selected, hovered or not selectd).

dafi | Tue, 2009-03-31 09:07

> It would be really cool if there was a way you could define different styles depending on the state of the tab (ie; selected, hovered or not selectd).

I'm working on it but honestly isn't critical from me, but believe me I'm working on it...

Enhance KomodoEdit with MoreKomodo

veryvito2 | Mon, 2013-03-11 19:40

I've used Colortabs for years now, but I notice that with Komodo 8.0, the colors now only appear on rollover and active tabs. Any chance for an 8.0 version that brings the previous functionality back to 8.x? Thanks for the great extension/macros.

tarulia | Wed, 2013-03-13 10:58

I assume you are using OSX? I'm having the same problem there, but it works just fine on Windows :/ (though I did a report a few days ago on this thread but it's nowhere to be found o.O)

it's still here

veryvito2 | Wed, 2013-03-13 11:31

Yes, thanks. I should have specified that the issue does appear to be on OS X.

veryvito2 | Wed, 2013-03-13 19:27

It looks like there's a background image applied to the tabs in the OS X skin. Adding the following to userChrome.css (to remove the image that is blocking the background color) may be enough to handle this, but as I'm now unable to install ColorTabs.xpi on Komodo 8, I haven't tested:

#tabbed-view tabs > tab { background-image:none !important;}

That said, I actually decided to forego the extension altogether (It's a great extension, though!) and, thanks to several hints spread throughout this forum, managed to piece together a nice userChrome.css file that I actually like better (as it includes fancy-pantsy icons, too). I've included an image and the CSS code here, in case anyone else wants to give it a shot.

/* Base #ecebee mixed with 50% of a given colour */
#tabbed-view tabs > tab .tab-image-left
        background-image: url(chrome://famfamfamsilk/skin/icons/page_white.png) !important;
        height:           16px !important;
        width:            16px !important;
        opacity:          0.75;
                margin-left:6px !important;
                margin-right:-10px !important;
        -moz-opacity:     0.60;

#tabbed-view tabs > tab:hover .tab-image-left,
#tabbed-view tabs > tab[selected="true"] .tab-image-left
        opacity:      1;
        -moz-opacity: 1;

#tabbed-view tabs > tab[label$=".php"] { background-color: #d8f0fb !important; background-image:none !important;}
#tabbed-view tabs > tab[label$=".php"] .tab-image-left  { background-image: url(chrome://famfamfamsilk/skin/icons/page_white_php.png) !important; }

#tabbed-view tabs > tab[label$=".blade.php"] { background-color: #d8f0fb !important; background-image:none !important;}
#tabbed-view tabs > tab[label$=".blade.php"] .tab-image-left { background-image: url(chrome://famfamfamsilk/skin/icons/page_white_code_red.png) !important; }

#tabbed-view tabs > tab[label$=".inc"] { background-color: #d8f0fb !important; background-image:none !important;}
#tabbed-view tabs > tab[label$=".inc"] .tab-image-left  { background-image: url(chrome://famfamfamsilk/skin/icons/page_white_php.png) !important; }

#tabbed-view tabs > tab[label$=".module"] { background-color: #d8f0fb !important; background-image:none !important;}
#tabbed-view tabs > tab[label$=".module"] .tab-image-left  { background-image: url(chrome://famfamfamsilk/skin/icons/page_white_php.png) !important; }

#tabbed-view tabs > tab[label$=".test"] { background-color: #d8f0fb !important;}
#tabbed-view tabs > tab[label$=".test"] .tab-image-left { background-image: url(chrome://famfamfamsilk/skin/icons/accept.png) !important; }

#tabbed-view tabs > tab[label$=".html"] { background-color: #fff2ce !important;  background-image:none !important;}
#tabbed-view tabs > tab[label$=".html"] .tab-image-left { background-image: url(chrome://famfamfamsilk/skin/icons/html.png) !important; }

#tabbed-view tabs > tab[label$=".rb"] { background-color: #f78e98 !important; background-image:none !important;}
#tabbed-view tabs > tab[label$=".rb"] .tab-image-left { background-image: url(chrome://famfamfamsilk/skin/icons/page_white_ruby.png) !important; }

#tabbed-view tabs > tab[label$=".xml"] { background-color: #ffb868 !important; background-image:none !important;}
#tabbed-view tabs > tab[label$=".xml"] .tab-image-left { background-image: url(chrome://famfamfamsilk/skin/icons/page_white_code.png) !important; }

#tabbed-view tabs > tab[label$=".css"] { background-color: #c6f4b6 !important;  background-image:none !important;}
#tabbed-view tabs > tab[label$=".css"] .tab-image-left { background-image: url(chrome://famfamfamsilk/skin/icons/css.png) !important; }

#tabbed-view tabs > tab[label$=".txt"] { background-color: #ced0ff !important;}
#tabbed-view tabs > tab[label$=".txt"] .tab-image-left  { background-image: url(chrome://famfamfamsilk/skin/icons/page_white_text.png) !important; }

#tabbed-view tabs > tab[label$=".py"] { background-color: #78e45b !important; background-image:none !important;}
#tabbed-view tabs > tab[label$=".py"] .tab-image-left { background-image: url(chrome://famfamfamsilk/skin/icons/medal_bronze_2.png) !important; }

#tabbed-view tabs > tab[label$=".db"] { background-color: #deff33 !important; background-image:none !important;}
#tabbed-view tabs > tab[label$=".db"] .tab-image-left { background-image: url(chrome://famfamfamsilk/skin/icons/database.png) !important; }

#tabbed-view tabs > tab[label$=".sql"] { background-color: #e6ff66 !important; background-image:none !important;}
#tabbed-view tabs > tab[label$=".sql"] .tab-image-left { background-image: url(chrome://famfamfamsilk/skin/icons/database.png) !important; }

#tabbed-view tabs > tab[label$="readme"] { background-color: #ff8566 !important; background-image:none !important;}
#tabbed-view tabs > tab[label$="readme"] .tab-image-left { background-image: url(chrome://famfamfamsilk/skin/icons/page_white_text.png) !important; }

#tabbed-view tabs > tab[label$="htaccess"] { background-color: #ffb399 !important; background-image:none !important;}
#tabbed-view tabs > tab[label$="htaccess"] .tab-image-left { background-image: url(chrome://famfamfamsilk/skin/icons/group_edit.png) !important; }

#tabbed-view tabs > tab[label$="htpasswd"] { background-color: #ffb399 !important; background-image:none !important;}
#tabbed-view tabs > tab[label$="htpasswd"] .tab-image-left { background-image: url(chrome://famfamfamsilk/skin/icons/lock.png) !important; }

#tabbed-view tabs > tab[label$=".h"] { background-color: #9fdbc2 !important; background-image:none !important;}
#tabbed-view tabs > tab[label$=".h"] .tab-image-left { background-image: url(chrome://famfamfamsilk/skin/icons/page_white_h.png) !important; }

#tabbed-view tabs > tab[label$=".c"] { background-color: #9fdbc2 !important; background-image:none !important;}
#tabbed-view tabs > tab[label$=".c"] .tab-image-left { background-image: url(chrome://famfamfamsilk/skin/icons/page_white_c.png) !important; }

#tabbed-view tabs > tab[label$=".js"] { background-color: #b5f2e4 !important; background-image:none !important;}
#tabbed-view tabs > tab[label$=".js"] .tab-image-left { background-image: url(chrome://famfamfamsilk/skin/icons/script.png) !important; }

#tabbed-view tabs > tab[label$=".json"] { background-color: #b5f2e4 !important; background-image:none !important;}
#tabbed-view tabs > tab[label$=".json"] .tab-image-left { background-image: url(chrome://famfamfamsilk/skin/icons/script_code.png) !important; }

#tabbed-view tabs > tab[label$=".md"] { background-color: #9db8de !important; background-image:none !important;}
#tabbed-view tabs > tab[label$=".md"] .tab-image-left { background-image: url(chrome://famfamfamsilk/skin/icons/book.png) !important; }

#tabbed-view tabs > tab[label$=".key"] { background-color: #d29b9b !important; background-image:none !important;}
#tabbed-view tabs > tab[label$=".key"] .tab-image-left { background-image: url(chrome://famfamfamsilk/skin/icons/page_key.png) !important; }

#tabbed-view tabs > tab[label$=".pem"] { background-color: #d29b9b !important; background-image:none !important;}
#tabbed-view tabs > tab[label$=".pem"] .tab-image-left { background-image: url(chrome://famfamfamsilk/skin/icons/page_key.png) !important; }

#tabbed-view tabs > tab[label$=".crt"] { background-color: #d29b9b !important; background-image:none !important;}
#tabbed-view tabs > tab[label$=".crt"] .tab-image-left { background-image: url(chrome://famfamfamsilk/skin/icons/page_key.png) !important; }

#tabbed-view tabs > tab[label$=".pl"] { background-color: #ffffcc !important; background-image:none !important;}
#tabbed-view tabs > tab[label$=".pl"] .tab-image-left { background-image: url(chrome://icomoon/skin/icons/ko_perl.png) !important; }

#tabbed-view tabs > tab[label$=".pm"] { background-color: #f3f3ca !important; background-image:none !important;}
#tabbed-view tabs > tab[label$=".pm"] .tab-image-left { background-image: url(chrome://famfamfamsilk/skin/icons/bullet_yellow.png) !important; }

#tabbed-view tabs > tab[label$=".plist"] { background-color: #d4e5a2 !important; background-image:none !important;}
#tabbed-view tabs > tab[label$=".plist"] .tab-image-left { background-image: url(chrome://famfamfamsilk/skin/icons/text_list_bullets.png) !important; }

#tabbed-view tabs > tab[label$=".plist"] { background-color: #d8f0fb !important; background-image:none !important;}
#tabbed-view tabs > tab[label$=".java"] .tab-image-left { background-image: url(chrome://famfamfamsilk/skin/icons/cup.png) !important; }

#tabbed-view tabs > tab[label$=".cnf"] .tab-image-left { background-image: url(chrome://famfamfamsilk/skin/icons/cog.png) !important; }
#tabbed-view tabs > tab[label$=".ini"] .tab-image-left { background-image: url(chrome://famfamfamsilk/skin/icons/cog.png) !important; }
#tabbed-view tabs > tab[label$=".sh"] .tab-image-left { background-image: url(chrome://icomoon/skin/icons/console.png) !important; }
#tabbed-view tabs > tab[label$=".bash"] .tab-image-left { background-image: url(chrome://icomoon/skin/icons/console.png) !important; }
#tabbed-view tabs > tab[label$=".tsch"] .tab-image-left { background-image: url(chrome://icomoon/skin/icons/console.png) !important; }
#tabbed-view tabs > tab[label$=".zsh"] .tab-image-left { background-image: url(chrome://icomoon/skin/icons/console.png) !important; }
#tabbed-view tabs > tab[label$=".info"] .tab-image-left { background-image: url(chrome://famfamfamsilk/skin/icons/help.png) !important; }

ActiveState Staff
Thu, 2013-03-14 07:35

That looks great :) Nice work!

Fyi Komodo 8 also has a new widget/pane called "Open Files", which lists your currently opened files sorted by name and grouped by language. I'm mentioning it since it's somewhat similar in functionality to this addon so you might want to give it a go. Example:

veryvito2 | Thu, 2013-03-14 09:06

Thanks! Yep, I fully expect to move on to using the "Open Files" pane in my workflow at some point, but for now, I'm a creature of habit and a slave to my colored tabs (I also tend to work w/ both the places and toolbox/code tabs open already).

Entirely off topic, but you opened my eyes to something that's been bothering me: Any thoughts on why no icons (other than the folder icons) seem to show up for me in any of the file panes (Places, Open FIles, etc)? I wasn't even sure they were supposed to until I saw your screenshot above. Is there a setting somewhere that I may have missed?

This occurs on OSX 10.8.2 (MBP Pro Retina) in both IDE and Edit -- even when I delete all user settings to "start fresh." Screenshot attached:

It's been bugging me, but I wasn't even sure if it was really a thing.


ActiveState Staff
Fri, 2013-03-15 06:39

Very odd, I wonder if this is something retina specific. Would you mind logging a bug? >


tarulia | Fri, 2013-03-15 01:38

Thanks for the post, where is it stored however?

I saved it into Komodos Settings directory, but restarting Komodo doesn't do anything. Where do I need to put it to make it work? Also tried several sub directorys, but none seem to work :(

Looks good by the way. If this could be implemented into Colortab it would be nice :) Icons were mentioned earlier in this thread, which posts are 4 years old however.

nevermind, I found it :) Thanks for providing the sheet!
for anyone who can't find it. It needs to be placed into you /xre/chrome/userChrome.css - if chrome directory does not exist (as for me) just create it.
I would like to see it in ColorTab as well however :) (it's just easier to set up via config pane)

veryvito2 | Fri, 2013-03-15 06:23

Glad you found it. I guess I should have mentioned that. ;)

tarulia | Tue, 2013-03-19 23:36

I did some improvements on my own, as the Addon doesn't seem to be updated very soon.

Make active Tabs' font bold because I had problems distiguishing selected tabs from normals:

#tabbed-view tabs > tab[selected="true"] {
        font-weight: bold !important;

Don't show default komodo icons but maintain the width of them (the image is bound to them as src attribute in the DOM node so we can't get rid of them in a better way) because they were overlapping with the fancy famfam icons:

#tabbed-view tabs > tab .native_file_image {
        opacity: 0;

get rid of the mass overload in code in the original. Just disable the background image globally instead of every language on its own:

#tabbed-view tabs > tab {
        background-image: none !important;

maybe someone likes it, I do :D

For showing the Komodo Icon on Start Page tab:

#tabbed-view tabs > tab[label="Start Page"] .native_file_image {
        opacity: 1;
#tabbed-view tabs > tab[label="Start Page"] .tab-image-left {
        background-image: none !important;