radiant-docs 0.1.34 → 0.1.38

package/template/src/components/chat/AskAiWidget.tsx

@@ -1496,8 +1496,12 @@ export default function AskAiWidget({
           </form>
         </>
       ) : (
-        <div className={mobile ? "flex-1 px-4 py-4" : "px-4 py-4"}>
-          <p className="text-sm text-neutral-600 dark:text-neutral-300">
+        <div className="flex-1 px-4 py-4 flex items-center justify-center">
+          <p className="text-sm text-neutral-600 dark:text-neutral-300 flex justify-center gap-1.5">
+            <Icon
+              icon="lucide:circle-alert"
+              className="size-5 shrink-0 self-start justify-self-start mt-0.5 block"
+            />
             {unavailableMessage}
           </p>
         </div>
@@ -1703,10 +1707,10 @@ export default function AskAiWidget({
         }
       `}</style>
       {!isOpen ? (
-        <div className="fixed bottom-5 right-6 size-12 z-40 bg-white hover:scale-105 transition duration-300 ease-in-out">
+        <div className="fixed bottom-5 right-5 size-12 z-40 bg-background rounded-full hover:scale-105 transition duration-300 ease-in-out">
           <button
             type="button"
-            className="w-full h-full inline-flex items-center justify-center gap-2 rounded-full bg-linear-to-b from-neutral-900/85 to-neutral-900 shadow-xl dark:bg-white cursor-pointer"
+            className="w-full h-full inline-flex items-center justify-center gap-2 rounded-full bg-linear-to-b from-neutral-900/85 to-neutral-900 dark:from-neutral-100 dark:to-neutral-200 shadow-xl dark:shadow-white/5 cursor-pointer"
             onClick={() => handleOpenChange(true)}
             data-pagefind-ignore
           >
@@ -1725,6 +1729,7 @@ export default function AskAiWidget({
           open={isOpen}
           onOpenChange={handleOpenChange}
           disablePreventScroll={true}
+          repositionInputs={false}
         >
           <Drawer.Portal>
             <Drawer.Overlay className="fixed inset-0 z-50 bg-black/40" />
@@ -1739,7 +1744,7 @@ export default function AskAiWidget({
         </Drawer.Root>
       ) : isOpen ? (
         <div
-          className="fixed bottom-4 right-5 z-50"
+          className="fixed bottom-4 right-4 z-50"
           data-pagefind-ignore
           onWheelCapture={handleDesktopWheelCapture}
         >

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

@@ -12,7 +12,7 @@ const { route, serverUrl } = Astro.props;
 ---
 
 <div
-  class="min-w-0 flex-1 flex items-center p-1 border bg-white rounded-xl shadow-xs overflow-hidden"
+  class="min-w-0 flex-1 flex items-center p-1 border border-neutral-200 bg-white rounded-xl shadow-xs overflow-hidden dark:border-neutral-800 dark:bg-(--rd-code-surface)"
 >
   <span
     class:list={[
@@ -23,7 +23,7 @@ const { route, serverUrl } = Astro.props;
     {route.openApiMethod}
   </span>
   <code
-    class="group flex-1 mx-2 h-[30px] flex items-center text-[13px] text-neutral-600 min-w-0 relative cursor-pointer"
+    class="group flex-1 mx-2 h-[30px] flex items-center text-[13px] text-neutral-600 dark:text-neutral-300 min-w-0 relative cursor-pointer"
     @click="copyPath()"
     x-data=`{
                 copied: false,
@@ -45,7 +45,7 @@ const { route, serverUrl } = Astro.props;
       {route.openApiPath}
     </span>
     <div
-      class="absolute right-0 top-1/2 -translate-y-1/2 flex items-center gap-1 text-[12px] px-1.5 py-px bg-white border border-neutral-200 rounded-md duration-200 opacity-0 scale-75 group-hover:scale-100 group-hover:opacity-100 group-hover:duration-200 group-hover:ease-out group-hover:delay-75"
+      class="absolute right-0 top-1/2 -translate-y-1/2 flex items-center gap-1 text-[12px] px-1.5 py-px bg-white border border-neutral-200 rounded-md duration-200 opacity-0 scale-75 group-hover:scale-100 group-hover:opacity-100 group-hover:duration-200 group-hover:ease-out group-hover:delay-75 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-300"
     >
       <Icon
         name="lucide:copy"

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

@@ -38,10 +38,10 @@ import { Icon } from "astro-icon/components";
 >
   <button
     x-on:click="open = true"
-    class="m-px flex items-center gap-1.5 px-4 py-[5px] text-sm font-medium rounded-lg bg-neutral-900 text-white/95 hover:text-white shadow-[inset_0_1px_0_rgb(255,255,255,0.3),0_0_0_1px_var(--color-neutral-800)] duration-200 transition-all whitespace-nowrap cursor-pointer relative before:absolute before:inset-0 before:shadow-sm before:rounded-lg before:bg-transparent"
+    class="font-[350] dark:font-[450] 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"
   >
+    <Icon class="-ml-px size-3.5" name="lucide:square-mouse-pointer" />
     Try it
-    <Icon class="ml-2" name="lucide:square-mouse-pointer" />
   </button>
   <div
     x-show="open"
@@ -71,7 +71,7 @@ import { Icon } from "astro-icon/components";
         x-on:click.stop
         x-on:pointerdown.stop="backdropInteractionStarted = false"
         x-trap.noscroll.inert="open"
-        class="relative flex max-h-[calc(100dvh-4rem)] max-w-7xl w-full overflow-hidden rounded-xl bg-white p-4 sm:p-6 pb-0! shadow-lg"
+        class="relative flex max-h-[calc(100dvh-4rem)] max-w-7xl w-full overflow-hidden rounded-xl bg-white p-4 sm:p-6 pb-0! shadow-lg dark:bg-neutral-900"
       >
         <slot />
       </div>

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

@@ -644,19 +644,19 @@ const layoutClass = isObjectLikeField
             x-for={`(mapKey, mapIndex) in getMapEntryKeys()`}
             :key={`${fieldNameKey} + '-map-' + mapKey + '-' + mapIndex`}
           >
-            <div class="rounded-lg border border-neutral-200 bg-neutral-50/50 p-2.5">
+            <div class="rounded-lg border border-neutral-200 bg-neutral-50/50 p-2.5 dark:border-neutral-800 dark:bg-neutral-900/50">
               <div class="mb-2 flex items-center gap-2">
                 <input
                   type="text"
                   :value="mapKey"
                   @change="renameMapKey(mapKey, $event.target.value)"
-                  class="w-full px-3 py-1.5 text-sm border border-neutral-200 focus:border-neutral-300 outline-none rounded-md shadow-xs focus:shadow placeholder:text-neutral-400 transition-all duration-200 bg-white"
+                  class="w-full px-3 py-1.5 text-sm border border-neutral-200 focus:border-neutral-300 outline-none rounded-md shadow-xs focus:shadow placeholder:text-neutral-400 transition-all duration-200 bg-white dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-200 dark:placeholder:text-neutral-500 dark:focus:border-neutral-600"
                   placeholder="Property key"
                 />
                 <button
                   type="button"
                   @click="removeMapEntry(mapKey)"
-                  class="h-[31px] px-2 rounded-md border border-neutral-200 text-neutral-500 hover:text-neutral-700 hover:border-neutral-300 hover:bg-white transition-colors duration-200 cursor-pointer"
+                  class="h-[31px] px-2 rounded-md border border-neutral-200 text-neutral-500 hover:text-neutral-700 hover:border-neutral-300 hover:bg-white transition-colors duration-200 cursor-pointer dark:border-neutral-700 dark:text-neutral-400 dark:hover:border-neutral-600 dark:hover:bg-neutral-800/70 dark:hover:text-neutral-200"
                   aria-label={`Remove ${field.name} key`}
                 >
                   <Icon class="size-4" name="lucide:x" />
@@ -668,7 +668,7 @@ const layoutClass = isObjectLikeField
                     rows="3"
                     :value="getMapJsonValue(mapKey)"
                     @input="setMapJsonValue(mapKey, $event.target.value)"
-                    class="w-full px-3 py-2 text-sm border border-neutral-200 focus:border-neutral-300 outline-none rounded-md shadow-xs focus:shadow placeholder:text-neutral-400 transition-all duration-200 bg-white font-mono"
+                    class="w-full px-3 py-2 text-sm border border-neutral-200 focus:border-neutral-300 outline-none rounded-md shadow-xs focus:shadow placeholder:text-neutral-400 transition-all duration-200 bg-white font-mono dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-200 dark:placeholder:text-neutral-500 dark:focus:border-neutral-600"
                     placeholder="JSON value"
                   />
                 ) : field.enum && field.enum.length > 0 ? (
@@ -676,8 +676,8 @@ const layoutClass = isObjectLikeField
                     <select
                       :value="getMapValue(mapKey)"
                       @change="setMapValue(mapKey, $event.target.value, $event.target)"
-                      :class="getMapValue(mapKey) ? 'text-neutral-700' : 'text-neutral-400'"
-                      class="w-full px-3 py-1.5 text-sm border border-neutral-200 focus:border-neutral-300 outline-none rounded-md shadow-xs focus:shadow transition-all duration-200 bg-white appearance-none"
+                      :class="getMapValue(mapKey) ? 'text-neutral-700 dark:text-neutral-200' : 'text-neutral-400 dark:text-neutral-500'"
+                      class="w-full px-3 py-1.5 text-sm border border-neutral-200 focus:border-neutral-300 outline-none rounded-md shadow-xs focus:shadow transition-all duration-200 bg-white appearance-none dark:border-neutral-700 dark:bg-neutral-900 dark:focus:border-neutral-600"
                     >
                       <option value="" disabled hidden>Select value</option>
                       <option value="__clear__">Clear selection</option>
@@ -695,8 +695,8 @@ const layoutClass = isObjectLikeField
                     <select
                       :value="getMapBooleanValue(mapKey)"
                       @change="setMapBooleanValue(mapKey, $event.target.value)"
-                      :class="getMapBooleanValue(mapKey) ? 'text-neutral-700' : 'text-neutral-400'"
-                      class="w-full px-3 py-1.5 text-sm border border-neutral-200 focus:border-neutral-300 outline-none rounded-md shadow-xs focus:shadow transition-all duration-200 bg-white appearance-none"
+                      :class="getMapBooleanValue(mapKey) ? 'text-neutral-700 dark:text-neutral-200' : 'text-neutral-400 dark:text-neutral-500'"
+                      class="w-full px-3 py-1.5 text-sm border border-neutral-200 focus:border-neutral-300 outline-none rounded-md shadow-xs focus:shadow transition-all duration-200 bg-white appearance-none dark:border-neutral-700 dark:bg-neutral-900 dark:focus:border-neutral-600"
                     >
                       <option value="" disabled hidden>Select value</option>
                       <option value="__clear__">Clear selection</option>
@@ -719,7 +719,7 @@ const layoutClass = isObjectLikeField
                     step={numericInputStep}
                     minlength={textInputMinLength}
                     maxlength={textInputMaxLength}
-                    class="w-full px-3 py-1.5 text-sm border border-neutral-200 focus:border-neutral-300 outline-none rounded-md shadow-xs focus:shadow placeholder:text-neutral-400 transition-all duration-200 bg-white"
+                    class="w-full px-3 py-1.5 text-sm border border-neutral-200 focus:border-neutral-300 outline-none rounded-md shadow-xs focus:shadow placeholder:text-neutral-400 transition-all duration-200 bg-white dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-200 dark:placeholder:text-neutral-500 dark:focus:border-neutral-600"
                     placeholder="Property value"
                   />
                 )
@@ -729,7 +729,7 @@ const layoutClass = isObjectLikeField
           <button
             type="button"
             @click="addMapEntry()"
-            class="inline-flex items-center gap-1 text-xs font-medium text-neutral-700 hover:text-neutral-900 cursor-pointer transition-colors duration-200"
+            class="inline-flex items-center gap-1 text-xs font-medium text-neutral-700 hover:text-neutral-900 cursor-pointer transition-colors duration-200 dark:text-neutral-300 dark:hover:text-neutral-100"
           >
             <Icon class="size-3.5" name="lucide:plus" />
             Add property
@@ -743,17 +743,17 @@ const layoutClass = isObjectLikeField
               :key={`${fieldNameKey} + '-item-' + index`}
             >
               <div
-                class="rounded-lg border border-neutral-200 bg-neutral-50/50 p-2.5"
+                class="rounded-lg border border-neutral-200 bg-neutral-50/50 p-2.5 dark:border-neutral-800 dark:bg-neutral-900/50"
                 x-init="ensureArrayObjectItem(index)"
               >
                 <div class="mb-2 flex items-center justify-between">
-                  <span class="text-xs font-medium text-neutral-600">
+                  <span class="text-xs font-medium text-neutral-600 dark:text-neutral-400">
                     Item <span x-text="index + 1" />
                   </span>
                   <button
                     type="button"
                     @click="removeArrayObjectValue(index)"
-                    class="inline-flex h-6 items-center rounded-md border border-neutral-200 px-2 text-[11px] font-medium text-neutral-600 hover:border-neutral-300 hover:bg-white hover:text-neutral-700 transition-colors duration-200 cursor-pointer"
+                    class="inline-flex h-6 items-center rounded-md border border-neutral-200 px-2 text-[11px] font-medium text-neutral-600 hover:border-neutral-300 hover:bg-white hover:text-neutral-700 transition-colors duration-200 cursor-pointer dark:border-neutral-700 dark:text-neutral-400 dark:hover:border-neutral-600 dark:hover:bg-neutral-800/70 dark:hover:text-neutral-200"
                     aria-label={`Remove ${field.name} item`}
                   >
                     Remove
@@ -761,7 +761,7 @@ const layoutClass = isObjectLikeField
                 </div>
                 <div class="space-y-3">
                   {field.nested?.map((nestedField) => (
-                    <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">
                       <Astro.self
                         field={nestedField}
                         requestPart={requestPart}
@@ -774,19 +774,19 @@ const layoutClass = isObjectLikeField
                     <div class:list={["space-y-2", hasNestedFields && "pt-1"]}>
                       {hasOneOfVariants ? (
                         <>
-                          <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">
                             {field.variants.map((variant, variantIndex) => (
                               <button
                                 type="button"
                                 @click={`selectArrayItemVariant(index, ${variantIndex})`}
                                 :class={`{
-                                  'bg-white text-neutral-900 shadow-xs ring-1 ring-neutral-200': getSelectedArrayItemVariant(index) === ${variantIndex},
-                                  'text-neutral-600 hover:bg-neutral-50 hover:text-neutral-800': getSelectedArrayItemVariant(index) !== ${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': getSelectedArrayItemVariant(index) === ${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': getSelectedArrayItemVariant(index) !== ${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>
@@ -797,13 +797,13 @@ const layoutClass = isObjectLikeField
                               x-show={`getSelectedArrayItemVariant(index) === ${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((variantField) => (
-                                    <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">
                                       <Astro.self
                                         field={variantField}
                                         requestPart={requestPart}
@@ -819,17 +819,17 @@ const layoutClass = isObjectLikeField
                         </>
                       ) : (
                         <>
-                          <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>
                           {field.variants.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((variantField) => (
-                                  <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">
                                     <Astro.self
                                       field={variantField}
                                       requestPart={requestPart}
@@ -851,7 +851,7 @@ const layoutClass = isObjectLikeField
             <button
               type="button"
               @click="addArrayObjectValue()"
-              class="inline-flex items-center gap-1 text-xs font-medium text-neutral-700 hover:text-neutral-900 cursor-pointer transition-colors duration-200"
+              class="inline-flex items-center gap-1 text-xs font-medium text-neutral-700 hover:text-neutral-900 cursor-pointer transition-colors duration-200 dark:text-neutral-300 dark:hover:text-neutral-100"
             >
               <Icon class="size-3.5" name="lucide:plus" />
               Add item
@@ -869,8 +869,8 @@ const layoutClass = isObjectLikeField
                         :value="value"
                         @change={`setArrayValue(index, $event.target.value, $event.target)`}
                         :required={`index === 0 && ${isRequiredField ? "true" : "false"}`}
-                        :class="value ? 'text-neutral-700' : 'text-neutral-400'"
-                        class="w-full px-3 py-1.5 text-sm border border-neutral-200 focus:border-neutral-300 outline-none rounded-md shadow-xs focus:shadow transition-all duration-200 bg-white appearance-none"
+                        :class="value ? 'text-neutral-700 dark:text-neutral-200' : 'text-neutral-400 dark:text-neutral-500'"
+                        class="w-full px-3 py-1.5 text-sm border border-neutral-200 focus:border-neutral-300 outline-none rounded-md shadow-xs focus:shadow transition-all duration-200 bg-white appearance-none dark:border-neutral-700 dark:bg-neutral-900 dark:focus:border-neutral-600"
                       >
                         <option value="" disabled hidden>Select value</option>
                         <option value="__clear__">Clear selection</option>
@@ -891,8 +891,8 @@ const layoutClass = isObjectLikeField
                           :value="getArrayBooleanValue(index)"
                           @change={`setArrayBooleanValue(index, $event.target.value)`}
                           :required={`index === 0 && ${isRequiredField ? "true" : "false"}`}
-                          :class="getArrayBooleanValue(index) ? 'text-neutral-700' : 'text-neutral-400'"
-                          class="w-full px-3 py-1.5 text-sm border border-neutral-200 focus:border-neutral-300 outline-none rounded-md shadow-xs focus:shadow transition-all duration-200 bg-white appearance-none"
+                          :class="getArrayBooleanValue(index) ? 'text-neutral-700 dark:text-neutral-200' : 'text-neutral-400 dark:text-neutral-500'"
+                          class="w-full px-3 py-1.5 text-sm border border-neutral-200 focus:border-neutral-300 outline-none rounded-md shadow-xs focus:shadow transition-all duration-200 bg-white appearance-none dark:border-neutral-700 dark:bg-neutral-900 dark:focus:border-neutral-600"
                         >
                           <option value="" disabled hidden>Select value</option>
                           <option value="__clear__">Clear selection</option>
@@ -918,7 +918,7 @@ const layoutClass = isObjectLikeField
                         step={numericInputStep}
                         minlength={textInputMinLength}
                         maxlength={textInputMaxLength}
-                        class="w-full px-3 py-1.5 text-sm border border-neutral-200 focus:border-neutral-300 outline-none rounded-md shadow-xs focus:shadow placeholder:text-neutral-400 transition-all duration-200"
+                        class="w-full px-3 py-1.5 text-sm border border-neutral-200 focus:border-neutral-300 outline-none rounded-md shadow-xs focus:shadow placeholder:text-neutral-400 transition-all duration-200 bg-white dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-200 dark:placeholder:text-neutral-500 dark:focus:border-neutral-600"
                       />
                     )
                   )
@@ -926,7 +926,7 @@ const layoutClass = isObjectLikeField
                 <button
                   type="button"
                   @click="removeArrayValue(index)"
-                  class="h-[31px] px-2 rounded-md border border-neutral-200 text-neutral-500 hover:text-neutral-700 hover:border-neutral-300 hover:bg-neutral-50 transition-colors duration-200 cursor-pointer"
+                  class="h-[31px] px-2 rounded-md border border-neutral-200 text-neutral-500 hover:text-neutral-700 hover:border-neutral-300 hover:bg-neutral-50 transition-colors duration-200 cursor-pointer dark:border-neutral-700 dark:text-neutral-400 dark:hover:border-neutral-600 dark:hover:bg-neutral-800/70 dark:hover:text-neutral-200"
                   aria-label={`Remove ${field.name} value`}
                 >
                   <Icon class="size-4" name="lucide:x" />
@@ -936,7 +936,7 @@ const layoutClass = isObjectLikeField
             <button
               type="button"
               @click="addArrayValue()"
-              class="inline-flex items-center gap-1 text-xs font-medium text-neutral-700 hover:text-neutral-900 cursor-pointer transition-colors duration-200"
+              class="inline-flex items-center gap-1 text-xs font-medium text-neutral-700 hover:text-neutral-900 cursor-pointer transition-colors duration-200 dark:text-neutral-300 dark:hover:text-neutral-100"
             >
               <Icon class="size-3.5" name="lucide:plus" />
               Add value
@@ -944,10 +944,10 @@ const layoutClass = isObjectLikeField
           </div>
         )
       ) : hasNestedFields || hasFieldVariants ? (
-        <div class="rounded-lg border border-neutral-200 bg-neutral-50/50 p-2.5">
+        <div class="rounded-lg border border-neutral-200 bg-neutral-50/50 p-2.5 dark:border-neutral-800 dark:bg-neutral-900/50">
           <div class="space-y-3">
             {field.nested?.map((nestedField) => (
-              <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">
                 <Astro.self
                   field={nestedField}
                   requestPart={requestPart}
@@ -960,19 +960,19 @@ const layoutClass = isObjectLikeField
               <div class:list={["space-y-2", hasNestedFields && "pt-1"]}>
                 {hasOneOfVariants ? (
                   <>
-                    <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">
                       {field.variants.map((variant, variantIndex) => (
                         <button
                           type="button"
                           @click={`selectOneOfVariant(${variantIndex})`}
                           :class={`{
-                            'bg-white text-neutral-900 shadow-xs ring-1 ring-neutral-200': getSelectedOneOfVariant() === ${variantIndex},
-                            'text-neutral-600 hover:bg-neutral-50 hover:text-neutral-800': getSelectedOneOfVariant() !== ${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': getSelectedOneOfVariant() === ${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': getSelectedOneOfVariant() !== ${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>
@@ -983,13 +983,13 @@ const layoutClass = isObjectLikeField
                         x-show={`getSelectedOneOfVariant() === ${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((variantField) => (
-                              <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">
                                 <Astro.self
                                   field={variantField}
                                   requestPart={requestPart}
@@ -1005,17 +1005,17 @@ const layoutClass = isObjectLikeField
                   </>
                 ) : (
                   <>
-                    <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>
                     {field.variants.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((variantField) => (
-                            <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">
                               <Astro.self
                                 field={variantField}
                                 requestPart={requestPart}
@@ -1042,8 +1042,8 @@ const layoutClass = isObjectLikeField
                 :value="getFieldValue()"
                 @change="setFieldValue($event.target.value, $event.target)"
                 required={isRequiredField}
-                :class="getFieldValue() ? 'text-neutral-700' : 'text-neutral-400'"
-                class="w-full px-3 py-1.5 text-sm border border-neutral-200 focus:border-neutral-300 outline-none rounded-md shadow-xs focus:shadow transition-all duration-200 bg-white appearance-none"
+                :class="getFieldValue() ? 'text-neutral-700 dark:text-neutral-200' : 'text-neutral-400 dark:text-neutral-500'"
+                class="w-full px-3 py-1.5 text-sm border border-neutral-200 focus:border-neutral-300 outline-none rounded-md shadow-xs focus:shadow transition-all duration-200 bg-white appearance-none dark:border-neutral-700 dark:bg-neutral-900 dark:focus:border-neutral-600"
               >
                 <option value="" disabled hidden>Select value</option>
                 <option value="__clear__">Clear selection</option>
@@ -1063,8 +1063,8 @@ const layoutClass = isObjectLikeField
                 :value="getBooleanFieldValue()"
                 @change="setBooleanFieldValue($event.target.value)"
                 required={isRequiredField}
-                :class="getBooleanFieldValue() ? 'text-neutral-700' : 'text-neutral-400'"
-                class="w-full px-3 py-1.5 text-sm border border-neutral-200 focus:border-neutral-300 outline-none rounded-md shadow-xs focus:shadow transition-all duration-200 bg-white appearance-none"
+                :class="getBooleanFieldValue() ? 'text-neutral-700 dark:text-neutral-200' : 'text-neutral-400 dark:text-neutral-500'"
+                class="w-full px-3 py-1.5 text-sm border border-neutral-200 focus:border-neutral-300 outline-none rounded-md shadow-xs focus:shadow transition-all duration-200 bg-white appearance-none dark:border-neutral-700 dark:bg-neutral-900 dark:focus:border-neutral-600"
               >
                 <option value="" disabled hidden>Select value</option>
                 <option value="__clear__">Clear selection</option>
@@ -1090,7 +1090,7 @@ const layoutClass = isObjectLikeField
               step={numericInputStep}
               minlength={textInputMinLength}
               maxlength={textInputMaxLength}
-              class="w-full px-3 py-1.5 text-sm border border-neutral-200 focus:border-neutral-300 outline-none rounded-md shadow-xs focus:shadow placeholder:text-neutral-400 transition-all duration-200"
+              class="w-full px-3 py-1.5 text-sm border border-neutral-200 focus:border-neutral-300 outline-none rounded-md shadow-xs focus:shadow placeholder:text-neutral-400 transition-all duration-200 bg-white dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-200 dark:placeholder:text-neutral-500 dark:focus:border-neutral-600"
             />
           )}
         </>

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

@@ -37,11 +37,7 @@ const configuredProxyUrl =
   typeof import.meta.env.PUBLIC_PROXY_URL === "string"
     ? import.meta.env.PUBLIC_PROXY_URL.trim()
     : "";
-const proxyUrl =
-  configuredProxyUrl ||
-  (import.meta.env.DEV
-    ? "https://docs-proxy-dev.stefanjoseph-dev.workers.dev"
-    : "");
+const proxyUrl = configuredProxyUrl || "/_platform/proxy";
 const proxyEnabled = config.playground?.proxy !== false && proxyUrl.length > 0;
 const formattedBodyDescription = bodyDescription
   ? await renderMarkdown(bodyDescription)
@@ -544,20 +540,22 @@ const sectionVariantFieldNames = Object.fromEntries(
       <button
         @click="sendRequest($event)"
         :disabled="loading"
-        class="m-px flex items-center gap-1.5 px-4 py-[5px] text-sm font-medium rounded-lg bg-neutral-900 text-white/95 hover:text-white shadow-[inset_0_1px_0_rgb(255,255,255,0.3),0_0_0_1px_var(--color-neutral-800)] duration-200 whitespace-nowrap cursor-pointer relative before:absolute before:inset-0 before:shadow-sm before:rounded-lg before:bg-transparent disabled:opacity-70"
+        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"
-          x-bind:class="loading ? 'opacity-0':''"
-        >
+      <span class="flex items-center gap-2">
+          <Icon
+            x-show="!loading"
+            class="size-3.5 -ml-px"
+            name="lucide:square-arrow-up-right"
+          />
+          <Icon
+            x-show="loading"
+            x-cloak
+            class="size-3.5 animate-spin -ml-px"
+            name="lucide:loader"
+          />
           Send <span class="hidden xs:inline">Request</span>
-          <Icon class="size-4" name="lucide:square-arrow-up-right" />
         </span>
-        <Icon
-          x-show="loading"
-          class="size-4 absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2 animate-spin **:stroke-3"
-          name="lucide:loader"
-        />
       </button>
     </PlaygroundBar>
 
@@ -567,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(
@@ -584,16 +582,16 @@ const sectionVariantFieldNames = Object.fromEntries(
             }
 
             return (
-              <div class="border border-neutral-200 shadow-xs rounded-xl p-4">
+              <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>
                   ))}
@@ -601,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>
@@ -624,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}
@@ -645,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>
                                 ))}
@@ -691,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>