Question

Dark mode support for the embedded booking widget

  • 21 February 2024
  • 1 reply
  • 433 views

  • 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!


1 reply

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