Skip to main content

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!

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.


Reply