Dynamically change CSS variable within an iframe

Question

I have the variable within the iframe defined like this:

:root {
  --color_bg: #ffffff;
}

I want to change this CSS variable from the outside, already tried:

$(function() {
    setTimeout(function(){
        var iframe = $('iframe');
        $('.title', iframe.contents()).html('teste'); //FUNCIONA
        $(":root", iframe.contents()).css("--color_bg", '#000000'); //NAO FUNCIONA
        $('iframe').contents().find('html').css("--color_bg", '#000000'); //NAO FUNCIONA
    },1000)
});

Notice that $('.title', iframe.contents()).html('teste'); works perfectly. If I do $(":root").css("--color_bg", '#000000'); within the iframe also works smoothly.

Does anyone have any idea how I can do this?

Answer 1

After some research is tests I got a soulção, I do not know if it is the most elegant but it works:

$('iframe').contents().find('html').get(0).style.setProperty("--color_bg", "#000");

or

$(":root", iframe.contents()).get(0).style.setProperty("--color_bg", "#000");