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


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

the frame B :

<!DOCTYPE html>

<html lang="en" xmlns="">
    <style type="text/css">
<div style="color:var(--the-color)">

your javascript in frame A(parent):


this will change the color from red to blue.