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



  • 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.



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

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



  • 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. ^^



  • 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);
    


  • @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



  • @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:

    0_1523362572503_6d034ce8-e311-4f92-8439-d24c2c0d7bcd-image.png

    0_1523362591595_21c99b78-539c-47e7-8d14-d6b5103593f3-image.png



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



  • @sirfredrick The one that works for you ^^



  • 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!



  • 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"));
    

Log in to reply
 

Looks like your connection to Vivaldi Forum was lost, please wait while we try to reconnect.