What controls the accent colors in the Vivaldi browser?

2.1k Views Asked by At

Stack Overflow:

StackOverflow

Google:

Google

My site:

My site

How come Vivaldi picks nice accent colors for most websites, but on my site (which is white, black and blue) it goes with the default red, which clashes horribly with the color scheme.

How do I control the accent color of Vivaldi?

2

There are 2 best solutions below

2
On

This is not an answer. It is a follow-up to the comment I posted yesterday under the answer by J5lx. I saw some strange behavior that I want to describe in case it helps anyone else. The gist of the following story is that the favicon needs to be A.png. (EDIT: or favicon.ico; see the comments below)

I was not happy with the favicon that I used yesterday, so I edited it. I changed the href in the link tag from A.png (yesterday's favicon) to Aa.png (the new version), and Vivaldi stopped using the theme-color. It still changed the tab bar color to something other than the default, but the color seemed to be picked from the pixels in the favicon. I continued to edit the favicon, each time giving it a different name. Vivaldi continued to pick its tab bar color from the favicon rather than the theme-color. I thought that my editor might be adding a field to the .png file which Vivaldi was prioritizing, so I recreated favicons using the same procedure that I had done for the original one (snipping, then scaling with MS Picture Manager). Even then, Vivaldi did not use theme-color. It only worked correctly with the original favicon, A.png. Eventually I got the favicon to look pretty good. The file was Dd.png, and Vivaldi still wasn't behaving correctly. I decided that someday when I learn more about the png file format, I will need to figure out what the difference is between A.png and Dd.png. I moved all my favicon test files to an archive folder and copied Dd.png back to htdocs. I wanted it to be called A.png, so I changed its name. Suddenly, Vivaldi started using theme-color for the tab bar color!! I changed the name back to Dd.png, and Vivaldi used a favicon color. I randomly picked another favicon file from the 18 that I had tested, and after naming it A.png, Vivaldi worked correctly. It seems that any png favicon will work, as long as it is named A.png. It also needs to be at the website root. I tried putting it into a subfolder, and it didn't work. Also, I used my editor to save the favicon as A.ico, and Vivaldi did not use theme-color with that. Apparently it has to be A.png.

My Vivaldi is v2.10.17 x64 on windows 7, and I am serving the page from apache on localhost.

8
On

While I haven't come across any official statement so far, it seems that Vivaldi determines the accent colour mainly from a site’s favicon. However, the HTML standard also specifies a meta element named theme-color that can be used „to customize the display of the page or of the surrounding user interface”, and Vivaldi respects this tag when it is present in the source code. Of course, this meta tag will also affect other browsers with similar features, such as Chrome for Android.