docs/src/layouts/MainLayout.astro

---
import { ViewTransitions } from "astro:transitions";
import SideNav from "../components/SideNav.astro";
import TopNav from "../components/TopNav.astro";
import Footer from "../components/Footer.astro";
---
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/logo.svg" />
    <meta name="viewport" content="width=device-width" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;500;700&family=Overpass:ital,wght@0,300;0,400;0,600;0,800;1,400&display=swap"
      rel="stylesheet"
    />

    <title>SvelteFire Documentation</title>
    <script async defer src="https://buttons.github.io/buttons.js"></script>
    <link rel="preconnect" href="https://FPK5SXN3GJ-dsn.algolia.net" crossorigin />
    <ViewTransitions />
  </head>
  <body class="dark:bg-gray6 dark:text-white transition-colors duration-500">
    <TopNav />
    <div class="relative flex items-stretch overflow-x-hidden">
    <SideNav />
      <main
        class="max-w-screen-2xl min-h-screen p-6 lg:p-20 mx-auto prose dark:prose-invert w-full flex flex-col justify-between"
      >
        <article>
          <slot />
        </article>

        <Footer />
      </main>
    </div>

    <script>
      function colorMode() {
        if (
          localStorage.theme === "dark" ||
          (!("theme" in localStorage) &&
            window.matchMedia("(prefers-color-scheme: dark)").matches)
        ) {
          document.documentElement.classList.add("dark");
        } else {
          document.documentElement.classList.remove("dark");
        }
      }
    
      colorMode();
      document.addEventListener('astro:beforeload', colorMode);
    </script>
  </body>
</html>


<style is:global>

  .DocSearch-Button {
      @apply flex items-center justify-center px-0;
  }

  .DocSearch-Button:hover, .DocSearch-Button:focus {
      @apply shadow-none bg-transparent text-gray4;
  }


  .DocSearch-Search-Icon path {
      @apply stroke-gray4;
  }

  .DocSearch-Button-Placeholder {
      @apply font-code lowercase ml-2;
  }

</style>