title: How can an iframe get its parent background color?
body: <p>I have a Pardot (Salesforce) form displayed in an <code>iframe</code> and control over the markup and scripts on both domains.  The form has a transparent background and sometimes the parent page's background photo or color does not have enough contrast with the text color of form labels.  You can't read <em>First Name</em> when it's dark text on a dark background.</p>
  
  <p>My goal is to set a <code>body</code> class inside the <code>iframe</code> that is <code>.light-bg</code> or <code>.dark-bg</code> based on a color sampling of the parent element containing the frame.</p>
  
  <p>In this code the <code>iframe</code> would be able to determine if <code>div.framed-lead-form</code> has a light or dark background.  There are JS plugins to get an element's color saturation (this one has an interesting license <a href="https://gist.github.com/larryfox/1636338" rel="nofollow">https://gist.github.com/larryfox/1636338</a>) but I can't find anything that works through iframes. </p>
  
  <pre><code>&lt;div class="framed-lead-form"&gt;
      &lt;iframe src="//go.pardot.com/id" allowtransparency="true"&gt;&lt;/iframe&gt;
  &lt;/div&gt;
  </code></pre>