This extension allows to set individual color for each tab in order to highlight them. Currently available colors: red, green, blue, yellow, brown, purple, orange. Tree Style Tabs extension is required for it to run.
Huge thanks to @irvinm for many contributions to this project! 🎉
Check out his addon TST Lock
-
Extension may conflict with other extensions which change tabs color, such as VivaldiFox or TST Colored Tabs
-
When you close a tab or window and then use Firefox to "restore" these tabs, they will not have the original Tab IDs assigned. Because of this (and no great way of mapping "new tabs created\restored" to old closed tabs), once you close a tab\window, the associated color information will be deleted.
This means any restored tabs will not have their color information retained and will be treated as "new".
You can change shortcuts via about:addons -> Cogwheel -> Manage Extension Shortcuts (guide)
- Alt + 1 – Set red color for selected tabs
- Alt + 2 – Set green color for selected tabs
- Alt + 3 – Set blue color for selected tabs
- Alt + 4 – Set yellow color for selected tabs
- Alt + 5 – Set brown color for selected tabs
- Alt + 6 – Set purple color for selected tabs
- Alt + 7 – Set orange color for selected tabs
- Alt + 0 – Remove color from selected tabs
- Alt + Down – Switch to the next colorized tab
- Alt + Up – Switch to the previous colorized tab
To customize colors, you can use TreeStyleTab's custom CSS. Here are default style rules for each color, which you could override in Tree Style Tabs settings:
.tab.self-colored-red tab-item-substance {
background-color: rgba(255,0,0,0.2) !important;
}
.tab.self-colored-green tab-item-substance {
background-color: rgba(0,255,0,0.2) !important;
}
.tab.self-colored-blue tab-item-substance {
background-color: rgba(0,128,255,0.2) !important;
}
.tab.self-colored-yellow tab-item-substance {
background-color: rgba(255,255,0,0.2) !important;
}
.tab.self-colored-brown tab-item-substance {
background-color: rgba(139,69,19,0.2) !important;
}
.tab.self-colored-purple tab-item-substance {
background-color: rgba(75,0,130,0.2) !important;
}
.tab.self-colored-orange tab-item-substance {
background-color: rgba(255,69,0,0.2) !important;
}
Any contributions are welcome! Please feel free to fork this extension and create pull request to suggest your changes.
Few ideas to work on:
- Ability to change color values on a settings page instead of using CSS (emvaized#9)
- Apply 'light/dark' mode to the CSS color values as well, so that users could specifiy different colors for dark mode
- List all colorized tabs in the extension popup, with switch to tab on click
Extension logo (color.png) provided by: Color wheel icons created by Hasymi - Flaticon