Add ThemeSelect component with theme toggle functionality to the Starlight's Navbar

A new ThemeSelect.astro file was added to let users toggle between light and dark themes in Starlight Docs. This component replaces the default ThemeProvider.astro component

astro.config.mjs

@@ -93,6 +93,7 @@ export default defineConfig({
       components: {
         SiteTitle: "./src/components/ui/starlight/SiteTitle.astro",
         Head: "./src/components/ui/starlight/Head.astro",
+        ThemeSelect: "./src/components/ui/starlight/ThemeSelect.astro",
       },
       head: [
         {

src/components/ui/starlight/ThemeSelect.astro

@@ -0,0 +1,104 @@
+<!-- Dark Theme Toggle Button -->
+<button
+  type="button"
+  aria-label="Dark Theme Toggle"
+  id="dark-theme-toggle"
+  class="group flex h-8 w-8 items-center justify-center rounded-full font-medium text-neutral-600 outline-none ring-zinc-500 transition duration-300 hover:bg-neutral-200 hover:text-orange-400"
+  data-hs-theme-click-value="dark"
+>
+  <svg
+    class="h-4 w-4 flex-shrink-0"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"></path>
+  </svg>
+</button>
+
+<!-- Light Theme Toggle Button -->
+<button
+  type="button"
+  aria-label="Light Theme Toggle"
+  id="light-theme-toggle"
+  class="group flex hidden h-8 w-8 items-center justify-center rounded-full font-medium text-neutral-400 outline-none ring-zinc-500 transition duration-300 hover:bg-neutral-700 hover:text-orange-400"
+  data-hs-theme-click-value="light"
+>
+  <svg
+    class="h-4 w-4 flex-shrink-0"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <circle cx="12" cy="12" r="4"></circle>
+    <path d="M12 8a2 2 0 1 0 4 4"></path>
+    <path d="M12 2v2"></path>
+    <path d="M12 20v2"></path>
+    <path d="m4.93 4.93 1.41 1.41"></path>
+    <path d="m17.66 17.66 1.41 1.41"></path>
+    <path d="M2 12h2"></path>
+    <path d="M20 12h2"></path>
+    <path d="m6.34 17.66-1.41 1.41"></path>
+    <path d="m19.07 4.93-1.41 1.41"></path>
+  </svg>
+</button>
+
+<script>
+  // Define the Theme type
+  type Theme = "light" | "dark";
+
+  // Function to set the theme
+  function setTheme(theme: Theme): void {
+    document.documentElement.setAttribute("data-theme", theme);
+    localStorage.setItem("starlight-theme", theme);
+    updateButtons(theme);
+  }
+
+  // Function to update the button visibility
+  function updateButtons(theme: Theme): void {
+    const darkButton = document.getElementById("dark-theme-toggle");
+    const lightButton = document.getElementById("light-theme-toggle");
+
+    if (theme === "dark") {
+      darkButton?.classList.add("hidden");
+      lightButton?.classList.remove("hidden");
+    } else {
+      darkButton?.classList.remove("hidden");
+      lightButton?.classList.add("hidden");
+    }
+  }
+
+  // Event listeners for theme toggle buttons
+  document
+    .getElementById("dark-theme-toggle")
+    ?.addEventListener("click", () => {
+      setTheme("dark");
+    });
+
+  document
+    .getElementById("light-theme-toggle")
+    ?.addEventListener("click", () => {
+      setTheme("light");
+    });
+
+  // Initial theme setup
+  document.addEventListener("DOMContentLoaded", () => {
+    const storedTheme = localStorage.getItem("starlight-theme") as Theme | null;
+    const theme: Theme =
+      storedTheme ||
+      (window.matchMedia("(prefers-color-scheme: dark)").matches
+        ? "dark"
+        : "light");
+    setTheme(theme);
+  });
+</script>