<script
  src="https://challenges.cloudflare.com/turnstile/v0/api.js"
  async
  defer
></script>
<div class="turnstile">
  <div
    id="turnstile-widget"
    class="cf-turnstile"
    data-sitekey="{{ site_key }}"
    data-theme="dark"
  ></div>
</div>

<script>
  // Apply theme to the Turnstile widget based on system preference
  document.addEventListener("DOMContentLoaded", function () {
    const turnstileWidget = document.getElementById("turnstile-widget");
    if (turnstileWidget) {
      const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
      turnstileWidget.setAttribute("data-theme", prefersDark ? "dark" : "light");
    }
  });
</script>
