Extensions Toolbar to match the Accent Color of a Theme
-
I wasn't sure whether to put this in Feature Requests or the Customizations section. I couldn't find a way to achieve this, so I figured this would be the more appropriate place.
Currently, regardless of theme choice, the Extensions area of the UI takes on a lighter shade of the chosen Accent color. It would be nice to have a way to either set this area manually, or have it match the chosen Accent color for better UI cohesion. See my screenshots below:
-
@mluck94 If I remember rightly, this is an old bug. My theme shows a small difference between the extension toolbar colour and that of the bookmarks bar:
- RGB = 171,226,224
- RGB = 176,231,225
Specs: AMD A10-6800K, 8 Gb on Win 10 64-bit •Snapshot 1.16.1183.3 (64-bit)
-
@mluck94 On the current stable version, there is a difference. However, on the snapshot, this seems to be implemented.
EDIT: Tested with multiple theme combinations on both versions.
-
@mluck94 I found a workaround for this in the mean time. Put this is a custom.css file:
.toolbar-addressbar .button-toolbar.browserAction-button { background-color: rgba(255, 255, 255, 0); }
-
@masterleo29 I am using the latest snapshot and still see the bug.
-
@pesala Really ? Give me some minutes. I'll disable my wip mods and try all my themes again in my snapshot version
-
@masterleo29 This is a screenshot of my current theme, showing the different colours between Address Bar and Bookmarks Bar.
-
@pesala Using your theme, this is my result.
Is it any different from yours ? (Extension: Kaspersky Protection. Shield symbol with transparent backgroundEDIT: Diferrent theme:
EDIT 2: On stable version, clear difference between extensions background and toggle button background
EDIT 3: Wait... I forgot to apply accent colro to window. Yes, the result is just like yours
-
@masterleo29 You're not applying the accent colour from window. That's why yours is different to mine.
-
@pesala Yep, just noticed it too.
-
@pesala Ok, I can confirm: Different shade of color between address bar and bookmark bar. However, the extensions toolbar is working as intended in the snapshot
-
@pesala It is indeed a mismatch in the css files. (Not sure if is intended by vivaldi devs or not.)
In the address bar, the background color is set by var(--colorAccentBg);
The bookmark bar, however, is using var(--colorAccentBgDark); trading the latter will fix the 'issue' -
I'm not sure this is a bug. On light backgrounds there is no difference. On dark backgrounds in addressbar, the shade of the extensions container is lighter. I think that's because some extensions use black icons and Vivaldi wants to assure they stay visible even when the addressbar background is set to black. The point is Chrome has no dark theme for the UI and extension developers don't account for such a circumstance.
The background of the extensions icon container is generally a problem, especially if the accent color from active page is applied to it. Some icons will be barely visible and there's nothing Vivaldi can do about this fact – eg. a red extension icon on a red background must be invisible. That's also the reason why I would never use this configuration personally.
-
@luetage As far as we tested, the different shade in extension is present only on the stable version. In the snapshot, the same background as address bar seems to be working just fine.
-
@masterleo29 Damn, you're right. I didn't notice this up until now. It's been changed. But I noticed another thing now. The calculated background highlight colors for buttons on addressbar and panel are always a shade of the original color, which would be fine. But they are always calculated to be darker, which means if you are using black, no highlight is visible. This also applies to hovering a black tab. Imo on dark themes the calculated highlight color should be lighter to assure it's always visible.
-
@luetage Nice catch. Maybe you should report that / create a feature request
-
-
Thank you for your request. As it has received few votes over 4 years, it is now going to be archived.
-