Accent Mod
-
This is one piece of the puzzle in my ongoing fight against fixed colors in the UI. The mod sets either your theme’s background color or your theme’s foreground color as the accent foreground color, which is normally pure black or pure white. Since Vivaldi doesn’t calculate the contrast between these colors, Javascript was needed to make it all work. The mod doesn’t trigger on themes that have “Accent Color from Active Page” activated, because in this case the fixed colors make sense. But who uses that gimmick of a feature anyway…
Before After The calculations are consistent with those in use in the Forum mod, therefore the themes will match. The mod works for tabs on top, bottom and on the sides, all possibilities should be covered. Please see the guide for installation instructions.
Javascript
// Accent Mod // version 2021.11.0 // https://forum.vivaldi.net/topic/61827/accent-mod // Use theme foreground or background color instead of fixed accent foreground // color. Depends on the installation of additional CSS code (accentmod.css). (function () { let RGB = (hex) => hex .replace( /^#?([a-f\d])([a-f\d])([a-f\d])$/i, (r, g, b) => "#" + r + r + g + g + b + b ) .substring(1) .match(/.{2}/g) .map((x) => parseInt(x, 16)); let lum = (r, g, b) => { let a = [r, g, b].map(function (v) { v /= 255; return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4); }); return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722; }; let contrast = (lum1, lum2) => { const bright = Math.max(lum1, lum2); const dark = Math.min(lum1, lum2); return (bright + 0.05) / (dark + 0.05); }; let accentmod = () => { vivaldi.prefs.get("vivaldi.themes.current", (current) => { let themes = "user"; if (current.startsWith("Vivaldi")) { themes = "system"; } vivaldi.prefs.get(`vivaldi.themes.${themes}`, (collection) => { let index = collection.findIndex((x) => x.id === current); const theme = collection[index]; if (theme.accentFromPage === false) { const app = document.getElementById("app"); app.classList.add("accentmod"); const bg = theme.colorBg; const fg = theme.colorFg; const ac = theme.colorAccentBg; const rgbBg = RGB(bg); const lumBg = lum(rgbBg[0], rgbBg[1], rgbBg[2]); const rgbFg = RGB(fg); const lumFg = lum(rgbFg[0], rgbFg[1], rgbFg[2]); const rgbAc = RGB(ac); const lumAc = lum(rgbAc[0], rgbAc[1], rgbAc[2]); const conAc1 = contrast(lumAc, lumBg); const conAc2 = contrast(lumAc, lumFg); if ( (browser.matches(".theme-dark.acc-dark") && conAc1 > conAc2) || (browser.matches(".theme-light.acc-light") && conAc1 > conAc2) || (browser.matches(".theme-dark.acc-light") && conAc2 > conAc1) || (browser.matches(".theme-light.acc-dark") && conAc2 > conAc1) ) { if (!app.classList.contains("accentswitch")) app.classList.add("accentswitch"); } else if (app.classList.contains("accentswitch")) app.classList.remove("accentswitch"); } else app.classList = ""; }); }); }; setTimeout(function wait() { const browser = document.getElementById("browser"); if (browser) { accentmod(); vivaldi.prefs.onChanged.addListener((ch) => { if ( ch.path === "vivaldi.themes.current" || ch.path === "vivaldi.themes.system" || ch.path === "vivaldi.themes.user" ) { accentmod(); } }); } else setTimeout(wait, 300); }, 300); })();
CSS
/* Accent Mod version 2021.11.0 https://forum.vivaldi.net/topic/61827/accent-mod Use theme foreground or background color instead of fixed accent foreground color. Depends on the installation of additional JS code (accentmod.js). */ .accentmod .theme-dark.acc-dark.color-behind-tabs-off .toolbar-mainbar, .accentmod .theme-light.acc-light.color-behind-tabs-off .toolbar-mainbar { color: var(--colorFg); } .accentmod #browser.theme-dark.acc-dark.color-behind-tabs-off .tab-position .tab.active, .accentmod #browser.theme-light.acc-light.color-behind-tabs-off .tab-position .tab.active { color: var(--colorFgIntense); } .accentmod .theme-dark.acc-light.color-behind-tabs-off .toolbar-mainbar, .accentmod .theme-light.acc-dark.color-behind-tabs-off .toolbar-mainbar { color: var(--colorBg); } .accentmod #browser.theme-dark.acc-light.color-behind-tabs-off .tab-position .tab.active, .accentmod #browser.theme-light.acc-dark.color-behind-tabs-off .tab-position .tab.active { color: var(--colorBgIntenser); } .accentmod #browser.tabs-top.theme-dark.acc-dark.color-behind-tabs-on #header, .accentmod #browser.tabs-top.theme-light.acc-light.color-behind-tabs-on #header, .accentmod #browser.tabs-top.theme-dark.acc-dark.color-behind-tabs-on .tab-position .tab:hover:not(.active), .accentmod #browser.tabs-top.theme-light.acc-light.color-behind-tabs-on .tab-position .tab:hover:not(.active), .accentmod #browser.theme-dark.acc-dark.color-behind-tabs-on, .accentmod #browser.theme-light.acc-light.color-behind-tabs-on, .accentmod #browser.theme-dark.acc-dark.color-behind-tabs-on .tab-position .tab:hover:not(.active), .accentmod #browser.theme-light.acc-light.color-behind-tabs-on .tab-position .tab:hover:not(.active), .accentmod .theme-dark.acc-dark.color-behind-tabs-on .toolbar-tabbar > .button-toolbar > button, .accentmod .theme-light.acc-light.color-behind-tabs-on .toolbar-tabbar > .button-toolbar > button, .accentmod .theme-dark.acc-dark.color-behind-tabs-on .toolbar-tabbar > .toolbar-group > .button-toolbar > button, .accentmod .theme-light.acc-light.color-behind-tabs-on .toolbar-tabbar > .toolbar-group > .button-toolbar > button { color: var(--colorFg); } .accentmod #browser.theme-dark.acc-dark.color-behind-tabs-on .tab-position .tab.active.active, .accentmod #browser.theme-light.acc-light.color-behind-tabs-on .tab-position .tab.active.active, .accentmod #browser.theme-dark.acc-light.color-behind-tabs-on .tab-position .tab.active.active, .accentmod #browser.theme-light.acc-dark.color-behind-tabs-on .tab-position .tab.active.active { color: var(--colorFgIntense); } .accentmod #browser.tabs-top.theme-dark.acc-light.color-behind-tabs-on #header, .accentmod #browser.tabs-top.theme-light.acc-dark.color-behind-tabs-on #header, .accentmod #browser.tabs-top.theme-dark.acc-light.color-behind-tabs-on .tab-position .tab:hover:not(.active), .accentmod #browser.tabs-top.theme-light.acc-dark.color-behind-tabs-on .tab-position .tab:hover:not(.active), .accentmod #browser.theme-dark.acc-light.color-behind-tabs-on, .accentmod #browser.theme-light.acc-dark.color-behind-tabs-on, .accentmod #browser.theme-dark.acc-light.color-behind-tabs-on .tab-position .tab:hover:not(.active), .accentmod #browser.theme-light.acc-dark.color-behind-tabs-on .tab-position .tab:hover:not(.active), .accentmod .theme-dark.acc-light.color-behind-tabs-on .toolbar-tabbar > .button-toolbar > button, .accentmod .theme-light.acc-dark.color-behind-tabs-on .toolbar-tabbar > .button-toolbar > button, .accentmod .theme-dark.acc-light.color-behind-tabs-on .toolbar-tabbar > .toolbar-group > .button-toolbar > button, .accentmod .theme-light.acc-dark.color-behind-tabs-on .toolbar-tabbar > .toolbar-group > .button-toolbar > button { color: var(--colorBg); } .accentmod.accentswitch .theme-dark.acc-dark.color-behind-tabs-off .toolbar-mainbar, .accentmod.accentswitch .theme-light.acc-light.color-behind-tabs-off .toolbar-mainbar { color: var(--colorBg); } .accentmod.accentswitch #browser.theme-dark.acc-dark.color-behind-tabs-off .tab-position .tab.active, .accentmod.accentswitch #browser.theme-light.acc-light.color-behind-tabs-off .tab-position .tab.active { color: var(--colorBgIntenser); } .accentmod.accentswitch .theme-dark.acc-light.color-behind-tabs-off .toolbar-mainbar, .accentmod.accentswitch .theme-light.acc-dark.color-behind-tabs-off .toolbar-mainbar { color: var(--colorFg); } .accentmod.accentswitch #browser.theme-dark.acc-light.color-behind-tabs-off .tab-position .tab.active, .accentmod.accentswitch #browser.theme-light.acc-dark.color-behind-tabs-off .tab-position .tab.active { color: var(--colorFgIntense); } .accentmod.accentswitch #browser.tabs-top.theme-dark.acc-dark.color-behind-tabs-on #header, .accentmod.accentswitch #browser.tabs-top.theme-light.acc-light.color-behind-tabs-on #header, .accentmod.accentswitch #browser.tabs-top.theme-dark.acc-dark.color-behind-tabs-on .tab-position .tab:hover:not(.active), .accentmod.accentswitch #browser.tabs-top.theme-light.acc-light.color-behind-tabs-on .tab-position .tab:hover:not(.active), .accentmod.accentswitch #browser.theme-dark.acc-dark.color-behind-tabs-on, .accentmod.accentswitch #browser.theme-light.acc-light.color-behind-tabs-on, .accentmod.accentswitch #browser.theme-dark.acc-dark.color-behind-tabs-on .tab-position .tab:hover:not(.active), .accentmod.accentswitch #browser.theme-light.acc-light.color-behind-tabs-on .tab-position .tab:hover:not(.active), .accentmod.accentswitch .theme-dark.acc-dark.color-behind-tabs-on .toolbar-tabbar > .button-toolbar > button, .accentmod.accentswitch .theme-light.acc-light.color-behind-tabs-on .toolbar-tabbar > .button-toolbar > button, .accentmod.accentswitch .theme-dark.acc-dark.color-behind-tabs-on .toolbar-tabbar > .toolbar-group > .button-toolbar > button, .accentmod.accentswitch .theme-light.acc-light.color-behind-tabs-on .toolbar-tabbar > .toolbar-group > .button-toolbar > button { color: var(--colorBg); } .accentmod.accentswitch #browser.theme-dark.acc-dark.color-behind-tabs-on .tab-position .tab.active.active, .accentmod.accentswitch #browser.theme-light.acc-light.color-behind-tabs-on .tab-position .tab.active.active, .accentmod.accentswitch #browser.theme-dark.acc-light.color-behind-tabs-on .tab-position .tab.active.active, .accentmod.accentswitch #browser.theme-light.acc-dark.color-behind-tabs-on .tab-position .tab.active.active { color: var(--colorFgIntense); } .accentmod.accentswitch #browser.tabs-top.theme-dark.acc-light.color-behind-tabs-on #header, .accentmod.accentswitch #browser.tabs-top.theme-light.acc-dark.color-behind-tabs-on #header, .accentmod.accentswitch #browser.tabs-top.theme-dark.acc-light.color-behind-tabs-on .tab-position .tab:hover:not(.active), .accentmod.accentswitch #browser.tabs-top.theme-light.acc-dark.color-behind-tabs-on .tab-position .tab:hover:not(.active), .accentmod.accentswitch #browser.theme-dark.acc-light.color-behind-tabs-on, .accentmod.accentswitch #browser.theme-light.acc-dark.color-behind-tabs-on, .accentmod.accentswitch #browser.theme-dark.acc-light.color-behind-tabs-on .tab-position .tab:hover:not(.active), .accentmod.accentswitch #browser.theme-light.acc-dark.color-behind-tabs-on .tab-position .tab:hover:not(.active), .accentmod.accentswitch .theme-dark.acc-light.color-behind-tabs-on .toolbar-tabbar > .button-toolbar > button, .accentmod.accentswitch .theme-light.acc-dark.color-behind-tabs-on .toolbar-tabbar > .button-toolbar > button, .accentmod.accentswitch .theme-dark.acc-light.color-behind-tabs-on .toolbar-tabbar > .toolbar-group > .button-toolbar > button, .accentmod.accentswitch .theme-light.acc-dark.color-behind-tabs-on .toolbar-tabbar > .toolbar-group > .button-toolbar > button { color: var(--colorFg); }
Changelog
- 2021/06/03 Release
-
@guigirl Aww, don’t mention it, you’re welcome
-
upvoted. please also upvote this other related request to get it officially fixed in vivaldi...
https://forum.vivaldi.net/topic/28859/bug-text-color-is-stuck-in-black-or-white-for-background-tabs
-
@tsunamiz Create a feature request for it, but check whether one exists already. This is not a bug, but a design choice by Vivaldi.
-
it is actually a design flaw.
-
The new snapshot
2482.13
breaks this mod. I pushed an update and it should be fine now.