Embed shows a white background | TimeTuna Docs

Symptom

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, so theme=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 needs theme=dark.

Still not working?

Open the chat in the bottom-right with the URL of the page the iframe is on. See also Embed on your site for the full parameter list.