Is there a way to get the accent color in custom.js?

[sirfredrick]

I am trying to get the accent color that matches the color of the current page. Is there some way to get this variable so I can use it in the custom.js file that I created? I want to be able to use this hex color value with another program.

[burbuja]

in css is it: --colorAccentFg (for foreground)
and
--colorAccentBg (for background)

I am not sure, if it helps to you for js.

[luetage]

You can get the value of the accent color in javascript like this –––>

setTimeout(function wait() {
    var adr = document.querySelector(".toolbar-addressbar.toolbar");
    if (adr != null) {
	var colorA = getComputedStyle(adr).getPropertyValue("--colorAccentBg");
	console.log('Accent color = ' + colorA);
    }
    else {
	setTimeout(wait, 300);
    }
}, 300);

Of course this currently only checks and saves the accent color on window creation, but this is the basic approach. Work from there and please share your results. ^^

[sirfredrick]

I am trying to use chrome.tabs api to be able to activate a function when the tab activation changes. Is this the correct usage? Because I cannot seem to get it to work.

setTimeout(function wait() {
    chrome.tabs.onActivated.addListener(function() {
        alert("Tab activation changed!");
    });
}, 300);

[luetage]

@sirfredrick You cannot use a chrome api in the UI. You are not writing an extension. Try to detect a variable change instead, something like this: https://stackoverflow.com/questions/1759987/listening-for-variable-changes-in-javascript?noredirect=1&lq=1

[LonM]

@sirfredrick said in Is there a way to get the accent color in custom.js?:

chrome.tabs.onActivated.addListener(function() {
alert("Tab activation changed!");
});

In order to use the chrome event listener APIs you need to add content to the background page of vivaldi, not the main one that has the window in it.

Unfortunately, I have no idea how you would mod that - but I was able to gte it to work by having the browser inspector enabled and inspecting the background page instead of the regular one:

[sirfredrick]

@luetage There are many different solutions on that page. Which solution should I use?

[luetage]

@sirfredrick The one that works for you ^^

[sirfredrick]

Here is what I did and it works!

var firstTime = true;

setInterval(function wait() {
    var adr = document.querySelector(".toolbar-addressbar.toolbar");
    if (adr != null) {
        var color = getComputedStyle(adr).getPropertyValue("--colorAccentBg");
        var colorOld = '';
        if (firstTime) {
            colorOld = color;
            firstTime = false;
        }
        if (color != colorOld) {
            console.log('Color = ' + color);
            colorOld = color
        }
    }
}, 3000);

Thanks for the help!

[LonM]

I wonder if you could make a more generic programmatic approach that you could request whenever it was needed, like:

function get_colour(colourName, colourDefault){
    const computed = getComputedStyle(document.body).getPropertyValue("--color"+colourName);
    return computed === "" ? colourDefault : computed;
}
console.log(get_colour("AccentBg", "#ffffff"));