radiant-docs 0.1.34 → 0.1.38

package/template/src/components/Search.astro

@@ -12,7 +12,7 @@ import { Icon } from "astro-icon/components";
   <!-- Search Trigger Button -->
   <button
     x-on:click="open()"
-    class="md:bg-white/90 dark:md:bg-neutral-800 flex items-center gap-2 h-[33px] md:min-w-64 px-3 -mr-3 xs:mr-0 text-xs text-neutral-500/80 dark:text-neutral-400/80 hover:text-neutral-500 dark:hover:text-neutral-400 md:border border-border rounded-lg cursor-pointer md:shadow-xs md:hover:shadow-sm transition"
+    class="md:bg-white/90 dark:md:bg-neutral-800 flex items-center gap-2 h-[33px] md:min-w-64 px-3 -mr-3 xs:mr-0 text-xs text-neutral-500/80 dark:text-neutral-400/70 hover:text-neutral-500 dark:hover:text-neutral-400 md:border border-border rounded-lg cursor-pointer md:shadow-xs md:hover:shadow-sm transition"
   >
     <Icon name="lucide:search" class="size-5 md:size-4" />
     <span class="hidden md:inline">Search documentation</span>
@@ -49,11 +49,11 @@ import { Icon } from "astro-icon/components";
           <!-- Search Input -->
           <div
             class="flex items-center gap-3 px-4"
-            :class="{ 'border-b border-neutral-200/80': results.length > 0 || (query.length > 0 && !loading) }"
+            :class="{ 'border-b border-neutral-200/80 dark:border-neutral-700/70': results.length > 0 || (query.length > 0 && !loading) }"
           >
             <Icon
               name="lucide:search"
-              class="size-5 sm:size-[18px] text-neutral-400 shrink-0"
+              class="size-5 sm:size-[18px] text-neutral-400 dark:text-neutral-500 shrink-0"
             />
             <input
               x-ref="searchInput"
@@ -65,18 +65,18 @@ import { Icon } from "astro-icon/components";
               x-on:keydown.enter.prevent="goToSelected()"
               type="text"
               placeholder="Search documentation..."
-              class="flex-1 py-4 text-base bg-transparent outline-none placeholder:text-neutral-400 sm:text-sm"
+              class="flex-1 py-4 text-base bg-transparent text-neutral-900 dark:text-neutral-100 outline-none placeholder:text-neutral-400 dark:placeholder:text-neutral-500 sm:text-sm"
             />
             <div x-show="loading" class="shrink-0 p-1">
               <Icon
                 name="lucide:loader"
-                class="w-4 h-4 text-neutral-400 animate-spin"
+                class="w-4 h-4 text-neutral-400 dark:text-neutral-500 animate-spin"
               />
             </div>
             <button
               x-show="query.length > 0 && !loading"
               x-on:click="clear()"
-              class="shrink-0 p-1 text-neutral-400 hover:text-neutral-600 transition-colors"
+              class="shrink-0 p-1 text-neutral-400 dark:text-neutral-500 hover:text-neutral-600 dark:hover:text-neutral-300 transition-colors"
             >
               <Icon name="lucide:x" class="w-4 h-4" />
             </button>
@@ -87,14 +87,14 @@ import { Icon } from "astro-icon/components";
             <!-- No Results -->
             <div
               x-show="query.length > 0 && results.length === 0 && !loading"
-              class="px-4 py-8 text-center text-neutral-500"
+              class="px-4 py-8 text-center text-neutral-500 dark:text-neutral-400"
             >
               <Icon
                 name="lucide:search-slash"
-                class="size-8 mx-auto mb-3 text-neutral-300"
+                class="size-8 mx-auto mb-3 text-neutral-300 dark:text-neutral-600"
               />
               <p class="text-sm">
-                No results found for <strong class="text-neutral-600"
+                No results found for <strong class="text-neutral-600 dark:text-neutral-300"
                   >"<span x-text="query"></span>"</strong
                 >.
               </p>
@@ -103,7 +103,7 @@ import { Icon } from "astro-icon/components";
             <!-- Results List -->
             <ul
               x-show="results.length > 0"
-              class="divide-y divide-neutral-200/80"
+              class="divide-y divide-neutral-200/80 dark:divide-neutral-700/70"
             >
               <template
                 x-for="(result, index) in results"
@@ -115,30 +115,30 @@ import { Icon } from "astro-icon/components";
                     x-on:click="close()"
                     x-on:mouseenter="selectedIndex = index"
                     class="flex flex-col gap-1 px-4 py-3 transition-colors"
-                    :class="{ 'bg-neutral-100/60': selectedIndex === index }"
+                    :class="{ 'bg-neutral-100/60 dark:bg-neutral-700/30': selectedIndex === index }"
                   >
                     <div class="flex items-center gap-2">
                       <!-- Page icon -->
                       <Icon
                         name="lucide:file"
                         x-show="result.type === 'page'"
-                        class="w-4 h-4 text-neutral-400 shrink-0"
+                        class="w-4 h-4 text-neutral-400 dark:text-neutral-500 shrink-0"
                       />
                       <!-- Heading icon -->
                       <Icon
                         name="lucide:hash"
                         x-show="result.type === 'heading'"
-                        class="w-4 h-4 text-neutral-400 shrink-0"
+                        class="w-4 h-4 text-neutral-400 dark:text-neutral-500 shrink-0"
                       />
                       <!-- Content/body text icon -->
                       <Icon
                         name="lucide:text"
                         x-show="result.type === 'content'"
-                        class="w-4 h-4 text-neutral-400 shrink-0"
+                        class="w-4 h-4 text-neutral-400 dark:text-neutral-500 shrink-0"
                       />
                       <!-- Parent title breadcrumb -->
                       <span
-                        class="text-sm text-neutral-500 truncate"
+                        class="text-sm text-neutral-500 dark:text-neutral-400 truncate"
                         x-show="result.parentTitle"
                       >
                         <span x-text="result.parentTitle"></span>
@@ -147,17 +147,17 @@ import { Icon } from "astro-icon/components";
                       <!-- Title: highlighted for page/heading, plain for content -->
                       <span
                         x-show="result.type === 'page' || result.type === 'heading'"
-                        class="font-medium text-neutral-900 truncate [&_mark]:bg-neutral-200 [&_mark]:text-neutral-900 [&_mark]:rounded [&_mark]:px-0.5"
+                        class="font-medium text-neutral-900 dark:text-neutral-100 truncate [&_mark]:bg-neutral-200 [&_mark]:text-neutral-900 dark:[&_mark]:bg-neutral-700 dark:[&_mark]:text-neutral-100 [&_mark]:rounded [&_mark]:px-0.5"
                         x-html="highlightMatch(result.title, query)"></span>
                       <span
                         x-show="result.type === 'content'"
-                        class="font-medium text-neutral-900 truncate"
+                        class="font-medium text-neutral-900 dark:text-neutral-100 truncate"
                         x-text="result.title"></span>
                     </div>
                     <!-- Excerpt: only for content type -->
                     <p
                       x-show="result.type === 'content'"
-                      class="text-sm text-neutral-600 line-clamp-2 pl-6 [&_mark]:bg-neutral-200 [&_mark]:text-neutral-900 [&_mark]:rounded [&_mark]:px-0.5"
+                      class="text-sm text-neutral-600 dark:text-neutral-300 line-clamp-2 pl-6 [&_mark]:bg-neutral-200 [&_mark]:text-neutral-900 dark:[&_mark]:bg-neutral-700 dark:[&_mark]:text-neutral-100 [&_mark]:rounded [&_mark]:px-0.5"
                       x-html="result.excerpt"
                     >
                     </p>

package/template/src/components/Sidebar.astro

@@ -7,11 +7,13 @@ const config: DocsConfig = await getConfig();
 ---
 
 <aside class="flex flex-col h-full">
-  <nav class="overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
+  <nav
+    class="overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+  >
     <SidebarMenu navigation={config.navigation} />
   </nav>
   <div
-    class="mt-auto bg-white z-10 p-3 border-t border-t-border-light flex gap-1.5 justify-end items-center"
+    class="mt-auto bg-background z-10 p-3 border-t border-t-border-light flex gap-1.5 justify-end items-center"
   >
     <span class="text-neutral-400 text-xs font-light">Theme</span>
     <ThemeSwitcher />

package/template/src/components/SidebarDropdown.astro

@@ -69,88 +69,91 @@ const currentPrefix = parentSlug
 <div x-data=`{
     open: false,
 }`>
-  <div
-    class:list={[
-      "mt-3 mx-2 z-10 relative",
-      menu.label && "rounded-lg bg-neutral-100 p-[3px]",
-    ]}
-  >
-    {
-      menu.label && (
-        <label class="font-semibold text-xs px-2 py-1.5 block">
-          {menu.label}
-        </label>
-      )
-    }
-    <div class="relative">
-      <button
-        class="flex items-center w-full text-sm text-neutral-700 bg-white border-t border-x border-neutral-200/70 rounded-lg shadow-sm shadow-neutral-200 px-3 py-2 cursor-pointer"
-        x-on:click="open = true"
-        aria-haspopup="menu"
-        aria-expanded
-      >
-        {
-          menu.items[currentMenuIndex].icon && (
-            <Icon
-              class="mr-2 size-4 opacity-80"
-              name={menu.items[currentMenuIndex].icon}
-            />
-          )
-        }
-        <span class="font-medium">{menu.items[currentMenuIndex].label}</span>
-        <Icon class="ml-auto" name="lucide:chevrons-up-down" />
-      </button>
-      <div class="fixed inset-0 z-50" x-show="open" x-on:click="open = false">
-      </div>
-      <ul
-        class:list={[
-          "z-50 absolute bg-white border border-neutral-200 rounded-lg inset-x-0 top-full py-[3px] shadow-xl overflow-hidden",
-          menu.label ? "mt-1.5" : "mt-1",
-        ]}
-        x-init
-        role="menu"
-        x-show="open"
-        x-transition.origin.top
-        x-cloak
-      >
-        {
-          menu.items.map(({ label }, index) => {
-            return (
-              <li
-                x-data={`{
+  <div class="mt-3 mx-2 z-10 relative dark:bg-neutral-900 rounded-lg">
+    <div
+      class:list={[
+        "",
+        menu.label &&
+          "rounded-lg bg-neutral-100 dark:bg-neutral-800/60 p-[3px]",
+      ]}
+    >
+      {
+        menu.label && (
+          <label class="font-semibold text-xs px-2 py-1.5 block">
+            {menu.label}
+          </label>
+        )
+      }
+      <div class="relative">
+        <button
+          class="flex items-center w-full text-sm text-neutral-700 dark:text-neutral-200 bg-white dark:bg-neutral-700/30 border-t border-x border-neutral-200/70 dark:border-neutral-700/40 dark:border-b rounded-lg shadow-xs px-3 py-2 cursor-pointer"
+          x-on:click="open = true"
+          aria-haspopup="menu"
+          aria-expanded
+        >
+          {
+            menu.items[currentMenuIndex].icon && (
+              <Icon
+                class="mr-2 size-4 opacity-80"
+                name={menu.items[currentMenuIndex].icon}
+              />
+            )
+          }
+          <span class="font-medium">{menu.items[currentMenuIndex].label}</span>
+          <Icon class="ml-auto" name="lucide:chevrons-up-down" />
+        </button>
+        <div class="fixed inset-0 z-50" x-show="open" x-on:click="open = false">
+        </div>
+        <ul
+          class:list={[
+            "z-50 absolute bg-white dark:bg-neutral-800 border dark:border-neutral-700/40 rounded-lg inset-x-0 top-full py-[3px] shadow-xl overflow-hidden",
+            menu.label ? "mt-1.5" : "mt-1",
+          ]}
+          x-init
+          role="menu"
+          x-show="open"
+          x-transition.origin.top
+          x-cloak
+        >
+          {
+            menu.items.map(({ label }, index) => {
+              return (
+                <li
+                  x-data={`{
                 index: ${index}
               }`}
-                role="menuitem"
-              >
-                <a
-                  class="flex items-center px-3 py-2 cursor-pointer text-sm text-neutral-700 relative z-0 before:-z-10 before:absolute before:inset-x-1 before:inset-y-px before:rounded-md before:duration-150"
-                  class:list={[
-                    index === currentMenuIndex
-                      ? "before:bg-neutral-200/50 text-neutral-900"
-                      : "hover:before:bg-neutral-100/70",
-                  ]}
-                  href={firstHrefOfMenuItems[index] ?? "/"}
+                  role="menuitem"
                 >
-                  {menu.items[index].icon && (
-                    <Icon
-                      class="mr-2 size-4 opacity-75"
-                      name={menu.items[index].icon}
-                    />
-                  )}
-                  {label}
-                  {index === currentMenuIndex && (
-                    <Icon
-                      class="ml-auto text-neutral-900 [&_path]:stroke-3"
-                      name="lucide:check"
-                      stroke-width={10}
-                    />
-                  )}
-                </a>
-              </li>
-            );
-          })
-        }
-      </ul>
+                  <a
+                    class="flex items-center px-3 py-2 cursor-pointer text-sm text-neutral-700 dark:text-neutral-300 relative z-0 before:-z-10 before:absolute before:inset-x-1 before:inset-y-px before:rounded-md before:duration-150"
+                    class:list={[
+                      index === currentMenuIndex
+                        ? "before:bg-neutral-200/50 dark:before:bg-neutral-700/50 text-neutral-900 dark:text-white"
+                        : "hover:before:bg-neutral-100/70 dark:hover:before:bg-neutral-700/30",
+                    ]}
+                    href={firstHrefOfMenuItems[index] ?? "/"}
+                  >
+                    {menu.items[index].icon && (
+                      <Icon
+                        class="mr-2 size-4 opacity-75"
+                        name={menu.items[index].icon}
+                      />
+                    )}
+                    {label}
+                    {index === currentMenuIndex && (
+                      <Icon
+                        class="ml-auto text-primary [&_path]:stroke-3"
+                        name="lucide:check"
+                        stroke-width={10}
+                      />
+                    )}
+                  </a>
+                </li>
+              );
+            })
+          }
+        </ul>
+      </div>
     </div>
   </div>
   <div

package/template/src/components/SidebarGroup.astro

@@ -1,6 +1,7 @@
 ---
 import type { NavGroup } from "../lib/validation";
 import SidebarLink from "./SidebarLink.astro";
+import SidebarOpenApiPageLink from "./sidebar/SidebarOpenApiPageLink.astro";
 import SidebarSubgroup from "./SidebarSubgroup.astro";
 import { slugify } from "../lib/utils";
 import Tag from "./ui/Tag.astro";
@@ -38,6 +39,8 @@ const currentPrefix = parentSlug ? `${parentSlug}/${groupSlug}` : groupSlug;
               title={child.title}
               groupSlug={currentPrefix}
             />
+          ) : "openapi" in child ? (
+            <SidebarOpenApiPageLink item={child} parentSlug={currentPrefix} />
           ) : (
             <SidebarSubgroup item={child} parentSlug={currentPrefix} />
           )}

package/template/src/components/SidebarMenu.astro

@@ -1,6 +1,12 @@
 ---
-import type { NavGroup, NavigationItem, NavPage } from "../lib/validation";
+import type {
+  NavGroup,
+  NavigationItem,
+  NavOpenApiPage,
+  NavPage,
+} from "../lib/validation";
 import SidebarOpenApi from "./sidebar/SidebarOpenApi.astro";
+import SidebarOpenApiPageLink from "./sidebar/SidebarOpenApiPageLink.astro";
 import SidebarDropdown from "./SidebarDropdown.astro";
 import SidebarSegmented from "./SidebarSegmented.astro";
 import SidebarGroup from "./SidebarGroup.astro";
@@ -24,6 +30,13 @@ let { navigation, parentSlug = "" } = Astro.props;
           </li>
         ) : "group" in item ? (
           <SidebarGroup item={item as NavGroup} parentSlug={parentSlug} />
+        ) : "openapi" in item ? (
+          <li>
+            <SidebarOpenApiPageLink
+              item={item as NavOpenApiPage}
+              parentSlug={parentSlug}
+            />
+          </li>
         ) : (
           <li>
             <SidebarLink

package/template/src/components/SidebarSegmented.astro

@@ -65,22 +65,22 @@ const currentPrefix = parentSlug
   : menuItemSlug;
 ---
 
-<div class="mt-3 mx-2">
+<div class="mt-3 mx-2 z-10 relative dark:bg-neutral-900 rounded-lg">
   {
     menu.label && (
       <label class="font-semibold text-xs px-2 pb-1 block">{menu.label}</label>
     )
   }
-  <ul class="rounded-lg bg-neutral-100 p-[3px]">
+  <ul class="rounded-lg bg-neutral-100 dark:bg-neutral-800/60 p-[3px]">
     {
       menu.items.map((item, index) => (
         <li>
           <a
-            class="flex items-center px-3 py-1.5 cursor-pointer text-sm rounded-md border-x border-t"
+            class="flex items-center px-3 py-1.5 cursor-pointer text-sm rounded-md border-x border-t transition-colors duration-150"
             class:list={[
               index === currentMenuIndex
-                ? "bg-white border-neutral-200/70 shadow-sm shadow-neutral-200 text-neutral-900"
-                : "text-neutral-600 border-transparent",
+                ? "bg-white dark:bg-neutral-700/30 border-neutral-200/70 dark:border-neutral-700/40 dark:border-b shadow-sm shadow-neutral-200/80 dark:shadow-neutral-950/20 text-neutral-900 dark:text-white"
+                : "text-neutral-600 dark:text-neutral-300 border-transparent hover:text-primary dark:hover:text-primary",
             ]}
             href={firstHrefOfMenuItems[index] ?? "/"}
           >

package/template/src/components/SidebarSubgroup.astro

@@ -1,7 +1,13 @@
 ---
 import { getConfig, type NavGroup } from "../lib/validation";
 import SidebarLink from "./SidebarLink.astro";
-import { buildMdxPageHref, slugify } from "../lib/utils";
+import SidebarOpenApiPageLink from "./sidebar/SidebarOpenApiPageLink.astro";
+import {
+  buildMdxPageHref,
+  buildOpenApiEndpointHref,
+  parseOpenApiEndpoint,
+  slugify,
+} from "../lib/utils";
 import Tag from "./ui/Tag.astro";
 import Icon from "./ui/Icon.astro";
 
@@ -21,22 +27,37 @@ const listId = `list-${groupId}`;
 
 // Check if any child page is active (shallow check, no recursion needed)
 const containsActivePage = item.pages.some((child) => {
-  const pagePath =
-    typeof child === "string" ? child : "pages" in child ? null : child.page;
+  let href: string | null = null;
 
-  if (pagePath) {
-    const href = buildMdxPageHref({
-      filePath: pagePath,
+  if (typeof child === "string") {
+    href = buildMdxPageHref({
+      filePath: child,
       groupSlug: currentPrefix,
       homePath: config.home,
     });
-
-    // Normalize paths for comparison (remove trailing slashes)
-    const normalizedCurrent = Astro.url.pathname.replace(/\/$/, "");
-    const normalizedTarget = href.replace(/\/$/, "");
-    return normalizedCurrent === normalizedTarget;
+  } else if ("page" in child) {
+    href = buildMdxPageHref({
+      filePath: child.page,
+      groupSlug: currentPrefix,
+      homePath: config.home,
+    });
+  } else if ("openapi" in child) {
+    const parsedEndpoint = parseOpenApiEndpoint(child.openapi.endpoint);
+    if (parsedEndpoint) {
+      href = buildOpenApiEndpointHref({
+        path: parsedEndpoint.path,
+        method: parsedEndpoint.method,
+        groupSlug: currentPrefix,
+      });
+    }
   }
-  return false;
+
+  if (!href) return false;
+
+  // Normalize paths for comparison (remove trailing slashes)
+  const normalizedCurrent = Astro.url.pathname.replace(/\/$/, "");
+  const normalizedTarget = href.replace(/\/$/, "");
+  return normalizedCurrent === normalizedTarget;
 });
 ---
 
@@ -100,6 +121,8 @@ const containsActivePage = item.pages.some((child) => {
               title={child.title}
               groupSlug={currentPrefix}
             />
+          ) : "openapi" in child ? (
+            <SidebarOpenApiPageLink item={child} parentSlug={currentPrefix} />
           ) : null}
         </li>
       ))

package/template/src/components/TableOfContents.astro

@@ -33,15 +33,15 @@ for (const heading of headings) {
   aria-label="Table of Contents"
   data-slugs={JSON.stringify(headings.map((h) => h.slug))}
 >
-  <div class="text-sm font-medium mb-3">On this page</div>
-  <div class="flex text-neutral-600/90">
+  <div class="text-sm font-medium mb-3 text-neutral-900 dark:text-neutral-100">On this page</div>
+  <div class="flex text-neutral-600/90 dark:text-neutral-300/90">
     <svg viewBox="0 0 22 100" width="22px" height="100" class="shrink-0">
       <path
         id="toc-bg-path"
         d=""
         stroke-width="1.2"
         vector-effect="non-scaling-stroke"
-        class="stroke-neutral-200"
+        class="stroke-neutral-200 dark:stroke-neutral-700/70"
         fill="none"
         stroke-linecap="round"
         stroke-linejoin="round"></path>
@@ -50,7 +50,7 @@ for (const heading of headings) {
         d=""
         stroke-width="1.4"
         vector-effect="non-scaling-stroke"
-        class="stroke-blue-700/60 transition-[stroke-dasharray] duration-200"
+        class="stroke-neutral-700/70 dark:stroke-neutral-300/80 transition-[stroke-dasharray] duration-200"
         fill="none"
         stroke-linecap="round"
         stroke-linejoin="round"></path>
@@ -63,7 +63,7 @@ for (const heading of headings) {
             {heading.text && (
               <a
                 href={`#${heading.slug}`}
-                class="block transition duration-200 hover:text-neutral-900"
+                class="block transition duration-200 hover:text-neutral-900 dark:hover:text-neutral-100"
                 data-slug={heading.slug}
               >
                 {heading.text}
@@ -75,7 +75,7 @@ for (const heading of headings) {
                   <li class:list={["", heading.text ? "mt-3" : "mt-0"]}>
                     <a
                       href={`#${subHeading.slug}`}
-                      class="block transition duration-200 hover:text-neutral-900"
+                      class="block transition duration-200 hover:text-neutral-900 dark:hover:text-neutral-100"
                       data-slug={subHeading.slug}
                     >
                       {subHeading.text}
@@ -239,10 +239,11 @@ for (const heading of headings) {
           );
           circle.setAttribute("cx", String(item.x));
           circle.setAttribute("cy", String(midY));
-          circle.setAttribute("r", "2.5");
+          circle.setAttribute("r", "2.25");
           circle.setAttribute("fill", "currentColor");
           circle.classList.add(
             "fill-neutral-300",
+            "dark:fill-neutral-600",
             "transition-all",
             "duration-200"
           );
@@ -328,13 +329,21 @@ for (const heading of headings) {
         circles?.forEach((circle) => {
           const slug = (circle as SVGCircleElement).dataset.slug;
           if (slug && visibleSlugs.has(slug)) {
-            circle.classList.remove("fill-neutral-300");
-            circle.classList.add("fill-blue-700", "delay-100");
-            circle.setAttribute("r", "3");
+            circle.classList.remove("fill-neutral-300", "dark:fill-neutral-600");
+            circle.classList.add(
+              "fill-neutral-700",
+              "dark:fill-neutral-200",
+              "delay-100"
+            );
+            circle.setAttribute("r", "2.75");
           } else {
-            circle.classList.remove("fill-blue-700", "delay-100");
-            circle.classList.add("fill-neutral-300");
-            circle.setAttribute("r", "2.5");
+            circle.classList.remove(
+              "fill-neutral-700",
+              "dark:fill-neutral-200",
+              "delay-100"
+            );
+            circle.classList.add("fill-neutral-300", "dark:fill-neutral-600");
+            circle.setAttribute("r", "2.25");
           }
         });
 
@@ -343,9 +352,9 @@ for (const heading of headings) {
         tocLinks?.forEach((link) => {
           const slug = (link as HTMLAnchorElement).dataset.slug;
           if (slug && visibleSlugs.has(slug)) {
-            link.classList.add("text-neutral-900");
+            link.classList.add("text-neutral-900", "dark:text-neutral-100");
           } else {
-            link.classList.remove("text-neutral-900");
+            link.classList.remove("text-neutral-900", "dark:text-neutral-100");
           }
         });
       }

package/template/src/components/ThemeSwitcher.astro

@@ -9,6 +9,7 @@ import { Icon } from "astro-icon/components";
             return mode === 'light' || mode === 'dark' ? mode : null;
         })(),
         theme: localStorage.getItem('theme') || 'system',
+        themeSwitchFrameId: null,
         init() {
             if (this.forcedTheme) {
                 this.theme = this.forcedTheme;
@@ -43,16 +44,22 @@ import { Icon } from "astro-icon/components";
             });
         },
         updateDOM() {
-            document.documentElement.classList.add('is-switching-theme')
+            const root = document.documentElement;
+            root.classList.add('is-switching-theme');
             const activeTheme = this.forcedTheme || this.theme;
             const isDark = activeTheme === 'dark' || 
               (activeTheme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches);
 
-            document.documentElement.classList.toggle('dark', isDark);
-            document.documentElement.dataset.theme = isDark ? 'dark' : 'light';
-            setTimeout(() => {
-              document.documentElement.classList.remove('is-switching-theme');
-            }, 200);
+            root.classList.toggle('dark', isDark);
+            root.dataset.theme = isDark ? 'dark' : 'light';
+
+            if (this.themeSwitchFrameId !== null) {
+              cancelAnimationFrame(this.themeSwitchFrameId);
+            }
+            this.themeSwitchFrameId = requestAnimationFrame(() => {
+              root.classList.remove('is-switching-theme');
+              this.themeSwitchFrameId = null;
+            });
         },
         markerStyle: { left: null, width: null },
         updateMarker() {
@@ -67,10 +74,10 @@ import { Icon } from "astro-icon/components";
             }
         }
     }"
-  class="relative flex gap-[3px] p-px bg-neutral-100 dark:bg-neutral-800 rounded-full w-fit inset-shadow-sm inset-shadow-neutral-100/80 text-neutral-500"
+  class="relative flex gap-[3px] p-px bg-background-dark dark:bg-neutral-800/40 rounded-full w-fit text-neutral-500"
 >
   <div
-    class="anchor-pill absolute top-px bottom-px bg-white dark:bg-neutral-700 rounded-full shadow-xs border-[0.5px] border-neutral-200/80 ease-out z-0 flex items-center justify-center animate-[scaleIn_0.5s_ease-out]"
+    class="anchor-pill absolute top-px dark:top-0.5 bottom-px dark:bottom-0.5 bg-white dark:bg-neutral-800 rounded-full shadow-xs border-[0.5px] border-neutral-200/80 dark:border-neutral-700/50 ease-out z-0 flex items-center justify-center animate-[scaleIn_0.5s_ease-out]"
     style="left: 3px;"
     :style="markerStyle.width ? `left: ${markerStyle.left}; width: ${markerStyle.width}` : ''"
   >