Vivaldi Fox: Vivaldi-like UI colors for Firefox

Martin Brinkmann
Jun 13, 2016
Updated • Jun 25, 2017
Firefox, Firefox add-ons
|
8

Vivaldi Fox is a Firefox add-on that brings Vivaldi's color changing user interface feature to the Firefox web browser.

One unique feature of the Vivaldi web browser is its ability to change the browser user interface (UI) by painting it in the dominant color of the active web page.

While some may find the feature distracting or even confusing, others like it and prefer it over using one color scheme for the interface.

Vivaldi ships with options to turn the feature off so that it is up to the user whether the feature is being used or not.

Vivaldi Fox

Vivaldi Fox is a new browser add-on for the Firefox web browser that brings Vivaldi's feature to Firefox.

The extension is not yet listed on Mozilla's official add-on repository but only available on the project's GitHub page.

Update: The author has uploaded the browser extension to Mozilla AMO. This means that you can download a signed version of the add-on now, and that the next couple of paragraphs don't apply anymore if you do.

This has consequences as the extension is not signed currently. This means that its installation will be blocked by Firefox.

While it is possible to disable add-on signature checks currently in all versions of the browser, this won't be the case anymore soon for Stable and Beta releases of Firefox.

Do the following to bypass the check: load about:config, search for xpinstall.signatures.required and double-click on the preference to set it to false.  This disables the enforcement of signatures during extension installations.

You need to download the add-on xpi file from the GitHub page and install it manually in Firefox. One way of doing this is to load about:addons, click on the cogwheel icon, select "install add-on from file", and pick the Vivaldi Fox xpi you downloaded earlier when the file browser opens.

Vivaldi Fox works right after installation which you should notice as the UI will change colors immediately depending on the dominant color used on the active site in the browser.

The author revealed that the extension tries to extract the color from meta tags used on sites but will resort to using the dominant page icon color instead of that fails, or use white instead if all methods fail to retrieve a color.

If you have installed an extension that changes tab styles, you may notice that Vivaldi Fox does not work properly with those. This is for instance the case if you use Classic Theme Restorer to change the style of tabs in Firefox.

Additionally, there may be issues with complete themes and other browser add-ons and modifications, but that is to be expected at this early level in development. The add-on works best with vanilla Firefox because of this.

Last but not least, some colors used make tab titles hard to read. This is for instance the case on Ghacks or Reddit, where a lighter color is picked by the extension.

ghacks ui color

Closing Words

Vivaldi Fox brings Vivaldi's toolbar coloring feature to the Firefox web browser. The extension is at an early stage in development and not yet available on Mozilla's add-on repository.

It works fine if tabs are not modified in Firefox, but has some issues such as tab titles that are hard to read or that the enforcement of signatures needs to be disabled before it can be installed.

Those are all issues that can be fixed however.

Summary
Vivaldi-like UI colors for Firefox
Article Name
Vivaldi-like UI colors for Firefox
Description
Vivaldi Fox is a Firefox add-on that brings Vivaldi's color changing user interface (UI) feature to the Firefox web browser.
Author
Publisher
Ghacks Technology News
Logo
Advertisement

Tutorials & Tips


Previous Post: «
Next Post: «

Comments

  1. pd said on June 15, 2016 at 6:32 am
    Reply

    Ick, very yuck!

  2. Dave said on June 13, 2016 at 11:16 pm
    Reply

    I’d prefer an Australis theme for Vivaldi. It’ll be interesting to look at the CSS of this add-on though :-)

    1. Tim Nguyen said on June 14, 2016 at 2:17 pm
      Reply

      The add-on now supports Australis tabs.

      The CSS is here:
      https://github.com/nt1m/vivaldi-fox/blob/master/data/browser.css

      The colours are extracted then set using JS.

  3. Sören Hentzschel said on June 13, 2016 at 7:29 pm
    Reply

    I was close to release a very similar add-on. Now I don’t have to fix the last issues and have more time for other things :P

  4. Tim Nguyen said on June 13, 2016 at 3:39 pm
    Reply

    Thanks for writing about it!

    Just published it on AMO: https://addons.mozilla.org/en-US/firefox/addon/vivaldifox/

    It wasn’t on AMO previously since it wasn’t stable enough. In fact the issues you’re mentioning with text that is hard to read have been fixed. I don’t plan to support complete themes or CTR, but other add-ons can access the colours if they need to (using CSS variables).

    1. Martin Brinkmann said on June 13, 2016 at 3:45 pm
      Reply

      Thanks Tim, I have updated the article to reflect that and added a link to Mozilla AMO.

  5. vivaldi said on June 13, 2016 at 1:13 pm
    Reply

    looking great.
    does vivaldi have menu bar and status bar?

    1. Martin Brinkmann said on June 13, 2016 at 1:44 pm
      Reply

      Yes, it supports a menu bar and status bar. The former needs to be enabled in the preferences under appearance.

Leave a Reply

Check the box to consent to your data being stored in line with the guidelines set out in our privacy policy

We love comments and welcome thoughtful and civilized discussion. Rudeness and personal attacks will not be tolerated. Please stay on-topic.
Please note that your comment may not appear immediately after you post it.