TimeTuna

Embed shows a white background

You set background=false, but the iframe still paints a white block behind and below the booking card.

Symptom

  • The embed URL already has background=false, yet the iframe is white.
  • The white area is most obvious below the card, where your page should show through.
  • With translucent=true the card looks washed out instead of glassy.
  • Opening the same URL in a browser tab looks correct.

Why it happens

Chrome (and other Chromium browsers) paint an iframe with an opaque background when the embedded page's color-scheme does not match the page it is embedded in. A dark site that sets color-scheme: dark on its own :root and embeds a page that does not declare one gets the light default, which is white.

TimeTuna declares the scheme that matches the theme parameter, sotheme=dark serves a dark-scheme document and theme=light a light-scheme one. The embed URL has to name the theme: without it the browser default applies, which is what turns the frame white on a dark site.

How to fix

  1. Match theme to your site. A dark site embeds theme=dark; a light site embeds theme=light. This is what keeps the iframe transparent.
    HTML
    <iframe src="https://timetuna.com/your-page?embed=true&theme=dark&background=false&translucent=true"
            width="100%" height="800" style="border:none;border-radius:12px"></iframe>
  2. Keep background=false so the card does not paint its own backdrop over your page.
  3. If your site sets a color-scheme that differs from the theme you embed (for example a dark page that wants the light card), state the scheme on the iframe element itself so both sides agree:
    HTML
    <iframe style="border:none;border-radius:12px;color-scheme:light" ...></iframe>
  4. Reload with the cache disabled. Editing the src in devtools reloads the frame, and a partly loaded frame is white for a moment on its own.
Check it in devtools
Select the iframe, then look at the color-scheme computed value on your page's:root. If it says dark, your embed URL needstheme=dark.

Still not working?

Open with the URL of the page the iframe is on. See also Embed on your site for the full parameter list.