Accent Color
-
It is possible to make with CSS vivaldi to use lighter accent colors?
Like what Microsoft does with Mica and what Google does in Chrome after chrome refresh 2023?
The color of the tabs are too "colorful" in my humble opinion and distracting in light themes.
Is it possible to make with CSS the picked color from favicon to be lighter like Mica and chrome refresh do? -
Hi,
Would you add screenshots as examples? -
Chrome refresh 2023 picks lighter colors.
Blue tab color before refresh 2023
Blue tab color after refresh 2023
Chrome picks lighter blue after 2023.
Is it possible when Vivaldi picks the color of the favicon and let's say it is blue like the first screenshot to make it with CSS lighter and to look like as light as in the 2nd screenshot?
Microsoft does the same with Mica, they pick a color from the desktop background and they show a light version of it in windows 11 explorer for example.
-
@electryon
Hi, Vivaldi can take the color from the page, play a bit with Saturation Limit.
Settings > Themes -
@mib2berlin
Saturation changes the intensity of the color.
I know about this setting, but it can't do what I would like it to do.
This effect can make the color to look darker, not lighter and it could do what I want in a dark theme.
Maybe an opacity effect could do it, but not the saturation effect.
Thank you for your reply. -
@electryon You could use
color-mix
to add white into the accent color like this:/* Lighten accent color from page */ #browser.color-accent-from-page { --colorAccentBgLighter: color-mix(in hsl, var(--colorAccentBg) 50%, white); } /* For "Accent on Window" theme setting ON */ #browser.color-behind-tabs-on.color-accent-from-page { --colorTabBar: var(--colorAccentBgLighter) !important; } /* For "Accent on Window" theme setting OFF */ #browser.color-behind-tabs-off.color-accent-from-page > * { --colorAccentBg: var(--colorAccentBgLighter) !important; }
You can adjust the
50%
in the CSS to change how much lightening takes place. -
@nomadic
Thank you, I tried it and it seems to work.
The only issue is that sometimes in the tab bar now the text color in the tabs and the color in min/max/close buttons need to change from white to black because the new lighter color makes these basically unreadable, but what you sugggested really works:)
Thank you again for your reply, it really works:)