radiant-docs 0.1.34 → 0.1.38

package/template/src/components/endpoint/RequestSnippets.astro

@@ -131,25 +131,58 @@ const CURL_ICON_SVG = `<svg stroke="currentColor" fill="currentColor" stroke-wid
 
 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(";");
@@ -194,7 +227,7 @@ async function renderCodeLinesHtml(
                 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
@@ -350,10 +383,10 @@ const hasMultipleRequests = requestSnippetItems.length > 1;
 >
   <div class="group/prose-code not-prose relative h-full min-h-0 w-full max-w-full min-w-0">
     <div
-      class="flex h-full min-h-0 w-full max-w-full min-w-0 flex-col overflow-hidden rounded-xl border border-neutral-200 bg-white shadow-xs"
+      class="flex h-full min-h-0 w-full max-w-full min-w-0 flex-col overflow-hidden rounded-xl border border-neutral-200 bg-white shadow-xs dark:border-neutral-800 dark:bg-(--rd-code-surface)"
     >
       <div
-        class="flex items-center justify-between gap-2 border-b border-neutral-200 bg-neutral-50 rounded-t-xl inset-shadow-sm inset-shadow-neutral-100/80"
+        class="flex items-center justify-between gap-2 border-b border-neutral-200 bg-neutral-50 rounded-t-xl inset-shadow-sm inset-shadow-neutral-100/80 dark:border-neutral-800 dark:bg-neutral-900/60 dark:inset-shadow-neutral-900/80"
       >
         {
           hasMultipleRequests ? (
@@ -364,7 +397,7 @@ const hasMultipleRequests = requestSnippetItems.length > 1;
               >
                 <div
                   aria-hidden="true"
-                  class="pointer-events-none absolute top-1/2 z-0 h-[28px] -translate-y-1/2 rounded-lg border-[0.5px] border-neutral-200 bg-white shadow-xs 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-lg border-[0.5px] border-neutral-200 bg-white shadow-xs transition-[left,width,opacity] duration-200 ease-out dark:border-neutral-700/70 dark:bg-(--rd-code-surface)"
                   x-bind:class="pillVisible ? 'opacity-100' : 'opacity-0'"
                   x-bind:style="'left:' + pillLeft + 'px;width:' + pillWidth + 'px;'"
                 />
@@ -378,7 +411,7 @@ const hasMultipleRequests = requestSnippetItems.length > 1;
                     x-bind:data-rd-snippet-tab="index"
                     x-on:click="select(index)"
                     class="relative z-10 inline-flex h-9 items-center gap-2 border-0 bg-transparent px-3 py-1.5 text-xs font-medium transition-colors duration-150 focus:outline-none focus-visible:outline-none cursor-pointer"
-                    x-bind:class="selected === index ? 'text-neutral-900' : 'text-neutral-600'"
+                    x-bind:class="selected === index ? 'text-foreground' : 'text-muted-foreground'"
                   >
                     <span
                       x-show="snippet.iconSvg"
@@ -392,13 +425,13 @@ const hasMultipleRequests = requestSnippetItems.length > 1;
             </div>
           ) : (
             <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>
+              <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)"></div>
                 <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 pr-3 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 pr-3 py-1.5 text-xs font-medium text-neutral-700 dark:text-neutral-300">
                   <span
                     class="size-3.5 shrink-0 self-center rounded-[4px]"
                     set:html={firstSnippet.iconSvg}
@@ -410,15 +443,15 @@ const hasMultipleRequests = requestSnippetItems.length > 1;
           )
         }
 
-        <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
             x-on:click="copySelected()"
             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"
             aria-label="Copy code"
           >
             <Icon
@@ -429,7 +462,7 @@ const hasMultipleRequests = requestSnippetItems.length > 1;
             />
             <Icon
               name="lucide:check"
-              class="absolute size-3.5 stroke-3 origin-center 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 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"
               x-bind:class="copied ? 'scale-110 opacity-100 rotate-0' : 'scale-25 opacity-0 rotate-6'"
               aria-hidden="true"
             />
@@ -438,16 +471,16 @@ const hasMultipleRequests = requestSnippetItems.length > 1;
       </div>
 
       <div class="relative min-h-0 min-w-0 flex-1 overflow-hidden rounded-b-xl">
-        <div class="relative h-full overflow-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">
-          <div class="pointer-events-none sticky top-0 z-10 -mb-4 h-4 w-full bg-linear-to-b from-white to-transparent"></div>
+        <div class="relative h-full overflow-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">
+          <div class="pointer-events-none sticky top-0 z-10 -mb-4 h-4 w-full bg-linear-to-b from-white to-transparent dark:from-(--rd-code-surface)"></div>
           {
             requestSnippetItems.map((snippet, index) => (
               <pre
-                class="relative m-0 min-w-full bg-white p-0 text-[13px] leading-6"
+                class="relative m-0 min-w-full bg-white p-0 text-[13px] leading-6 dark:bg-(--rd-code-surface)"
                 x-show={`selected === ${index}`}
                 {...(index !== 0 ? { "x-cloak": true } : {})}
                 data-snippet-index={index}
-              ><code class="block min-w-full py-2.5 font-mono text-neutral-800"><Fragment set:html={snippet.renderedCodeLinesHtml} /></code></pre>
+              ><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={snippet.renderedCodeLinesHtml} /></code></pre>
             ))
           }
         </div>

package/template/src/components/endpoint/ResponseDisplay.astro

@@ -72,10 +72,10 @@ import { Icon } from "astro-icon/components";
     class="group/prose-code not-prose relative h-full min-h-0 w-full max-w-full min-w-0"
   >
     <div
-      class="flex h-full min-h-0 w-full max-w-full min-w-0 flex-col overflow-hidden rounded-xl border border-neutral-200 bg-white shadow-xs"
+      class="flex h-full min-h-0 w-full max-w-full min-w-0 flex-col overflow-hidden rounded-xl border border-neutral-200 bg-white shadow-xs dark:border-neutral-800 dark:bg-(--rd-code-surface)"
     >
       <div
-        class="flex items-center justify-between gap-2 border-b border-neutral-200 rounded-t-xl bg-neutral-50 inset-shadow-sm inset-shadow-neutral-100/80"
+        class="flex items-center justify-between gap-2 border-b border-neutral-200 rounded-t-xl 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 overflow-hidden rounded-t-xl">
           <div
@@ -84,7 +84,7 @@ import { Icon } from "astro-icon/components";
           >
             <div
               aria-hidden="true"
-              class="pointer-events-none absolute top-1/2 z-0 h-[28px] -translate-y-1/2 rounded-lg border-[0.5px] border-neutral-200 bg-white shadow-xs 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-lg border-[0.5px] border-neutral-200 bg-white shadow-xs transition-[left,width,opacity] duration-200 ease-out dark:border-neutral-700/70 dark:bg-(--rd-code-surface)"
               x-bind:class="pillVisible ? 'opacity-100' : 'opacity-0'"
               x-bind:style="'left:' + pillLeft + 'px;width:' + pillWidth + 'px;'"
             >
@@ -96,7 +96,7 @@ import { Icon } from "astro-icon/components";
                 x-bind:data-rd-response-tab="tab.id"
                 x-on:click="select(tab.id)"
                 class="relative z-10 inline-flex h-9 items-center gap-2 border-0 bg-transparent px-3 py-1.5 text-xs font-medium transition-colors duration-150 focus:outline-none focus-visible:outline-none cursor-pointer"
-                x-bind:class="selected === tab.id ? 'text-neutral-900' : 'text-neutral-600'"
+                x-bind:class="selected === tab.id ? 'text-foreground' : 'text-muted-foreground'"
               >
                 <span class="whitespace-pre leading-none" x-text="tab.label"
                 ></span>
@@ -106,9 +106,9 @@ import { Icon } from "astro-icon/components";
         </div>
 
         <div
-          class="relative h-9 w-fit max-w-full shrink-0 rounded-tr-xl bg-white"
+          class="relative h-9 w-fit max-w-full shrink-0 rounded-tr-xl bg-white dark:bg-(--rd-code-surface)"
         >
-          <div class="absolute inset-x-0 -bottom-px h-px bg-white"></div>
+          <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"
           />
@@ -118,16 +118,16 @@ import { Icon } from "astro-icon/components";
             <span
               class="size-[7px] shrink-0 rounded-full"
               x-bind:class="{
-                'bg-green-700/70': Math.floor((response?.status || 0) / 100) === 2,
-                'bg-blue-700/70': Math.floor((response?.status || 0) / 100) === 3,
-                'bg-yellow-500/80': Math.floor((response?.status || 0) / 100) === 4,
-                'bg-red-700/70': Math.floor((response?.status || 0) / 100) === 5,
-                'bg-neutral-300': !response?.status || Math.floor((response?.status || 0) / 100) < 2
+                'bg-green-700/70 dark:bg-green-400/80': Math.floor((response?.status || 0) / 100) === 2,
+                'bg-blue-700/70 dark:bg-blue-400/80': Math.floor((response?.status || 0) / 100) === 3,
+                'bg-yellow-500/80 dark:bg-yellow-400/90': Math.floor((response?.status || 0) / 100) === 4,
+                'bg-red-700/70 dark:bg-red-400/80': Math.floor((response?.status || 0) / 100) === 5,
+                'bg-neutral-300 dark:bg-neutral-600': !response?.status || Math.floor((response?.status || 0) / 100) < 2
               }"
             ></span>
             <span
               class="leading-none"
-              x-bind:class="response?.status ? 'text-neutral-700' : 'text-neutral-300'"
+              x-bind:class="response?.status ? 'text-foreground' : 'text-muted-foreground'"
               x-text="response?.status ?? '---'"></span>
           </div>
         </div>
@@ -135,53 +135,53 @@ import { Icon } from "astro-icon/components";
 
       <div class="relative min-h-0 min-w-0 flex-1 overflow-hidden rounded-b-xl">
         <div
-          class="relative h-full overflow-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 h-full overflow-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"
         >
           <div
-            class="pointer-events-none sticky top-0 z-10 -mb-4 h-4 w-full bg-linear-to-b from-white to-transparent"
+            class="pointer-events-none sticky top-0 z-10 -mb-4 h-4 w-full bg-linear-to-b from-white to-transparent dark:from-(--rd-code-surface)"
           >
           </div>
           <div x-show="selected === 'body'" class="h-full">
             <div
               x-show="!response || !response.highlightedData"
-              class="text-sm px-4 py-4 xs:py-8 flex flex-col items-center justify-center h-full"
+              class="text-sm px-4 py-4 xs:py-8 flex flex-col items-center justify-center h-full text-foreground"
             >
-              <div class="bg-neutral-50 p-2 rounded-xl mb-1">
+              <div class="bg-neutral-50 p-2 rounded-xl mb-1 dark:bg-(--rd-code-surface)">
                 <Icon
-                  class="size-6 text-neutral-300"
+                  class="size-6 text-neutral-300 dark:text-neutral-600"
                   name="lucide:square-arrow-up-right"
                 />
               </div>
               <div class="text-lg font-medium text-center">Send request</div>
-              <p class="text-sm text-neutral-500 text-center">
+              <p class="text-sm text-neutral-500 text-center dark:text-neutral-400">
                 Send a request to see the response body.
               </p>
             </div>
             <div x-show="response && response.highlightedData">
               <pre
-                class="relative m-0 min-w-full bg-white p-0 text-[13px] leading-6"><code class="block min-w-full px-4 py-2.5 font-mono text-neutral-800" x-html="response?.highlightedData" /></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 px-4 py-2.5 font-mono text-neutral-800 dark:text-neutral-200" x-html="response?.highlightedData" /></pre>
             </div>
           </div>
 
           <div x-show="selected === 'header'" x-cloak class="h-full">
             <div
               x-show="!response || !response.highlightedHeaders"
-              class="text-sm px-4 py-4 xs:py-8 flex flex-col items-center justify-center h-full"
+              class="text-sm px-4 py-4 xs:py-8 flex flex-col items-center justify-center h-full text-foreground"
             >
-              <div class="bg-neutral-50 p-2 rounded-xl mb-1">
+              <div class="bg-neutral-50 p-2 rounded-xl mb-1 dark:bg-(--rd-code-surface)">
                 <Icon
-                  class="size-6 text-neutral-300"
+                  class="size-6 text-neutral-300 dark:text-neutral-600"
                   name="lucide:square-arrow-up-right"
                 />
               </div>
               <div class="text-lg font-medium text-center">Send request</div>
-              <p class="text-sm text-neutral-500 text-center">
+              <p class="text-sm text-neutral-500 text-center dark:text-neutral-400">
                 Send a request to see the response header.
               </p>
             </div>
             <div x-show="response && response.highlightedHeaders">
               <pre
-                class="relative m-0 min-w-full bg-white p-0 text-[13px] leading-6"><code class="block min-w-full px-4 py-2.5 font-mono text-neutral-800" x-html="response?.highlightedHeaders" /></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 px-4 py-2.5 font-mono text-neutral-800 dark:text-neutral-200" x-html="response?.highlightedHeaders" /></pre>
             </div>
           </div>
         </div>

package/template/src/components/endpoint/ResponseFieldTree.astro

@@ -46,7 +46,7 @@ function countImmediateChildren(field: ResponseField): number {
 }
 ---
 
-<div class="flex flex-col gap-4 divide-y divide-neutral-100 *:pb-3 *:last:pb-0">
+<div class="flex flex-col gap-4 divide-y divide-neutral-100 dark:divide-neutral-800 *:pb-3 *:last:pb-0">
   {
     fields.map((field) => {
       const revealedFieldCount = countImmediateChildren(field);
@@ -70,17 +70,17 @@ function countImmediateChildren(field: ResponseField): number {
           />
           {hasExpandableContent && (
             <div
-              class="mt-2 w-full overflow-hidden rounded-lg border border-neutral-200 bg-white transition-colors duration-200"
-              x-bind:class="expanded ? 'border-neutral-300' : 'border-neutral-200'"
+              class="mt-2 w-full overflow-hidden rounded-lg border border-neutral-200 bg-white transition-colors duration-200 dark:border-neutral-800 dark:bg-(--rd-code-surface)"
+              x-bind:class="expanded ? 'border-neutral-300 dark:border-neutral-700' : 'border-neutral-200 dark:border-neutral-800'"
             >
               <button
                 type="button"
                 x-on:click="expanded = !expanded"
                 x-bind:aria-expanded="expanded"
-                class="group flex w-full items-center justify-between gap-3 px-3 py-2 text-left text-xs font-medium text-neutral-700 hover:bg-neutral-50 cursor-pointer transition-colors duration-200"
+                class="group flex w-full items-center justify-between gap-3 px-3 py-2 text-left text-xs font-medium text-neutral-700 hover:bg-neutral-50 cursor-pointer transition-colors duration-200 dark:text-neutral-300 dark:hover:bg-neutral-800/60"
               >
                 <span class="inline-flex items-center gap-2">
-                  <ListChevronsToggle class="size-4 shrink-0 text-neutral-400 group-hover:text-neutral-600 transition duration-200" />
+                  <ListChevronsToggle class="size-4 shrink-0 text-neutral-400 group-hover:text-neutral-600 transition duration-200 dark:text-neutral-500 dark:group-hover:text-neutral-300" />
                   <span>
                     {revealedFieldCount}{" "}
                     {revealedFieldCount === 1
@@ -90,21 +90,21 @@ function countImmediateChildren(field: ResponseField): number {
                 </span>
               </button>
               <div x-show="expanded" x-collapse x-cloak>
-                <div class="border-t border-neutral-100 px-3 py-3">
+                <div class="border-t border-neutral-100 px-3 py-3 dark:border-neutral-800">
                   {field.nested && field.nested.length > 0 && nestedFieldCount > 0 && (
                     <Astro.self fields={field.nested} depth={depth + 1} />
                   )}
                   {field.variants && field.variants.length > 0 && (
                     <div class:list={["space-y-2", nestedFieldCount > 0 && "mt-3"]}>
-                      <p class="text-xs text-neutral-500">
+                      <p class="text-xs text-neutral-500 dark:text-neutral-400">
                         {field.variantType === "anyOf"
                           ? "One or more variants may apply."
                           : "One of these variants applies."}
                       </p>
                       {field.variants.map((variant, index) => (
                         <>
-                          <div class="rounded-lg border border-neutral-200 bg-white p-3">
-                            <div class="mb-2 text-xs font-medium text-neutral-600">
+                          <div class="rounded-lg border border-neutral-200 bg-white p-3 dark:border-neutral-800 dark:bg-neutral-900/60">
+                            <div class="mb-2 text-xs font-medium text-neutral-600 dark:text-neutral-400">
                               {variant.label}
                             </div>
                             <Astro.self fields={variant.fields} depth={depth + 1} />
@@ -112,11 +112,11 @@ function countImmediateChildren(field: ResponseField): number {
                           {field.variantType === "oneOf" &&
                             index < field.variants.length - 1 && (
                               <div class="flex items-center gap-2 py-0">
-                                <div class="h-px flex-1 bg-neutral-200" />
-                                <span class="px-1 text-[10px] uppercase tracking-wide text-neutral-500">
+                                <div class="h-px flex-1 bg-neutral-200 dark:bg-neutral-800" />
+                                <span class="px-1 text-[10px] uppercase tracking-wide text-neutral-500 dark:text-neutral-400">
                                   OR
                                 </span>
-                                <div class="h-px flex-1 bg-neutral-200" />
+                                <div class="h-px flex-1 bg-neutral-200 dark:bg-neutral-800" />
                               </div>
                             )}
                         </>

package/template/src/components/endpoint/ResponseFields.astro

@@ -761,7 +761,7 @@ Object.entries(responses)
             </h5>
           </div>
           {response.description && (
-            <span class="mt-1 text-sm text-neutral-500">
+            <span class="mt-1 text-sm text-neutral-500 dark:text-neutral-400">
               {response.description}
             </span>
           )}
@@ -769,21 +769,21 @@ Object.entries(responses)
         {response.fields.length > 0 && (
           <>
             {response.variants && response.variants.length > 0 && (
-              <p class="mb-2 text-xs text-neutral-500">Common fields</p>
+              <p class="mb-2 text-xs text-neutral-500 dark:text-neutral-400">Common fields</p>
             )}
             <div x-data="{ expanded: false }">
               <div
-                class="w-full overflow-hidden rounded-xl border border-neutral-200 bg-white transition-colors duration-200"
-                x-bind:class="expanded ? 'border-neutral-300' : 'border-neutral-200'"
+                class="w-full overflow-hidden rounded-xl border border-neutral-200 bg-white transition-colors duration-200 dark:border-neutral-800 dark:bg-(--rd-code-surface)"
+                x-bind:class="expanded ? 'border-neutral-300 dark:border-neutral-700' : 'border-neutral-200 dark:border-neutral-800'"
               >
                 <button
                   type="button"
                   x-on:click="expanded = !expanded"
                   x-bind:aria-expanded="expanded"
-                  class="group flex w-full items-center justify-between gap-3 px-3 py-2 text-left text-sm font-medium text-neutral-700 hover:bg-neutral-50 cursor-pointer transition-colors duration-200"
+                  class="group flex w-full items-center justify-between gap-3 px-3 py-2 text-left text-sm font-medium text-neutral-700 hover:bg-neutral-50 cursor-pointer transition-colors duration-200 dark:text-neutral-300 dark:hover:bg-neutral-800/60"
                 >
                   <span class="inline-flex items-center gap-2">
-                    <ListChevronsToggle class="size-4 shrink-0 text-neutral-500 group-hover:text-neutral-600 transition duration-200" />
+                    <ListChevronsToggle class="size-4 shrink-0 text-neutral-500 group-hover:text-neutral-600 transition duration-200 dark:text-neutral-500 dark:group-hover:text-neutral-300" />
                     <span>
                       {response.fields.length}{" "}
                       {response.fields.length === 1
@@ -793,7 +793,7 @@ Object.entries(responses)
                   </span>
                 </button>
                 <div x-show="expanded" x-collapse x-cloak>
-                  <div class="border-t border-neutral-100 p-3">
+                  <div class="border-t border-neutral-100 p-3 dark:border-neutral-800">
                     <ResponseFieldTree fields={response.fields} />
                   </div>
                 </div>
@@ -803,30 +803,30 @@ Object.entries(responses)
         )}
         {response.variants && response.variants.length > 0 && (
           <div class="mt-3 space-y-2">
-            <p class="text-xs text-neutral-500">
+            <p class="text-xs text-neutral-500 dark:text-neutral-400">
               {response.variantType === "anyOf"
                 ? "One or more response variants may apply."
                 : "Returns one of these response variants."}
             </p>
             {response.variants.map((variant, index) => (
               <>
-                <div class="rounded-xl border border-neutral-200 bg-white p-3">
-                  <div class="mb-2 text-xs font-medium text-neutral-600">
+                <div class="rounded-xl border border-neutral-200 bg-white p-3 dark:border-neutral-800 dark:bg-neutral-900/60">
+                  <div class="mb-2 text-xs font-medium text-neutral-600 dark:text-neutral-400">
                     {variant.label}
                   </div>
                   <div x-data="{ expanded: false }">
                     <div
-                      class="w-full overflow-hidden rounded-lg border border-neutral-200 bg-white transition-colors duration-200"
-                      x-bind:class="expanded ? 'border-neutral-300' : 'border-neutral-200'"
+                      class="w-full overflow-hidden rounded-lg border border-neutral-200 bg-white transition-colors duration-200 dark:border-neutral-800 dark:bg-(--rd-code-surface)"
+                      x-bind:class="expanded ? 'border-neutral-300 dark:border-neutral-700' : 'border-neutral-200 dark:border-neutral-800'"
                     >
                       <button
                         type="button"
                         x-on:click="expanded = !expanded"
                         x-bind:aria-expanded="expanded"
-                        class="group flex w-full items-center justify-between gap-3 px-3 py-2 text-left text-xs font-medium text-neutral-700 hover:bg-neutral-50 cursor-pointer transition-colors duration-200"
+                        class="group flex w-full items-center justify-between gap-3 px-3 py-2 text-left text-xs font-medium text-neutral-700 hover:bg-neutral-50 cursor-pointer transition-colors duration-200 dark:text-neutral-300 dark:hover:bg-neutral-800/60"
                       >
                         <span class="inline-flex items-center gap-2">
-                          <ListChevronsToggle class="size-4 shrink-0 text-neutral-400 group-hover:text-neutral-600 transition duration-200" />
+                          <ListChevronsToggle class="size-4 shrink-0 text-neutral-400 group-hover:text-neutral-600 transition duration-200 dark:text-neutral-500 dark:group-hover:text-neutral-300" />
                           <span>
                             {variant.fields.length}{" "}
                             {variant.fields.length === 1
@@ -836,7 +836,7 @@ Object.entries(responses)
                         </span>
                       </button>
                       <div x-show="expanded" x-collapse x-cloak>
-                        <div class="border-t border-neutral-100 px-3 py-3">
+                        <div class="border-t border-neutral-100 px-3 py-3 dark:border-neutral-800">
                           <ResponseFieldTree fields={variant.fields} />
                         </div>
                       </div>
@@ -846,11 +846,11 @@ Object.entries(responses)
                 {response.variantType === "oneOf" &&
                   index < response.variants.length - 1 && (
                     <div class="flex items-center gap-2 py-0">
-                      <div class="h-px flex-1 bg-neutral-200" />
-                      <span class="px-1 text-[10px] uppercase tracking-wide text-neutral-500">
+                      <div class="h-px flex-1 bg-neutral-200 dark:bg-neutral-800" />
+                      <span class="px-1 text-[10px] uppercase tracking-wide text-neutral-500 dark:text-neutral-400">
                         OR
                       </span>
-                      <div class="h-px flex-1 bg-neutral-200" />
+                      <div class="h-px flex-1 bg-neutral-200 dark:bg-neutral-800" />
                     </div>
                   )}
               </>
@@ -859,7 +859,7 @@ Object.entries(responses)
         )}
         {response.fields.length === 0 &&
         (!response.variants || response.variants.length === 0) ? (
-          <p class="text-sm text-neutral-500 ml-2">No response body fields</p>
+          <p class="text-sm text-neutral-500 ml-2 dark:text-neutral-400">No response body fields</p>
         ) : null}
       </div>
     ))