🔴🔵🟡🟢 Automatic color for Active tabs & Active tab stacks using favicon. 🟢🟡🔵🔴

barbudo2005

1.- COLOR OF FAVICON

Vivaldi has built-in (native) a script to determine the color most used in the favicon (but if there are many colors averages across all) when you put on this setting:

The problem is that I don't want this accent color in the bars :

So I revert to my colors with this code:

.mainbar,
.toolbar,
.bookmark-bar,
.toolbar-extensions,
.bookmark-bar-top,
.bookmark-bar,
.bookmark-bar button,
.toolbar-extensions,
button.ToolbarButton-Button,
.button-toolbar

{background-color: #414141  !important;
color: #d8d8d8 !important;}




.address-top .mainbar > .toolbar-mainbar .toolbar-extensions:after,
.address-top .mainbar > .toolbar-mainbar:after,
.bookmark-bar:after,
.bookmark-bar-top:after,
.bookmark-bar button:after,
.bookmark-bar.default:after,
.observer:after,
.bookmark-bar,
.mainbar:before,
.toolbar-mainbar:before,
.toolbar-extensions:before

{content: unset !important;
border: 0px #414141 solid !important;
 background-color: #414141 !important;}


.address-bottom #tabs-tabbar-container.top,
.address-bottom-off #tabs-tabbar-container.top,
.address-top-off #tabs-tabbar-container.top

{border-bottom-width: 0px  !important;}

#414141 is my Accent color and # d8d8d8 is my Foreground color.

So theme is back:

2.- AUTOMATIC CODE FOR ACTIVE TAB STACKS

The automatic code is :

.tab-position.is-substack  [id*= "tab"].tab.active

{border: 2.5px var(--colorAccentBgDarker) solid !important;}

2.- AUTOMATIC CODE FOR TABS

Of course you can use it for the active tab also:

The code is:

#tabs-container  .tab.active

{border: 2.5px var(--colorAccentBg) solid !important;}

3.- NOT AUTOMATIC CODE FOR INACTIVE TABS STACKS

With the upgrade Chromium to 102.0.5005.55 appeared the pseudo-class :has() which allows you to choose a parent by descendants. (Thanks @kichrot for note it)

So if you visit regularly some sites, now you can highlight a tab stack by the color of the favicon of the host:

The code is:

.tab-position.is-substack  [id*= "tab"].tab:not(.active):has(img[srcset*="vivaldi.net"] )

{border: 2.5px rgba(88, 115, 211, 1) solid !important;}

.tab-position.is-substack  [id*= "tab"].tab:has(img[srcset*="vivaldi.net"] ) .stack-counter
 
{color: rgba(88, 115, 211, 1) !important;}


.tab-position.is-substack  [id*= "tab"].tab:not(.active):has(img[srcset*="blogspot.com"] )

{border: 2.5px rgba(213, 115, 50, 1) solid !important;}
 
.tab-position.is-substack  [id*= "tab"].tab:has(img[srcset*="blogspot.com"] )  .stack-counter
 
 {color: rgba(213, 115, 50, 1) !important;}
 
   
 .tab-position.is-substack  [id*= "tab"].tab:not(.active):has(img[srcset*="youtube.com"] ) 

{border: 2.5px rgba(230, 32, 32, 1) solid !important;}

.tab-position.is-substack  [id*= "tab"].tab:has(img[srcset*="youtube.com"] ) .stack-counter
 
 {color: rgba(230, 32, 32, 1) !important;}

4.- FINE TUNING

4.1.- COLORS

Vivaldi generate all this colors:

/* DEFAULT*/

    --colorAccentBg: #fe6602;

/*DARKER*/

    --colorAccentBgDark: #e65200;
    --colorAccentBgDarker: #c33300;

/* FADED*/

    --colorAccentBgFaded: #dc652b;
    --colorAccentBgFadedMore: #ff7f26;
    --colorAccentBgFadedMost: #ffa249;

/*BORDER*/

    --colorAccentBorder: #e04d00;
    --colorAccentBorderDark: #d24100;

So depending on your theme or the intensity you want to give to the highlight, you can use any of this Accents colors.

4.2.- PARTS OF THE TAB

BORDER: You can use 2.5px for active and 1px for inactive. Also you can use the top or bottom border only.

TEXT OF THE TAB: The selector is "color"

BACKGROUND COLOR OF THE TAB: The selector is "background-color". For me this option is too heavy.

Pathduck

@barbudo2005 Kudos for making this, nice work!

When Vivaldi came out, I thought the colour from page feature was really neat, but soon tired of it and reverted to a more consistent theme. Now I see it more as a gimmick but I understand there are some users who love it.

barbudo2005

@Pathduck

Said:

but soon tired of it and reverted to a more consistent theme.

I think nobody likes this :

So why not take advantage of the built-in script to give the users the option to color the active tab or tab stack within the settings:

The same for active tab stack.

WE at Vivaldi can not be less than Chrome!!!!!

barbudo2005

5.- AUTOMATIC COLOR FOR INACTIVE TABS AND INACTIVE TAB STACKS

"For the users who have 30-100 (or even more) tabs open at the same time it could be a priceless feature."

"With colorization you may set different color to every important tab so you will quickly find the required tab."

"Giving each tab a color would make it much easier to find any given tab within a tab stack"

"I have more than hundred tabs and sometimes finding some tabs is really hard."

Reviewing these comments in the Forum, one comes to the conclusion that maybe it is more important to color the INACTIVE tabs and INACTIVE tab stacks to distinguish them, because from those you are going to choose.

Following the line of the previous post about taking advantage of the accent colors that Vivaldi generates, it would be possible for Vivaldi to have AUTOMATIC color for inactive tabs and inactive tabs stacks?

Maybe with a JS script like this:

1.- Every time a tab is opened and is made active, the script grab the HOST of the page

2.- If the host is in the array do nothing

3.- If the host is not in the array, grab the ACCOLOR (you define in a variable the accent color you want to grab) and put the HOST and ACCOLOR in a array

The array:

vivaldi.net, #5e74c3
blogspot.com, #d57231
youtube.com, #d53030
google.com, #8cbeff
media-amazon.com, #ffff61

So the array will collect the sites and their color that you are visiting every day.

4.- Within a loop of the elements of the array inject this CSS code (or its equivalent in JS commands) to inactive tabs and inactive tab stacks

.tab-position.is-substack  [id*= "tab"].tab:not(.active):has(img[srcset*=HOST] ),

.tab-position .tab:not(.active):has(img[srcset*=HOST] )

{border: 2px ACCOLOR solid !important;}

Users with strong JS skills: Is it doable?

Truemotion

Nice idea. I think Vivaldi team should add coloring of inactive tabs in the beginning.

rziiil

I have tried the approaches on this page but none seem to work for me.

All tab groups seem to end up with the active tab group color despite only configuring the inactive styles.
Colors inherited from the site almost always look terrible
the fine lines above and below the address bar are still showing.

The most important tabs / tab groups to color are the inactive ones, and they all need to be distinct.

I don't care at all if the color is inherited. I'd be happy to assign colors simply by tab group index. The css just needs to work for vertical tabs in all modes, but especially accordion, and give a unique color to every group.

Here is what what my setup looks like, and the corresponding css. I have opened groups to the sites you provided as examples.


.mainbar,
.toolbar,
.bookmark-bar,
.toolbar-extensions,
.bookmark-bar-top,
.bookmark-bar,
.bookmark-bar button,
.toolbar-extensions,
button.ToolbarButton-Button,
.button-toolbar

{background-color: #414141  !important; color: #d8d8d8 !important;}

/*Some selectors may be in excess*/

/* Remove line under address bar and extensions bar */
/*https://forum.vivaldi.net/topic/76125/seperator-line-above-bookmarks-bar/2*/

.address-top .mainbar > .toolbar-mainbar .toolbar-extensions:after,
.address-top .mainbar > .toolbar-mainbar:after {
 content: unset;
}

/* INACTIVE TAB STACK COLORIZATION */

.tab-position.is-substack  [id*= "tab"].tab:not(.active):has(img[srcset*="vivaldi.net"] )

{border: 2.5px rgba(88, 115, 211, 1) solid !important;}

.tab-position.is-substack  [id*= "tab"].tab:has(img[srcset*="vivaldi.net"] ) .stack-counter

{color: rgba(88, 115, 211, 1) !important;}


.tab-position.is-substack  [id*= "tab"].tab:not(.active):has(img[srcset*="blogspot.com"] )

{border: 2.5px rgba(213, 115, 50, 1) solid !important;}

.tab-position.is-substack  [id*= "tab"].tab:has(img[srcset*="blogspot.com"] )  .stack-counter

{color: rgba(213, 115, 50, 1) !important;}

  
.tab-position.is-substack  [id*= "tab"].tab:not(.active):has(img[srcset*="youtube.com"] ) 

{border: 2.5px rgba(230, 32, 32, 1) solid !important;}

.tab-position.is-substack  [id*= "tab"].tab:has(img[srcset*="youtube.com"] ) .stack-counter

{color: rgba(230, 32, 32, 1) !important;}

Also, the instructions above do not specify where to find the "Color Overrides". I had never seen it before, and the search in settings did not find it. Please update the instructions for locating it under the theme Editor:

barbudo2005

@rziiil

As shown in the images that code was designed for Tabs on top and Two-level stacking.

If you use Tabs on left and Accordion stacking the Selectors are different::

/* SELECTORS*/
.tab-position.is-substack  [id*= "tab"].tab:not(.active)

1.- "Color Overrides"

In settings : Themes

2.- "With the upgrade Chromium to 102.0.5005.55 appeared the pseudo-class :has() which allows you to choose a parent by descendants."

You have to enable the flag:
chrome://flags/#enable-experimental-web-platform-features

3.- "the fine lines above and below the address bar are still showing"

It not works in 5.4.2753.51 (Stable channel) (64-bit) . Sorry, I can't find the solution.

4.- NOT AUTOMATIC CODE FOR INACTIVE TABS STACKS

The code is:

[id*= "tab"].tab.tab-accordion:has(img[srcset*="vivaldi.net"]):not(.active)
 
{border: 1.5px rgba(72, 107, 228, 1) solid !important;}
 
[id*= "tab"].tab.tab-accordion:has(img[srcset*="blogspot.com"]):not(.active)
 
{border: 1.5px rgba(230, 111, 33, 0.7) solid !important;}
 
[id*= "tab"].tab.tab-accordion:has(img[srcset*="youtube.com"]):not(.active)
 
{border: 1.5px rgba(230, 32, 32, 0.7) solid !important;}

5.- "All tab groups seem to end up with the active tab group color despite only configuring the inactive styles."

This:

and this:

To override this use this code:

[id*= "tab"].tab.active.uifocusstop.tab-in-accordion,
.tab-position .tab.active,
.tab-position.accordion-toggle-arrow.closed.active

 {background-color:  #414141 !important;}

(change "#414141" for your color)

barbudo2005

@rziiil

3.- "the fine lines above and below the address bar are still showing"

I find it. The updated code is :

.address-top .mainbar > .toolbar-mainbar .toolbar-extensions:after,
.address-top .mainbar > .toolbar-mainbar:after,
.bookmark-bar:after,
.bookmark-bar-top:after,
.bookmark-bar button:after,
.bookmark-bar.default:after,
.observer:after,
.bookmark-bar,
.mainbar:before,
.toolbar-mainbar:before,
.toolbar-extensions:before



{content: unset !important;
border: 0px #414141 solid !important;
background-color: #414141 !important;}

The color " #414141" is my Accent color:

rziiil

@barbudo2005 , thank you for your help. This is a great community in part because of your contributions.

I have enabled the flag, and updated the css according to your direction. The result is mixed.

.tabless,
.tabless:after, /* guessing.. doesn't work */
.mainbar,
.toolbar,
.bookmark-bar,
.toolbar-extensions,
.bookmark-bar-top,
.bookmark-bar,
.bookmark-bar button,
.toolbar-extensions,
button.ToolbarButton-Button,
.button-toolbar,
.address-top .mainbar > .toolbar-mainbar .toolbar-extensions:after,
.address-top .mainbar > .toolbar-mainbar:after,
.bookmark-bar:after,
.bookmark-bar-top:after,
.bookmark-bar button:after,
.bookmark-bar.default:after,
.observer:after,
.bookmark-bar,
.mainbar:before,
.toolbar-mainbar:before,
.toolbar-extensions:before

{content: unset !important; border: 0px #414141 solid !important; background-color: #414141 !important;}

/*Some selectors may be in excess*/

/* Remove line under address bar and extensions bar */
/*https://forum.vivaldi.net/topic/76125/seperator-line-above-bookmarks-bar/2*/

.address-top .mainbar > .toolbar-mainbar .toolbar-extensions:after,
.address-top .mainbar > .toolbar-mainbar:after {
  content: unset;
}

[id*= "tab"].tab.active.uifocusstop.tab-in-accordion,
.tab-position .tab.active,
.tab-position.accordion-toggle-arrow.closed.active
 {background-color:  #414141 !important;}

[id*= "tab"].tab.tab-accordion:has(img[srcset*="vivaldi.net"]):not(.active),
[id*= "tab"].tab.tab-accordion:has(img[srcset*="vivaldi.com"]):not(.active)
{border: 1.5px rgba(72, 107, 228, 1) solid !important;}
 
[id*= "tab"].tab.tab-accordion:has(img[srcset*="blogger.com"]):not(.active)
{border: 1.5px rgba(230, 111, 33, 0.7) solid !important;}
 
[id*= "tab"].tab.tab-accordion:has(img[srcset*="youtube.com"]):not(.active)
{border: 1.5px rgba(230, 32, 32, 0.7) solid !important;}

Good news:

The properly colored line can be seen above the tab group accordion control.
The lines above and below the bookmark bar are gone.

Remaining major issue:

The active tab color is still applied to every tab group.

Minor issues:

My preference is to have the custom color surround the entire tab group, including the accordion control. (Just like the existing one that has the wrong color)
The window titlebar has the active tab color. (I'm on Mac). I added tabless to the list of elements, and that fixed most of the issue, but a bit remains. I do not know how to get the rest of it.

I am running 5.4.2753.51 (Stable channel) (x86_64)

barbudo2005

@rziiil

The active tab color is still applied to every tab group.

Please give a image.

barbudo2005

@rziiil

The window titlebar has the active tab color.

Use this code:

#browser:not(.tabs-top) #header

 {background-color: #414141 !important;}

rziiil

@barbudo2005

There is an image in my most recent reply, but here is another.

And the css change for the browser titlebar worked great, thanks!

barbudo2005

@rziiil

My preference is to have the custom color surround the entire tab group, including the accordion control.

It is not possible because there is not a selector that includes the tab group AND the the accordion control.

Strangely in the image appears border in the tab group + toggle-arrow and toggle-arrow :

Do you have another CSS?

In relation to the active tab group the code works for me:

rziiil

I do not have other mods.
I have only the one css.
The only other entries in the css are for command-chain icons.

Could it be the theme? I am using the standard 'Dark' Vivaldi theme.

I inspected the html of the tab bar, and the border around the tab group is drawn with an svg.

In the debugger I can change the color by adding a style attribute to the rect:

<rect style="stroke:#FFFFFF" class="stack-frame" width="100%" height="100%"></rect>

However, there is NO EFFECT when I try and change this svg with the css:

.svg-tab-stack rect { style: "stroke:#ffffff" }

I am very much a novice with respect to css, and especially Vivaldi modifications, so thanks again for your guidance.

barbudo2005

@rziiil

Do the following:

1.- ACTIVE TAB STACK

Inspect this image:

Not the selector .tab-header but the previous in hierarchy:

Click in the selector that begins with #tab:

And post an image like mine.

Then go the right of the Dev tools:

And find a rule that contains border.

That is to understand why has borders if the rule we are using is:

[id*= "tab"].tab.tab-accordion:has(img[srcset*="vivaldi.net"]):not(.active)
 
{border: 1.5px rgba(72, 107, 228, 1) solid !important;}

Is for non active tab stack.

And copy the rule complete with the right button of mouse (context menu) and post it:

2.- INACTIVE TAB STACK WITH BORDER IN THE TAB AND THE CONTROL

Inspect this image:

In the same way as described above and post images and rules:

2.1.- THE TAB

2.2.- THE RECTANGLE THAT INCLUDES THE TAB AND THE CONTROL

barbudo2005

@rziiil

1.- Don't use the "debugger". Always use the custom.css file.

2.- CSS is hierarchical. You always have to the look for the selector leftmost that when you hover over it with the cursor displays the image you are interested in.

3.- To restart Vivaldi faster use this:

In settings, Homepage :

Put vivaldi://restart in Specific Page.

Add this code in custom.css to transform the Home icon to Restart icon:

button.ToolbarButton-Button[title*="Go to homepage"] svg path
    
 {d: path('M9 12l-4.463 4.969-4.537-4.969h3c0-4.97 4.03-9 9-9 2.395 0 4.565.942 6.179 2.468l-2.004 2.231c-1.081-1.05-2.553-1.699-4.175-1.699-3.309 0-6 2.691-6 6h3zm10.463-4.969l-4.463 4.969h3c0 3.309-2.691 6-6 6-1.623 0-3.094-.65-4.175-1.699l-2.004 2.231c1.613 1.526 3.784 2.468 6.179 2.468 4.97 0 9-4.03 9-9h3l-4.537-4.969z');
 transform: scale(0.95) !important;
 transform-origin: 157% 154% !important;}

Play with "0.95", "157" and "154" to have the same size and position to the others icons.

AryanDevasagayaum

For someone who knows nothing about tech language. I understood nothing.

barbudo2005

@AryanDevasagayaum

Follow the instructions in this post:

https://forum.vivaldi.net/topic/58450/multiline-tabs/6

(Text editor: Use Notepad. Save as .txt and then change the extension to .css)

This instructions by @DoctorG are also good:

https://forum.vivaldi.net/topic/80544/white-ring-around-tab-site-icon/3

BlackSwan09

I can't get this code to work at all - is it still applicable to the current Vivaldi version?

Edit: got it to work, but there are issues.

All stacks show in the active stack's color (e.g. if I have 3 stacks and one of them is Youtube, when Youtube is active, all 3 stacks have a red border)
The active stack/tab has a background color, not only a border - is it supposed to have a background or should it only have the border?
There's a colourful line between the main bar and the bookmarks bar. And a colourful line in the bookmarks bar between individual bookmarks and the first folder.

barbudo2005

@BlackSwan09 Said:

is it still applicable to the current Vivaldi version?

Yes, it is.

Please give images of the 3 issues and the code you are using.