I copy the JS code from `Pop up via element click` and when I click on the button, I see this white background color!

[hetari]

I copy the JS code from Pop up via element click and when I click on the button, I see this weird background color!
I want it to be transparent

Edit: I notice this thing when my PC in the dark mode, in the light mode the background color is transparent, how to make it transparent in the dark mode too!

this is my element :

<div
  data-cal-namespace="30min"
  data-cal-link="ebraheemsaba/30min"
  data-cal-config='{"layout":"month_view"}'
  class="contact-btn"
> Click Me </div>

and this is my script in the end of the body tag

<script type="text/javascript">
  (function (C, A, L) {
    let p = function (a, ar) {
      a.q.push(ar);
    };
    let d = C.document;
    C.Cal =
      C.Cal ||
      function () {
        let cal = C.Cal;
        let ar = arguments;
        if (!cal.loaded) {
          cal.ns = {};
          cal.q = cal.q || [];
          d.head.appendChild(d.createElement('script')).src = A;
          cal.loaded = true;
        }
        if (ar[0] === L) {
          const api = function () {
            p(api, arguments);
          };
          const namespace = ar[1];
          api.q = api.q || [];
          if (typeof namespace === 'string') {
            cal.ns[namespace] = cal.ns[namespace] || api;
            p(cal.ns[namespace], ar);
            p(cal, ['initNamespace', namespace]);
          } else p(cal, ar);
          return;
        }
        p(cal, ar);
      };
  })(window, 'https://app.cal.com/embed/embed.js', 'init');
  Cal('init', '30min', { origin: 'https://cal.com' });

  // Important: Please add the following attributes to the element that should trigger the calendar to open upon clicking.
  // `data-cal-link="ebraheemsaba/30min"`
  // data-cal-namespace="30min"
  // `data-cal-config='{"layout":"month_view","theme":"dark"}'`

  Cal.ns['30min']('ui', {
    theme: 'dark',
    styles: { branding: { brandColor: '#000000' } },
    hideEventTypeDetails: false,
    layout: 'month_view',
  });
</script>

Originally posted by @hetari in https://github.com/calcom/cal.com/discussions/16459

[hetari]

I fix it by adding :

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

[LukaGiorgadze]

I fix it by adding :

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

Same, meta color-scheme helped me too, but it's not working if website theme is dark.