5

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?

Hubro
  • 56,214
  • 69
  • 228
  • 381

2 Answers2

7

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.

J5lx
  • 128
  • 1
  • 8
  • This sounds awesome, I'll look into it – Hubro Feb 16 '17 at 12:13
  • 1
    Added `` to my website. It did the trick for Chrome for Android, but nothing happened in Vivaldi. I have restarted Vivaldi and cleared the cache without success. – Hubro Feb 16 '17 at 12:22
  • That is strange. During further testing I noticed that apparently it does not work with local sites (i.e. `file://` or `http://localhost:8080/`), while there are no issues at all when the page was loaded from my VPS on the internet. Could that be the problem in your case as well? – J5lx Feb 17 '17 at 13:53
  • Yes, I can reproduce that. Changing the colour value in the developer tools or copying the page to my own server didn’t help either. However, when I changed the colour to `#0f0` on my server and refreshed the page, Vivaldi turned bright green. After that I changed it back to your colour and Vivaldi assumed exactly that greyish-blue tone (`#6e8899`) ([screenshot](https://img.j5lx.eu/s/ANuv8kd)). When I moved the tab to a new window, Vivaldi returned to its default colour and I had to repeat the procedure. If you can reproduce this behaviour, I think it’s safe to say this is a bug in Vivaldi. – J5lx Feb 17 '17 at 15:53
  • I can't get Vivaldi to change color no matter what I do. I tried to reproduce your trick exactly, and several variations without success. Does your server perhaps provide a favicon? Perhaps Vivaldi doesn't even try to apply a color scheme unless it finds a favicon? – Hubro Feb 20 '17 at 00:14
  • Have you ever found a solution for this? Our site has a favicon with a main red color and it is showing. But the accent color for this site is always the one from the tab I was before I switched to our tab. – maracuja-juice Oct 09 '17 at 10:57
  • 2
    I couldn't make `theme-color` work but it suddenly worked when I added a favicon to the site, it had none before. So it seems you need _some_ favicon at all to enable accent color feature, _then_ `theme-color` tag will be noticed and applied. Vivaldi version 1.11.917.43. – Rarst Jan 25 '18 at 12:55
  • theme-color plus favicon worked for me. I had never coded a favicon before, so [this site](https://www.w3.org/2005/10/howto-favicon) helped. – Arnold Cross Mar 24 '20 at 05:08
0

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.

Arnold Cross
  • 199
  • 1
  • 12
  • What if you named it `favicon.ico`. Isn't that the *correct* name for a favicon? Also what about `favicon.png`? – Hubro Mar 25 '20 at 12:25
  • 1
    favicon.ico works. favicon.png does not. Thanks. I didn't know anything about favicons until two days ago, when I wanted to make Vivaldi follow my color scheme. – Arnold Cross Mar 27 '20 at 01:47