I've successfully added a github skyline into an iFrame on my site. However, it is not dark mode as specified in the url, and when it attempts to load the dark mode, three.js warnings are being thrown to the console.

I've been following this repo.

Here is how I load it into the iFrame:

<script lang="ts">


import "./styles/global.css";
  import { onMount } from "svelte";
  import { registerSW } from "virtual:pwa-register";
  import ImageScroller from "./lib/components/ImageScroller.svelte";


  const BASE_EMBED_URL =
    "https://viewscreen.githubusercontent.com/view/solid?color_mode=dark&url=https%3a%2f%2fraw.githubusercontent.com";
    
  const myRepoUrl = `${BASE_EMBED_URL}/MikeyGInTheMorning/self-titled/dev/public/github/MikeyGInTheMorning-2022.stl`;

  onMount(() => {
    registerSW();
  });
</script>

<div class="flex flex-col">
  <div class="relative h-500vh">
    <ImageScroller />
  </div>
  <div class="w-full z-10">
    <iframe
      width="50%"
      height="500rem"
      title="Github Skyline"
      id="mikes-github-skyline"
      frameborder="0"
      scrolling="no"
      src={myRepoUrl}
    />
  </div>

  <div class="bg-yellow">dsf</div>
  <div class="bg-green">adsf</div>
</div>

And here is what it looks like loaded:

Finally, here is what I expected:

I did manage to check the url I was passing into the iFrame using a normal browser tab, and it still produces the same error. Link.

How do I begin to fix this?