Change css variable in an Iframe

I’m stuck with the following problem. I’m using Angular to load an Iframe. Consider the angular app as A and Iframe as B. I’m loading B in A. I have used css variables to set colors on B. On A, I have added a color picker. I want to set the color selected on A’s color picker in B’s body. How can I modify the B’s body color that’s in an Iframe? For reference, consider WordPress’s customize page. I want to do something like that

Answer

You haven’t provide any code so I answer with pure html and javascript.

the frame B :

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style type="text/css">
        :root{
                --the-color:red;
        }
    </style>
</head>
<body>
<div style="color:var(--the-color)">
        BBBB
</div>
</body>
</html>

your javascript in frame A(parent):

    document.getElementById('fr1').contentWindow
   .document.documentElement.style.setProperty('--the-color','blue')

this will change the color from red to blue.