radiant-docs 0.1.37 → 0.1.39

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

@@ -540,7 +540,7 @@ const sectionVariantFieldNames = Object.fromEntries(
       <button
         @click="sendRequest($event)"
         :disabled="loading"
-        class="m-px font-[350] relative flex h-8 items-center gap-2 rounded-lg [corner-shape:superellipse(1.2)] bg-linear-to-b from-neutral-900/85 to-neutral-900 px-3 text-[13px] text-white shadow-sm dark:bg-white dark:text-neutral-900 transition-all duration-200 whitespace-nowrap cursor-pointer disabled:opacity-70 disabled:cursor-not-allowed"
+        class="font-[350] dark:font-[450] relative flex h-8 items-center gap-2 rounded-lg [corner-shape:superellipse(1.2)] bg-linear-to-b from-neutral-900/85 to-neutral-900 dark:from-neutral-100 dark:to-neutral-200 px-3 text-[13px] text-white dark:text-neutral-950 shadow-sm transition-all duration-200 whitespace-nowrap cursor-pointer disabled:opacity-70 disabled:cursor-not-allowed"
       >
       <span class="flex items-center gap-2">
           <Icon
@@ -565,8 +565,8 @@ const sectionVariantFieldNames = Object.fromEntries(
       <ResponseDisplay />
     </div>
     <div class="lg:flex-1 relative">
-    <div class="flex-3 min-h-0 max-h-[calc(60dvh-2rem-23px-12px)] lg:max-h-[calc(100dvh-4rem-46px-24px)] overflow-y-auto overscroll-contain [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 bg-linear-to-b from-background via-white/60 to-transparent"></div>
+    <div class="flex-3 min-h-0 max-h-[calc(60dvh-2rem-23px-12px)] lg:max-h-[calc(100dvh-4rem-46px-24px)] overflow-y-auto overscroll-contain [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 bg-linear-to-b from-background via-white/60 to-transparent dark:via-neutral-900/70"></div>
       <div class="space-y-4 lg:pr-4 pt-4 pb-6">
       {
         Object.keys(requestFields).map(
@@ -582,16 +582,16 @@ const sectionVariantFieldNames = Object.fromEntries(
             }
 
             return (
-              <div class="border border-neutral-200 shadow-xs rounded-xl p-4 pb-0 [&_[role='region']]:border-b-0">
+              <div class="border border-neutral-200 bg-white shadow-xs rounded-xl p-4 pb-0 dark:border-neutral-800 dark:bg-(--rd-code-surface) [&_[role='region']]:border-b-0">
                 <Accordion title={headers[key]} defaultOpen titleSize="xl">
                   {key === "body" && formattedBodyDescription && (
                     <div
-                      class="mb-4 prose-rules prose-sm! text-neutral-500 **:text-neutral-500"
+                      class="mb-4 prose-rules prose-sm! text-neutral-500 **:text-neutral-500 dark:text-neutral-400 dark:**:text-neutral-400"
                       set:html={formattedBodyDescription}
                     />
                   )}
                   {sectionFields.map((field) => (
-                    <div class="border-b border-b-neutral-100 last:border-none pb-4 mb-4 last:pb-0 last:mb-0 first:pt-2">
+                    <div class="border-b border-b-neutral-100 dark:border-b-neutral-800 last:border-none pb-4 mb-4 last:pb-0 last:mb-0 first:pt-2">
                       <PlaygroundField field={field} requestPart={key} />
                     </div>
                   ))}
@@ -599,19 +599,19 @@ const sectionVariantFieldNames = Object.fromEntries(
                     <div class:list={["space-y-2", sectionFields.length > 0 && "pt-1"]}>
                       {sectionVariantData?.variantType === "oneOf" ? (
                         <>
-                          <p class="text-xs text-neutral-500">
+                          <p class="text-xs text-neutral-500 dark:text-neutral-400">
                             Select one variant.
                           </p>
-                          <div class="inline-flex max-w-full flex-wrap items-center gap-1 rounded-lg bg-neutral-100 p-1">
+                          <div class="inline-flex max-w-full flex-wrap items-center gap-1 rounded-lg bg-neutral-100 p-1 dark:bg-neutral-900/60">
                             {sectionVariants.map((variant, variantIndex) => (
                               <button
                                 type="button"
                                 @click={`selectSectionVariant(${keyLiteral}, ${variantIndex})`}
                                 :class={`{
-                                  'bg-white text-neutral-900 shadow-xs ring-1 ring-neutral-200': getSelectedSectionVariant(${keyLiteral}) === ${variantIndex},
-                                  'text-neutral-600 hover:bg-neutral-50 hover:text-neutral-800': getSelectedSectionVariant(${keyLiteral}) !== ${variantIndex}
+                                  'bg-white text-neutral-900 shadow-xs ring-1 ring-neutral-200 dark:bg-(--rd-code-surface) dark:text-neutral-100 dark:ring-neutral-700/70': getSelectedSectionVariant(${keyLiteral}) === ${variantIndex},
+                                  'text-neutral-600 hover:bg-neutral-50 hover:text-neutral-800 dark:text-neutral-400 dark:hover:bg-neutral-800/70 dark:hover:text-neutral-200': getSelectedSectionVariant(${keyLiteral}) !== ${variantIndex}
                                 }`}
-                                class="inline-flex h-7 items-center justify-center whitespace-nowrap rounded-md px-2.5 text-[11px] font-medium transition-all duration-200 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-300"
+                                class="inline-flex h-7 items-center justify-center whitespace-nowrap rounded-md px-2.5 text-[11px] font-medium transition-all duration-200 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-300 dark:focus-visible:ring-neutral-700"
                               >
                                 {variant.label}
                               </button>
@@ -622,13 +622,13 @@ const sectionVariantFieldNames = Object.fromEntries(
                               x-show={`getSelectedSectionVariant(${keyLiteral}) === ${variantIndex}`}
                               x-cloak
                             >
-                              <div class="rounded-md border border-neutral-200 bg-white p-2.5">
-                                <div class="mb-2 text-xs font-medium text-neutral-600">
+                              <div class="rounded-md border border-neutral-200 bg-white p-2.5 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 class="space-y-3">
                                   {variant.fields.map((field) => (
-                                    <div class="border-b border-b-neutral-100 last:border-none pb-3 last:pb-0">
+                                    <div class="border-b border-b-neutral-100 dark:border-b-neutral-800 last:border-none pb-3 last:pb-0">
                                       <PlaygroundField
                                         field={field}
                                         requestPart={key}
@@ -643,17 +643,17 @@ const sectionVariantFieldNames = Object.fromEntries(
                         </>
                       ) : (
                         <>
-                          <p class="text-xs text-neutral-500">
+                          <p class="text-xs text-neutral-500 dark:text-neutral-400">
                             One or more variants may apply.
                           </p>
                           {sectionVariants.map((variant) => (
-                            <div class="rounded-md border border-neutral-200 bg-white p-2.5">
-                              <div class="mb-2 text-xs font-medium text-neutral-600">
+                            <div class="rounded-md border border-neutral-200 bg-white p-2.5 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 class="space-y-3">
                                 {variant.fields.map((field) => (
-                                  <div class="border-b border-b-neutral-100 last:border-none pb-3 last:pb-0">
+                                  <div class="border-b border-b-neutral-100 dark:border-b-neutral-800 last:border-none pb-3 last:pb-0">
                                     <PlaygroundField field={field} requestPart={key} />
                                   </div>
                                 ))}
@@ -689,17 +689,33 @@ const sectionVariantFieldNames = Object.fromEntries(
   @reference "../../styles/global.css";
 
   :global(pre code span.token.punctuation) {
-    @apply text-[#24292E];
+    color: #24292e;
   }
 
   :global(pre code span.token.operator) {
-    @apply text-[#24292E];
+    color: #24292e;
   }
 
   :global(pre code span.token.property) {
-    @apply text-[#C62C2C];
+    color: #c62c2c;
   }
   :global(pre code span.token.string) {
-    @apply text-[#1E7734];
+    color: #1e7734;
+  }
+
+  :global(.dark pre code span.token.punctuation) {
+    color: #c9d1d9;
+  }
+
+  :global(.dark pre code span.token.operator) {
+    color: #c9d1d9;
+  }
+
+  :global(.dark pre code span.token.property) {
+    color: #ff7b72;
+  }
+
+  :global(.dark pre code span.token.string) {
+    color: #a5d6ff;
   }
 </style>

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>
                             )}
                         </>