Skip to main content
JonT
JonT
Community Member
February 21, 2024
Question

Dark mode support for the embedded booking widget

  • February 21, 2024
  • 3 replies
  • 2545 views

We are trying to use the embedded booking widget on our website and it works well except when our site is in dark mode. I provide custom colours using the ?background_color=xxx&text_color=xxx&primary_color=xxx options. It works well but the generated iframe has a white background instead of being transparent. The generated Calendly iframe does support a transparent background colour but the generated iframe needs to have this added into the head section:

<meta name="color-scheme" content="light dark">

I found the fix here: https://stackoverflow.com/a/77604431/343

If I manually add this tag using the browser inspector it works fine and the iframe has a transparent background again. Is it possible to have this tag added to the generated iframe so that we can have full dark mode support? Thanks!

    3 replies

    JonT
    JonTAuthor
    Community Member
    February 27, 2024

    For anyone else that runs into this issue you can solve it by adding color-scheme:light; style to the div wrapper:

    <div class="calendly-inline-widget" data-url="[calendly-url]" style="color-scheme:light;"></div>

    This is needed for dark mode websites until the iframe gets updated by the Calendly developers with the color-scheme meta tag.

      Thobani13115
      Thobani13115
      New Community Member
      February 12, 2025

      For everyone else that has not resolved the white iframe background, try this workaround “ https://calendly.com/example-page?embed_domain=example.com&embed_type=Inline” everything did not work for me. Ref: 

      Let me know if it works.

      Michael74530
      New Community Member
      January 14, 2026

      Hi everyone, sharing what finally worked for us.

      In our case, Calendly was rewriting the iframe src after load and stripping the background_color / text_color / primary_color params, so the widget would sometimes look “dark” briefly and then revert to the default light UI.

      Since we can’t inject the meta name="color-scheme" tag into Calendly’s cross-origin iframe, we solved it by styling the injected iframe element itself (a visual workaround):

      const iframe = el.querySelector("iframe") as HTMLIFrameElement | null;
      if (!iframe) return;

      iframe.style.background = "transparent";
      iframe.style.borderRadius = "16px";

      // Grey-dark theme (charcoal instead of black)
      iframe.style.filter =
        "invert(1) hue-rotate(180deg) brightness(1.08) contrast(0.82) saturate(0.90)";

      This keeps the embed visually consistent on a dark website (charcoal/grey instead of pure black). It’s a workaround, but it’s been stable for us in production.

      Hope this helps anyone stuck with the “always light” inline widget.

        Terms & ConditionsAccessibility statement