Visual problem in sidebar icon background in dark themes...

[Dancer18]

@Gwen-Dragon In active tab the favicon has a white surrounding, in the inactive not.

[Komposten]

@Dancer18 said in Visual problem in sidebar icon background in dark themes...:

The desired solution should only change the DeepL-button.

You can achieve that with something like this:

#switch button.webviewbtn[title*="deepl"] img {
  background: red !important;
}

[Dancer18]

@Gwen-Dragon said in Visual problem in sidebar icon background in dark themes...:

@Dancer18 With the Theme Dark?

Blueprint modified.

[Dancer18]

@Komposten Thank you very much! That is a comfortable solution. I changed "red" to my button.active bg-color which is #0791ae.

In screenshot you see the active deepl:

[luetage]

The white background actually makes sense, can’t blame Vivaldi devs for keeping it. There are enough pure dark favicons out there to warrant the decision, these become practically invisible on dark themes.

This is in use: .theme-dark #switch button.webviewbtn img {background-color: rgba(255, 255, 255, 0.9);

We can change it to .theme-dark #switch button.webviewbtn img {background-color: rgba(255, 255, 255, 0.33); to better blend it with the background color in use. I also change the images to grayscale, but that’s another story.

Note that on light themes the background color of the image is transparent anyway.

[Pathduck]

I have this in my custom CSS:

#switch > button.panelbtn img {
    background-color: transparent !important;
    filter: drop-shadow(0 0 1px white);
}

Adds a subtle white drop-shadow, hardly noticeable for the bright colour icons, but helps to distinguish the dark ones.

If you want the same as the tab favicons (for consistency), use the filter:

drop-shadow(1px 0 0 rgba(246, 246, 246, 0.75))
drop-shadow(-1px 0 0 rgba(246, 246, 246, 0.75))
drop-shadow(0 1px 0 rgba(246, 246, 246, 0.75)) 
drop-shadow(0 -1px 0 rgba(246, 246, 246, 0.75))

But that's a bit too much IMO. I guess you could always play around with the blur-radius and opacity of the rgba for personal taste.

[Dancer18]

@Komposten @luetage @Pathduck
I'd like to have one more improvement concerning the activ panel.
As you see in the screenshot, I'm using a blue color for easier seeing what panel is activ.
Unfortunately the latest improvements are fine with all others but not for active panel bc the dark bg is displayed around the icon.

What could can help? Here is my custom.css:

#switch .addwebpanel-wrapper > button.active, #switch > button.active {
    background-color: #0791ae;
}

.theme-dark #switch button.webviewbtn img { background: var(--colorBgDark) !important; }

#switch button.webviewbtn[title*="deepl"] img {
  background-color: #0791ae !important;
}

[luetage]

@Dancer18 said in Visual problem in sidebar icon background in dark themes...:

.theme-dark #switch button.webviewbtn img { background: var(--colorBgDark) !important; }

Simply don’t use this code: .theme-dark #switch button.webviewbtn img { background: var(--colorBgDark) !important; }

You got several other solutions by different people in the replies, including the latest by @Pathduck.

[luetage]

@Gwen-Dragon said in Visual problem in sidebar icon background in dark themes...:

Then a Vivaldi developer has to create software which calculates sufficient contrast. Not easy.

Just saw this, you can do it with a few lines of Javascript, it’s pretty easy. Vivaldi also does it already for calculating whether you need dark or light foreground depending on background lightness anyway.

[Dancer18]

@luetage
Thank you! I have to admit that I didn't try your solution. It is working fine , except the DeepL-button.
It seems that the code for this button is overwritten by yours:
(At first I missed to copy your code completely with a "}" at the end.

.theme-dark #switch button.webviewbtn img {background-color: rgba(255, 255, 255, 0); }

#switch button.webviewbtn[title*="deepl"] img {
  background-color: #0791ae !important;
}

Fine! Great! Just as I wanted to have it! Thanks a lot! @luetage