radiant-docs 0.1.37 → 0.1.39

package/template/src/components/TableOfContents.astro

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

package/template/src/components/ThemeSwitcher.astro

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

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

@@ -1707,10 +1707,10 @@ export default function AskAiWidget({
         }
       `}</style>
       {!isOpen ? (
-        <div className="fixed bottom-5 right-6 size-12 z-40 bg-white rounded-full 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
           >
@@ -1729,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" />
@@ -1743,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,7 +38,7 @@ import { Icon } from "astro-icon/components";
 >
   <button
     x-on:click="open = true"
-    class="font-[350] m-px 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"
+    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
@@ -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"
             />
           )}
         </>