Is it possible to control the background color of an extension's button?

  • I've installed the "Checker Plus for Gmail" extension.
    With my "Day" theme it looks fine:

    0_1522516702780_Screen Shot 2018-03-31 at 20.18.03.png

    1_1522516702780_Screen Shot 2018-03-31 at 20.18.10.png

    However with my "Night" theme the extension button has a background color I'd prefer would match that of the bar it resides in.

    0_1522516819181_Screen Shot 2018-03-31 at 20.20.01.png

    1_1522516819181_Screen Shot 2018-03-31 at 20.20.07.png

  • @idanadar I'm not sure why the theme changes the colour of the extension bar. It doesn't make any sense to me, so I modded it out.

    It might be too make dark icons more visible (when designing for chrome it makes more sense to use a dark icon, and devs might not consider a dark mode issue (and even then there's not really an entry point to designing for both cases(excuse the nested parenthesis))) - but even then the light background is still dark, so it doesn't really help much.

  • @idanadar The most straightforward solution is to just edit the extension button. Visit the extension folder in your user library, find the actionButton and change it to whatever you like. I've done this for a few extensions, the only downside is that your edited button will disappear when the extension updates. Therefore backup the picture outside and copy it back in when needed.

  • Thanks @luetage! Could you please better direct me to the file's location, in Mac?

  • @idanadar Visit vivaldi://about/ look up the profile path. It's in the user library which is hidden on all recent versions of macOS. You can visit it by pressing alt and clicking on "Go" in the Finder. To find the extension you have to either look up its version and/or its ID on the extensions page (enable developer mode).

  • Thanks.
    Looking at the image files they actually look to me like they have transparency set there... weird then that the background color is there...

    0_1522524421694_Screen Shot 2018-03-31 at 22.25.58.png

  • I've added the buttons of other extensions, and the background color appears there as well so this issue is not related to any specific extension's button image.

    0_1522524874630_Screen Shot 2018-03-31 at 22.33.51.png

  • @idanadar Are you talking about this background: 0_1522525170027_ccb52e52-ce92-41f9-b3b8-29bbfc1201ab-image.png

    or this one:

    If its the latter, you can fix it with a css mod:

    .toolbar-addressbar .button-toolbar.browserAction-button,
    .toolbar-mailbar .button-toolbar.browserAction-button {background: none}

    If it's the former thats a bit more tricky.

  • It seems this is controlled by the "background" value, set to #464545, which also affects the color of the background color of buttons instead of taking the color of the bar...

  • Where do I put that CSS block?

  • @idanadar You would need to add it to a custom.css mod file. You can learn how to do that here :

  • Thanks. That worked. :)
    I'll also put to use the script to re-apply the change after the next upgrade...

Log in to reply

Looks like your connection to Vivaldi Forum was lost, please wait while we try to reconnect.