radiant-docs 0.1.37 → 0.1.38

package/template/src/components/user/CodeBlock.astro

@@ -116,25 +116,58 @@ function parseHighlightedLineNumbers(
 
 function buildTokenStyle(token: {
   color?: string;
+  darkColor?: string;
   bgColor?: string;
+  darkBgColor?: string;
   fontStyle?: number;
   htmlStyle?: Record<string, string>;
+  darkHtmlStyle?: Record<string, string>;
 }): string | undefined {
   const styleSegments: string[] = [];
 
-  if (token.color) styleSegments.push(`color:${token.color}`);
-  if (token.bgColor) styleSegments.push(`background-color:${token.bgColor}`);
+  const pushStyleVariable = (property: string, value?: string) => {
+    if (value) styleSegments.push(`${property}:${value}`);
+  };
+
+  pushStyleVariable("--rd-token-color", token.color);
+  pushStyleVariable("--rd-token-color-dark", token.darkColor);
+  pushStyleVariable("--rd-token-bg", token.bgColor);
+  pushStyleVariable("--rd-token-bg-dark", token.darkBgColor);
 
   const fontStyle = typeof token.fontStyle === "number" ? token.fontStyle : 0;
   if ((fontStyle & 1) === 1) styleSegments.push("font-style:italic");
   if ((fontStyle & 2) === 2) styleSegments.push("font-weight:600");
   if ((fontStyle & 4) === 4) styleSegments.push("text-decoration:underline");
 
-  if (token.htmlStyle && typeof token.htmlStyle === "object") {
-    for (const [property, value] of Object.entries(token.htmlStyle)) {
+  const pushHtmlStyle = (
+    styleObject: Record<string, string> | undefined,
+    isDarkStyle: boolean,
+  ) => {
+    if (!styleObject || typeof styleObject !== "object") return;
+
+    for (const [property, value] of Object.entries(styleObject)) {
+      const normalizedProperty = property.trim().toLowerCase();
+      if (normalizedProperty === "color") {
+        pushStyleVariable(
+          isDarkStyle ? "--rd-token-color-dark" : "--rd-token-color",
+          value,
+        );
+        continue;
+      }
+      if (normalizedProperty === "background-color") {
+        pushStyleVariable(
+          isDarkStyle ? "--rd-token-bg-dark" : "--rd-token-bg",
+          value,
+        );
+        continue;
+      }
+
       styleSegments.push(`${property}:${value}`);
     }
-  }
+  };
+
+  pushHtmlStyle(token.htmlStyle, false);
+  pushHtmlStyle(token.darkHtmlStyle, true);
 
   if (!styleSegments.length) return undefined;
   return styleSegments.join(";");
@@ -198,7 +231,7 @@ const renderedCodeLinesHtml = normalizedTokenLines
               const tokenStyleAttribute = tokenStyle
                 ? ` style="${escapeAttribute(tokenStyle)}"`
                 : "";
-              return `<span${tokenStyleAttribute}>${escapeHtml(token.content)}</span>`;
+              return `<span data-rd-token${tokenStyleAttribute}>${escapeHtml(token.content)}</span>`;
             })
             .join("")
         : fallbackLineContent.length > 0
@@ -206,14 +239,14 @@ const renderedCodeLinesHtml = normalizedTokenLines
           : "&nbsp;";
 
     const lineNumberHtml = parsedShowLineNumbers
-      ? `<span class="w-10 shrink-0 select-none pl-4 pr-3 text-right tabular-nums text-neutral-400">${lineNumber}</span>`
+      ? `<span class="w-10 shrink-0 select-none pl-4 pr-3 text-right tabular-nums text-neutral-400 dark:text-neutral-500">${lineNumber}</span>`
       : "";
 
     const lineContentClass = parsedShowLineNumbers
       ? "flex-1 whitespace-pre pr-4"
       : "flex-1 whitespace-pre pr-4 pl-4";
     const lineClass = isHighlighted
-      ? "flex min-w-full bg-neutral-100/80"
+      ? "flex min-w-full bg-neutral-100/80 dark:bg-neutral-800/70"
       : "flex min-w-full";
 
     return `<span class="${lineClass}">${lineNumberHtml}<span class="${lineContentClass}">${tokenHtml}</span></span>`;
@@ -238,18 +271,18 @@ const renderedCodeLinesHtml = normalizedTokenLines
 >
   <div
     class:list={[
-      "w-full max-w-full min-w-0 overflow-hidden border border-neutral-200 bg-white shadow-xs",
+      "w-full max-w-full min-w-0 overflow-hidden border border-neutral-200 bg-white shadow-xs dark:border-neutral-800 dark:bg-(--rd-code-surface)",
       parsedInCodeGroup ? "rounded-t-none rounded-b-xl" : "rounded-xl",
     ]}
   >
     {
       !parsedInCodeGroup && parsedShowFilename ? (
-        <div class="flex items-center justify-between gap-2 border-b border-neutral-200 bg-neutral-50 inset-shadow-sm inset-shadow-neutral-100/80">
+        <div class="flex items-center justify-between gap-2 border-b border-neutral-200 bg-neutral-50 inset-shadow-sm inset-shadow-neutral-100/80 dark:border-neutral-800 dark:bg-neutral-900/60 dark:inset-shadow-neutral-900/80">
           <div class="min-w-0 flex-1">
-            <div class="relative h-9 w-fit max-w-full rounded-tl-xl bg-white">
-              <div class="absolute inset-x-0 -bottom-px h-px bg-white" />
+            <div class="relative h-9 w-fit max-w-full rounded-tl-xl bg-white dark:bg-(--rd-code-surface)">
+              <div class="absolute inset-x-0 -bottom-px h-px bg-white dark:bg-(--rd-code-surface)" />
               <CodeTabEdge className="pointer-events-none absolute -top-px left-full z-10 h-[calc(100%+2px)]" />
-              <div class="relative z-20 inline-flex h-9 max-w-full items-center gap-2 pl-5 py-1.5 text-xs font-medium text-neutral-700">
+              <div class="relative z-20 inline-flex h-9 max-w-full items-center gap-2 pl-5 py-1.5 text-xs font-medium text-neutral-700 dark:text-neutral-300">
                 {shouldRenderLanguageIcon ? (
                   <CodeLanguageIcon
                     language={normalizedLanguage}
@@ -261,12 +294,12 @@ const renderedCodeLinesHtml = normalizedTokenLines
               </div>
             </div>
           </div>
-          <div class="relative h-9 w-5 shrink-0 rounded-tr-xl bg-white">
-            <div class="absolute inset-x-0 -bottom-px h-px bg-white" />
+          <div class="relative h-9 w-5 shrink-0 rounded-tr-xl bg-white dark:bg-(--rd-code-surface)">
+            <div class="absolute inset-x-0 -bottom-px h-px bg-white dark:bg-(--rd-code-surface)" />
             <CodeTabEdge className="pointer-events-none absolute -top-px right-full z-10 h-[calc(100%+2px)] rotate-y-180" />
             <button
               type="button"
-              class="absolute right-2 top-1/2 z-20 inline-flex size-7 -translate-y-1/2 appearance-none items-center justify-center rounded-md border-0 bg-transparent text-neutral-500/80 shadow-none outline-none ring-0 transition-colors duration-150 hover:bg-neutral-50 hover:text-neutral-600 focus:outline-none focus-visible:outline-none focus:ring-0 focus-visible:ring-0 cursor-pointer"
+              class="absolute right-2 top-1/2 z-20 inline-flex size-7 -translate-y-1/2 appearance-none items-center justify-center rounded-md border-0 bg-transparent text-neutral-500/80 shadow-none outline-none ring-0 transition-colors duration-150 hover:bg-neutral-50 hover:text-neutral-600 focus:outline-none focus-visible:outline-none focus:ring-0 focus-visible:ring-0 cursor-pointer dark:text-neutral-400 dark:hover:bg-neutral-800 dark:hover:text-neutral-200"
               data-rd-copy-trigger="true"
               data-rd-copy-content={encodedRaw}
               aria-label="Copy code"
@@ -279,7 +312,7 @@ const renderedCodeLinesHtml = normalizedTokenLines
               />
               <Icon
                 name="lucide:check"
-                class="absolute size-3.5 stroke-3 origin-center scale-25 rotate-6 opacity-0 text-green-700/80 transition-all duration-250 ease-[cubic-bezier(0.22,1,0.36,1)] will-change-transform motion-reduce:transition-none"
+                class="absolute size-3.5 stroke-3 origin-center scale-25 rotate-6 opacity-0 text-green-700/80 transition-all duration-250 ease-[cubic-bezier(0.22,1,0.36,1)] will-change-transform motion-reduce:transition-none dark:text-green-400/90"
                 data-rd-copy-check
                 aria-hidden="true"
               />
@@ -295,7 +328,7 @@ const renderedCodeLinesHtml = normalizedTokenLines
           <div class="pointer-events-none absolute right-2 top-2 z-20">
             <button
               type="button"
-              class="pointer-events-auto inline-flex size-7 appearance-none items-center justify-center rounded-md border border-neutral-200/80 text-neutral-500/80 bg-white/80 backdrop-blur-xs outline-none ring-0 transition-colors duration-150 hover:bg-neutral-50 hover:text-neutral-600 focus:outline-none focus-visible:outline-none focus:ring-0 focus-visible:ring-0 cursor-pointer"
+              class="pointer-events-auto inline-flex size-7 appearance-none items-center justify-center rounded-md border border-neutral-200/80 text-neutral-500/80 bg-white/80 backdrop-blur-xs outline-none ring-0 transition-colors duration-150 hover:bg-neutral-50 hover:text-neutral-600 focus:outline-none focus-visible:outline-none focus:ring-0 focus-visible:ring-0 cursor-pointer dark:border-neutral-700/50 dark:bg-(--rd-code-surface) dark:text-neutral-400 dark:hover:bg-neutral-800 dark:hover:text-neutral-200"
               data-rd-copy-trigger="true"
               data-rd-copy-content={encodedRaw}
               aria-label="Copy code"
@@ -308,7 +341,7 @@ const renderedCodeLinesHtml = normalizedTokenLines
               />
               <Icon
                 name="lucide:check"
-                class="absolute size-3.5 stroke-3 origin-center scale-25 rotate-6 opacity-0 text-green-700/80 transition-all duration-250 ease-[cubic-bezier(0.22,1,0.36,1)] will-change-transform motion-reduce:transition-none"
+                class="absolute size-3.5 stroke-3 origin-center scale-25 rotate-6 opacity-0 text-green-700/80 transition-all duration-250 ease-[cubic-bezier(0.22,1,0.36,1)] will-change-transform motion-reduce:transition-none dark:text-green-400/90"
                 data-rd-copy-check
                 aria-hidden="true"
               />
@@ -333,10 +366,10 @@ const renderedCodeLinesHtml = normalizedTokenLines
 
       <div
         data-rd-code-scroll-area
-        class="relative overflow-x-auto [scrollbar-width:thin] [scrollbar-color:var(--color-neutral-300)_transparent] [&::-webkit-scrollbar]:h-1.5 [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-neutral-300/70 hover:[&::-webkit-scrollbar-thumb]:bg-neutral-300/90"
+        class="relative overflow-x-auto [scrollbar-width:thin] [scrollbar-color:var(--color-neutral-300)_transparent] [&::-webkit-scrollbar]:h-1.5 [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-neutral-300/70 hover:[&::-webkit-scrollbar-thumb]:bg-neutral-300/90 dark:[scrollbar-color:var(--color-neutral-700)_transparent] dark:[&::-webkit-scrollbar-thumb]:bg-neutral-700/70 dark:hover:[&::-webkit-scrollbar-thumb]:bg-neutral-700/90"
       >
         <pre
-          class="relative m-0 min-w-full bg-white p-0 text-[13px] leading-6"><code class="block min-w-full py-2.5 font-mono text-neutral-800"><Fragment set:html={renderedCodeLinesHtml} /></code></pre>
+          class="relative m-0 min-w-full bg-white p-0 text-[13px] leading-6 dark:bg-(--rd-code-surface)"><code data-rd-code-theme class="block min-w-full py-2.5 font-mono text-neutral-800 dark:text-neutral-200"><Fragment set:html={renderedCodeLinesHtml} /></code></pre>
       </div>
     </div>
   </div>
@@ -348,7 +381,9 @@ const renderedCodeLinesHtml = normalizedTokenLines
       const root = script.closest("[data-rd-code-block-root='true']");
       if (!(root instanceof HTMLElement)) return;
 
-      const copyButtons = root.querySelectorAll("[data-rd-copy-trigger='true']");
+      const copyButtons = root.querySelectorAll(
+        "[data-rd-copy-trigger='true']",
+      );
       if (copyButtons.length === 0) return;
 
       const setCopiedState = (button, copied) => {

package/template/src/components/user/CodeGroup.astro

@@ -8,7 +8,7 @@ import CodeTabEdge from "../ui/CodeTabEdge.astro";
   data-rd-code-group-root="true"
 >
   <div
-    class="relative z-10 overflow-visible rounded-t-xl border border-b-0 border-neutral-200 bg-neutral-50 inset-shadow-sm inset-shadow-neutral-100/80"
+    class="relative z-10 overflow-visible rounded-t-xl border border-b-0 border-neutral-200 bg-neutral-50 inset-shadow-sm inset-shadow-neutral-100/80 dark:border-neutral-800 dark:bg-neutral-900/60 dark:inset-shadow-neutral-900/80"
   >
     <div class="flex min-w-0 items-end justify-between gap-2">
       <div class="min-w-0 flex-1 overflow-hidden rounded-t-xl">
@@ -19,20 +19,25 @@ import CodeTabEdge from "../ui/CodeTabEdge.astro";
           <div
             data-rd-code-group-pill
             aria-hidden="true"
-            class="pointer-events-none absolute top-1/2 z-0 h-[28px] -translate-y-1/2 rounded-[9px] border-[0.5px] border-neutral-200 bg-white shadow-xs opacity-0 transition-[left,width,opacity] duration-200 ease-out"
+            class="pointer-events-none absolute top-1/2 z-0 h-[28px] -translate-y-1/2 rounded-[9px] border-[0.5px] border-neutral-200 bg-white shadow-xs opacity-0 transition-[left,width,opacity] duration-200 ease-out dark:border-neutral-700/70 dark:bg-(--rd-code-surface)"
           >
           </div>
         </div>
       </div>
 
-      <div class="relative h-9 w-5 shrink-0 rounded-tr-xl bg-white">
-        <div class="absolute inset-x-0 -bottom-px h-px bg-white"></div>
+      <div
+        class="relative h-9 w-5 shrink-0 rounded-tr-xl bg-white dark:bg-(--rd-code-surface)"
+      >
+        <div
+          class="absolute inset-x-0 -bottom-px h-px bg-white dark:bg-(--rd-code-surface)"
+        >
+        </div>
         <CodeTabEdge
           className="pointer-events-none absolute -top-px right-full z-10 h-[calc(100%+2px)] rotate-y-180"
         />
         <button
           type="button"
-          class="absolute right-2 top-1/2 z-20 inline-flex size-7 -translate-y-1/2 appearance-none items-center justify-center rounded-md border-0 bg-transparent text-neutral-500/80 shadow-none outline-none ring-0 transition-colors duration-150 hover:bg-neutral-50 hover:text-neutral-600 focus:outline-none focus-visible:outline-none focus:ring-0 focus-visible:ring-0 cursor-pointer"
+          class="absolute right-2 top-1/2 z-20 inline-flex size-7 -translate-y-1/2 appearance-none items-center justify-center rounded-md border-0 bg-transparent text-neutral-500/80 shadow-none outline-none ring-0 transition-colors duration-150 hover:bg-neutral-50 hover:text-neutral-600 focus:outline-none focus-visible:outline-none focus:ring-0 focus-visible:ring-0 cursor-pointer dark:text-neutral-400 dark:hover:bg-neutral-800 dark:hover:text-neutral-200"
           data-rd-copy-trigger="true"
           aria-label="Copy code"
         >
@@ -44,7 +49,7 @@ import CodeTabEdge from "../ui/CodeTabEdge.astro";
           />
           <Icon
             name="lucide:check"
-            class="absolute size-3.5 stroke-3 origin-center scale-25 rotate-6 opacity-0 text-green-700/80 transition-all duration-250 ease-[cubic-bezier(0.22,1,0.36,1)] will-change-transform motion-reduce:transition-none"
+            class="absolute size-3.5 stroke-3 origin-center scale-25 rotate-6 opacity-0 text-green-700/80 transition-all duration-250 ease-[cubic-bezier(0.22,1,0.36,1)] will-change-transform motion-reduce:transition-none dark:text-green-400/90"
             data-rd-copy-check
             aria-hidden="true"
           />
@@ -118,8 +123,7 @@ import CodeTabEdge from "../ui/CodeTabEdge.astro";
 
         const tabButton = document.createElement("button");
         tabButton.type = "button";
-        tabButton.className =
-          `relative inline-flex h-9 items-center border-0 bg-transparent px-3 py-1.5 text-xs font-medium text-neutral-600 transition-colors duration-150 focus:outline-none focus-visible:outline-none cursor-pointer ${hasTabIcon ? "gap-2" : ""}`;
+        tabButton.className = `relative inline-flex h-9 items-center border-0 bg-transparent px-3 py-1.5 text-xs font-medium text-muted-foreground transition-colors duration-150 focus:outline-none focus-visible:outline-none cursor-pointer ${hasTabIcon ? "gap-2" : ""}`;
         tabButton.setAttribute("aria-label", filename);
         tabButton.setAttribute("data-rd-code-group-tab", String(index));
 
@@ -172,8 +176,8 @@ import CodeTabEdge from "../ui/CodeTabEdge.astro";
         tabs.forEach(({ itemElement, tabButton, iconContainer }, index) => {
           const isActive = index === activeIndex;
           itemElement.style.display = isActive ? "" : "none";
-          tabButton.classList.toggle("text-neutral-900", isActive);
-          tabButton.classList.toggle("text-neutral-600", !isActive);
+          tabButton.classList.toggle("text-foreground", isActive);
+          tabButton.classList.toggle("text-muted-foreground", !isActive);
 
           if (!iconContainer) return;
           iconContainer.classList.toggle("opacity-100", isActive);

package/template/src/components/user/ComponentPreviewBlock.astro

@@ -64,12 +64,12 @@ const isInitiallyExpanded = shouldShowAllCode || totalLineCount <= visibleLines;
   data-rd-component-preview-root="true"
 >
   <div
-    class="w-full max-w-full min-w-0 overflow-x-auto rounded-t-xl border border-b-0 border-neutral-200 bg-white p-4 xs:p-6 sm:p-12 shadow-xs [&>:first-child]:mt-0! [&>:last-child]:mb-0!"
+    class="w-full max-w-full min-w-0 overflow-x-auto rounded-t-xl border border-b-0 bg-white dark:bg-neutral-800/15 p-4 xs:p-6 sm:p-12 shadow-xs [&>:first-child]:mt-0! [&>:last-child]:mb-0!"
   >
     <slot />
   </div>
   <div
-    class="rd-component-preview__code not-prose relative"
+    class="rd-component-preview__code not-prose relative overflow-hidden rounded-b-xl bg-white dark:bg-(--rd-code-surface)"
     data-rd-preview-expanded={isInitiallyExpanded ? "true" : "false"}
     style={{ "--rd-preview-visible-lines": String(visibleLines) }}
   >
@@ -84,17 +84,19 @@ const isInitiallyExpanded = shouldShowAllCode || totalLineCount <= visibleLines;
       collapsedLines={collapsedLines}
     />
     <div
-      class="rd-component-preview__overlay pointer-events-none absolute inset-x-px inset-y-px hidden items-end justify-center rounded-b-xl bg-linear-to-t from-neutral-50/90 to-neutral-50/30 pb-4"
+      class="rd-component-preview__overlay pointer-events-none absolute inset-x-px inset-y-px hidden items-end justify-center rounded-b-xl pb-4"
       data-rd-preview-overlay
       aria-hidden="true"
     >
-      <button
-        type="button"
-        class="pointer-events-auto inline-flex h-8 items-center justify-center rounded-md border border-neutral-200 bg-white px-3 text-sm font-medium text-neutral-700 shadow-md shadow-neutral-200 transition-colors duration-150 hover:bg-neutral-50 cursor-pointer"
-        data-rd-preview-expand
-      >
-        View code
-      </button>
+      <div class="bg-white dark:bg-neutral-800">
+        <button
+          type="button"
+          class="pointer-events-auto inline-flex h-8 items-center justify-center rounded-md border border-neutral-200 bg-white px-3 text-sm font-medium text-neutral-700 shadow-xl transition-colors duration-150 hover:bg-neutral-50 cursor-pointer dark:border-neutral-700 dark:bg-neutral-700/30 dark:text-neutral-200 dark:hover:bg-neutral-700/50"
+          data-rd-preview-expand
+        >
+          View code
+        </button>
+      </div>
     </div>
   </div>
 </div>
@@ -140,19 +142,43 @@ const isInitiallyExpanded = shouldShowAllCode || totalLineCount <= visibleLines;
   }
 
   .rd-component-preview__code :global(.group\/prose-code > div) {
-    background-color: var(--color-neutral-50) !important;
+    background-color: #fff !important;
     border-top-left-radius: 0 !important;
     border-top-right-radius: 0 !important;
   }
 
+  :global(.dark) .rd-component-preview__code :global(.group\/prose-code > div) {
+    background-color: var(--rd-code-surface) !important;
+  }
+
   .rd-component-preview__code :global(.group\/prose-code pre),
   .rd-component-preview__code :global(.group\/prose-code code) {
-    background-color: var(--color-neutral-50) !important;
+    background-color: #fff !important;
+  }
+
+  :global(.dark) .rd-component-preview__code :global(.group\/prose-code pre),
+  :global(.dark) .rd-component-preview__code :global(.group\/prose-code code) {
+    background-color: var(--rd-code-surface) !important;
   }
 
   .rd-component-preview__code[data-rd-preview-expanded="false"]
     .rd-component-preview__overlay {
     display: flex;
+    background: linear-gradient(
+      to top,
+      rgb(250 250 250 / 90%),
+      rgb(250 250 250 / 30%)
+    );
+  }
+
+  :global(.dark)
+    .rd-component-preview__code[data-rd-preview-expanded="false"]
+    .rd-component-preview__overlay {
+    background: linear-gradient(
+      to top,
+      color-mix(in srgb, var(--rd-code-surface) 90%, transparent),
+      color-mix(in srgb, var(--rd-code-surface) 35%, transparent)
+    );
   }
 
   .rd-component-preview__code :global([data-rd-code-scroll-area]) {

package/template/src/components/user/Image.astro

@@ -101,7 +101,7 @@ validateProps(
 
 <figure
   class:list={[
-    "p-1.5 pb-1 xs:pb-1.5 group border border-neutral-200/80 dark:border-neutral-800 shadow-xs bg-neutral-50 dark:bg-neutral-900 rounded-2xl",
+    "p-1.5 pb-1 xs:pb-1.5 group border border-neutral-200 dark:border-neutral-800 shadow-xs bg-neutral-50 dark:bg-(--rd-code-surface) rounded-2xl",
     hasCustomImageWidth ? "w-fit max-w-full mx-auto" : "w-full",
   ]}
   x-data="{ 
@@ -204,7 +204,7 @@ validateProps(
   }"
 >
   <div
-    class="overflow-hidden rounded-xl border border-neutral-200/50 dark:border-neutral-800/50 bg-neutral-100 dark:bg-black/20"
+    class="overflow-hidden rounded-xl border border-neutral-200 dark:border-neutral-800 bg-neutral-100 dark:bg-(--rd-code-surface)"
   >
     <img
       {...attrs}

package/template/src/components/user/Step.astro

@@ -14,24 +14,24 @@ validateProps(
   {
     title: { required: true, type: "string" },
   },
-  Astro.url.pathname
+  Astro.url.pathname,
 );
 ---
 
 <div
   class:list={[
     "relative pl-10 step-item pb-4 last:pb-0 space-y-4",
-    "before:absolute before:left-[10.5px] before:top-8 before:bottom-0 before:w-px before:bg-linear-[transparent,var(--color-neutral-200)_10%,var(--color-neutral-200)_90%,transparent]",
+    "before:absolute before:left-[10.5px] before:top-8 before:bottom-0 before:w-px before:bg-linear-[transparent,var(--color-neutral-200)_10%,var(--color-neutral-200)_90%,transparent] dark:before:bg-linear-[transparent,var(--color-neutral-700)_10%,var(--color-neutral-700)_90%,transparent]",
   ]}
   data-step-panel
 >
   <div
     class:list={[
       "flex items-center gap-1.5 not-prose",
-      "step-number before:bg-neutral-900 before:size-[22px] before:rounded-full before:text-white before:flex before:items-center before:justify-center before:text-xs before:font-bold before:absolute before:left-px before:top-[3px] before:shadow-[inset_0_1px_0_rgb(255,255,255,0.2),0_0_0_1px_var(--color-neutral-800),var(--shadow-md)]",
+      "step-number before:size-6 before:bg-linear-to-b before:from-neutral-900/80 before:to-neutral-900 dark:before:from-neutral-100 dark:before:to-neutral-200 before:rounded-full before:text-white before:flex before:items-center before:justify-center before:text-xs before:font-bold dark:before:font-extrabold before:absolute before:left-px before:top-[3px] before:shadow-sm dark:before:bg-neutral-200 dark:before:text-neutral-900",
     ]}
   >
-    <h3 class="text-lg font-semibold text-neutral-900">
+    <h3 class="text-lg font-semibold text-neutral-900 dark:text-neutral-100">
       {title}
     </h3>
   </div>

package/template/src/components/user/Tab.astro

@@ -19,7 +19,7 @@ validateProps(
 ---
 
 <section data-label={label} data-icon={icon || ""}>
-  <div class="*:m-0! *:mb-2">
+  <div class="*:first:mt-0! *:last:mb-0!">
     <slot />
   </div>
 </section>

package/template/src/components/user/Tabs.astro

@@ -3,16 +3,18 @@ import Icon from '../ui/Icon.astro';
 
 const html = await Astro.slots.render("default");
 
-const labelRegex = /label="([^"]+)"/g;
-const iconRegex = /icon="([^"]*)"/g;
+const tabRegex = /<section\b([^>]*)\bdata-label="([^"]*)"([^>]*)>(.*?)<\/section>/gs;
+const dataIconRegex = /\bdata-icon="([^"]*)"/;
 let labels = [];
 let icons = [];
+let tabContents = [];
 let match;
-while ((match = labelRegex.exec(html)) !== null) {
-  labels.push(match[1]);
-}
-while ((match = iconRegex.exec(html)) !== null) {
-  icons.push(match[1]);
+while ((match = tabRegex.exec(html)) !== null) {
+  const openingAttributes = `${match[1]} ${match[3]}`;
+  const iconMatch = openingAttributes.match(dataIconRegex);
+  labels.push(match[2]);
+  icons.push(iconMatch?.[1] ?? "");
+  tabContents.push(match[4]);
 }
 
 if (labels.length === 0) {
@@ -21,13 +23,6 @@ if (labels.length === 0) {
     `[USER_ERROR]: <Tabs>: Must contain at least two <Tab> children (in ${pagePath}.mdx)`
   );
 }
-
-const tabRegex = /<section[^>]*data-label="[^"]*"[^>]*>(.*?)<\/section>/gs;
-let tabContents = [];
-let contentMatch;
-while ((contentMatch = tabRegex.exec(html)) !== null) {
-  tabContents.push(contentMatch[1]);
-}
 ---
 
 <div x-data="{
@@ -66,10 +61,10 @@ while ((contentMatch = tabRegex.exec(html)) !== null) {
 }"
 class="my-5">
   <ul
-    class="relative isolate not-prose flex border border-neutral-200 w-fit bg-neutral-100/80 rounded-lg p-[3px] inset-shadow-sm"
+    class="relative isolate not-prose flex w-fit rounded-lg border border-neutral-200 bg-neutral-100/80 p-[3px] inset-shadow-sm dark:border-none dark:bg-neutral-800/50"
   >
     <div
-      class="absolute top-[3px] bottom-[3px] bg-white rounded-md shadow-sm transition-all duration-300 ease-out -z-10 flex items-center justify-center"
+      class="absolute top-[3px] bottom-[3px] -z-10 flex items-center justify-center rounded-md bg-white shadow-sm transition-all duration-300 ease-out dark:bg-neutral-700/30 dark:border dark:border-neutral-700/40 dark:shadow-black/30."
       style="left: 3px;"
       :style="markerStyle.width ? `left: ${markerStyle.left}; width: ${markerStyle.width}` : ''"
     >
@@ -86,10 +81,10 @@ class="my-5">
         @click={`activeTab = ${index}`}
         class="relative px-3 h-[32px] font-medium text-sm transition-colors duration-200 cursor-pointer text-nowrap flex items-center gap-2"
         style={index === 0 ? "" : ""}
-        class:list={[index === 0 ? "text-neutral-900" : "text-neutral-500"]}
+        class:list={[index === 0 ? "text-foreground" : "text-muted-foreground"]}
         :class={`{
-        'text-neutral-900': activeTab === ${index},
-        'text-neutral-500 hover:text-neutral-600': activeTab !== ${index}
+        'text-foreground': activeTab === ${index},
+        'text-muted-foreground hover:text-foreground': activeTab !== ${index}
       }`}
       >
         {icons[index] && <Icon name={icons[index]} class="size-4 shrink-0" />}
@@ -119,4 +114,4 @@ class="my-5">
     )) }
     </div>
   </div>
-</div>
+</div>

package/template/src/layouts/Layout.astro

@@ -180,7 +180,7 @@ if (isDev && hasAskAiDevConfig) {
       class="fixed top-1 inset-x-1 h-16 -z-10 bg-background-dark"
       data-vaul-scale-chrome
     >
-      <div class="bg-white w-full h-full rounded-t-2xl"></div>
+      <div class="bg-background w-full h-full rounded-t-2xl"></div>
     </div>
     <div
       class="fixed top-[63px] z-30 w-[5px] right-0 bottom-0 bg-background-dark border-l border-l-border"