Skip to main content
Question

Dark mode support for the embedded booking widget

  • February 21, 2024
  • 2 replies
  • 2088 views

JonT
  • Community Member
  • 1 reply

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!

2 replies

JonT
  • Author
  • Community Member
  • 1 reply
  • 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
  • New Community Member
  • 1 reply
  • 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.