Colorizes tabs by domain.
Colorful Tabs
Brings back the goo' ol' Colorful Tabs©®™ functionality once available as an extension, but now long gone...
But this time it's a working solution.
Automatically colors Firefox tabs with gradients based on their domain.
⚠️ **Requires userChrome.css** - see installation instructions below
How It Works
Adds invisible Unicode markers to page titles. The userChrome.css detects these markers and applies color gradients.
Installation
### Part 1: Install the script
### Part 2: Setup userChrome.css
1. Open Firefox and type `about:config` in the address bar
2. Search for `toolkit.legacyUserProfileCustomizations.stylesheets`
3. Set it to `true`
4. Type `about:support` in address bar
5. Click "Open Folder" next to Profile Folder
6. Create a `chrome` folder (if it doesn't exist)
7. Create `userChrome.css` file inside the chrome folder
8. Paste in the CSS right below
9. Restart firefox
10. Marvel at the tabs
Paste this CSS into userChrome.css:
#TabsToolbar .tabbrowser-tab .tab-background
{
border-top: 1px solid #8698aa !important;
border-left: 1px solid #8698aa !important;
border-right: 1px solid #8698aa !important;
padding:0px !important;
padding-bottom: 3px !important;
}
/* Optional: eliminate padding/margin glitches */
.titlebar-spacer[type="pre-tabs"],
.titlebar-spacer[type="post-tabs"] {
display: none !important;
}
*|*:root {
--tab-min-height: 30px !important; /* adjust */
--tab-min-width: 60px !important; /* adjust */
}
/* TABS: height */
#tabbrowser-tabs,
#tabbrowser-tabs > #tabbrowser-arrowscrollbox,
.tabbrowser-tabs .tabbrowser-tab {
min-height: var(--tab-min-height) !important;
max-height: var(--tab-min-height) !important;
}
/* ============================================
Tabs - Gradients for each color
============================================ */
#TabsToolbar .tabbrowser-tab[label^="\200B"] .tab-background {
background: linear-gradient(
to bottom,
hsla(0, 80%, 74%, 0.5),
hsla(0, 80%, 54%, 0.5)
) !important;
}
#TabsToolbar .tabbrowser-tab[label^="\200C"] .tab-background {
background: linear-gradient(
to bottom,
hsla(203, 92%, 86%, 0.5),
hsla(203, 92%, 46%, 0.5)
) !important;
}
#TabsToolbar .tabbrowser-tab[label^="\200D"] .tab-background {
background: linear-gradient(
to bottom,
hsla(120, 73%, 85%, 0.5),
hsla(120, 73%, 45%, 0.5)
) !important;
}
#TabsToolbar .tabbrowser-tab[label^="\200E"] .tab-background {
background: linear-gradient(
to bottom,
hsla(51, 100%, 85%, 0.5),
hsla(51, 100%, 45%, 0.5)
) !important;
}
#TabsToolbar .tabbrowser-tab[label^="\2060"] .tab-background {
background: linear-gradient(
to bottom,
hsla(300, 47%, 85%, 0.5),
hsla(300, 47%, 45%, 0.5)
) !important;
}
#TabsToolbar .tabbrowser-tab[label^="\180E"] .tab-background {
background: linear-gradient(
to bottom,
hsla(351, 100%, 96%, 0.5),
hsla(351, 100%, 56%, 0.5)
) !important;
}
#TabsToolbar .tabbrowser-tab[label^="\034F"] .tab-background {
background: linear-gradient(
to bottom,
hsla(187, 92%, 90%, 0.5),
hsla(187, 92%, 50%, 0.5)
) !important;
}
#TabsToolbar .tabbrowser-tab[label^="\17B4"] .tab-background {
background: linear-gradient(
to bottom,
hsla(17, 100%, 84%, 0.5),
hsla(17, 100%, 44%, 0.5)
) !important;
}
#TabsToolbar .tabbrowser-tab[label^="\17B5"] .tab-background {
background: linear-gradient(
to bottom,
hsla(120, 93%, 89%, 0.5),
hsla(120, 93%, 49%, 0.5)
) !important;
}
/* ============================================
Add subtle border to active tabs
============================================ */
#TabsToolbar .tabbrowser-tab[selected] .tab-background {
background: linear-gradient(
to bottom,
#ffffff,
#f0f0f0
) !important;
box-shadow: 0 4px 8px rgb(0, 0, 0), 0 2px 4px rgba(0, 0, 0, 0.8) !important;
border-radius: 6px !important;
}
