radiant-docs 0.1.37 → 0.1.38

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

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

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

@@ -52,20 +52,24 @@ Object.entries(responses).forEach(([statusCode, response]: [string, any]) => {
 
 const statusCodeStyles = {
   "2": {
-    badge: "bg-green-50 text-green-700/70 border-green-700/10",
-    dot: "bg-green-700/70",
+    badge:
+      "bg-green-50 text-green-700/70 border-green-700/10 dark:bg-green-900/30 dark:text-green-300 dark:border-green-300/20",
+    dot: "bg-green-700/70 dark:bg-green-400/80",
   },
   "3": {
-    badge: "bg-blue-50 text-blue-700/70 border-blue-700/10",
-    dot: "bg-blue-700/70",
+    badge:
+      "bg-blue-50 text-blue-700/70 border-blue-700/10 dark:bg-blue-900/30 dark:text-blue-300 dark:border-blue-300/20",
+    dot: "bg-blue-700/70 dark:bg-blue-400/80",
   },
   "4": {
-    badge: "bg-yellow-50 text-yellow-600/80 border-yellow-600/10",
-    dot: "bg-yellow-500/80",
+    badge:
+      "bg-yellow-50 text-yellow-600/80 border-yellow-600/10 dark:bg-yellow-900/30 dark:text-yellow-300 dark:border-yellow-300/20",
+    dot: "bg-yellow-500/80 dark:bg-yellow-400/90",
   },
   "5": {
-    badge: "bg-red-50 text-red-700/70 border-red-700/10",
-    dot: "bg-red-700/70",
+    badge:
+      "bg-red-50 text-red-700/70 border-red-700/10 dark:bg-red-900/30 dark:text-red-300 dark:border-red-300/20",
+    dot: "bg-red-700/70 dark:bg-red-400/80",
   },
 } as const;
 
@@ -76,25 +80,58 @@ function getStatusCodeClass(statusCode: string, key: "badge" | "dot"): string {
 
 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(";");
@@ -139,7 +176,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
@@ -269,10 +306,10 @@ const hasMultipleResponses = responseSnippetItems.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 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"
       >
         {
           hasMultipleResponses ? (
@@ -283,7 +320,7 @@ const hasMultipleResponses = responseSnippetItems.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;'"
                 />
@@ -297,7 +334,7 @@ const hasMultipleResponses = responseSnippetItems.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
                       class="size-[7px] shrink-0 rounded-full transition-opacity duration-150"
@@ -309,13 +346,13 @@ const hasMultipleResponses = responseSnippetItems.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-[7px] shrink-0 rounded-full"
                     class:list={[firstResponse.dotClass]}></span>
@@ -326,15 +363,15 @@ const hasMultipleResponses = responseSnippetItems.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
@@ -345,7 +382,7 @@ const hasMultipleResponses = responseSnippetItems.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"
             />
@@ -354,16 +391,16 @@ const hasMultipleResponses = responseSnippetItems.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>
           {
             responseSnippetItems.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/ui/CodeTabEdge.astro

@@ -9,6 +9,8 @@ const idPrefix = `code_group_tab_edge_${Math.random().toString(36).slice(2, 9)}`
 const mask0Id = `code_group_tab_edge_mask0_${idPrefix}`;
 const path1OutsideMaskId = `code_group_tab_edge_path_1_outside_1_${idPrefix}`;
 const path3OutsideMaskId = `code_group_tab_edge_path_3_outside_2_${idPrefix}`;
+const edgeBackgroundColor = "var(--rd-code-tab-edge-bg, #ffffff)";
+const edgeBorderColor = "var(--rd-code-tab-edge-border, #e5e5e5)";
 ---
 
 <svg
@@ -47,10 +49,10 @@ const path3OutsideMaskId = `code_group_tab_edge_path_3_outside_2_${idPrefix}`;
     </mask>
     <path
       d="M1 0L8.0783 0C15.772 0 22.7836 4.41324 26.111 11.3501L34.8889 29.6498C38.2164 36.5868 45.228 41 52.9217 41H60H1L1 0Z"
-      fill="white"></path>
+      fill={edgeBackgroundColor}></path>
     <path
       d="M1 0V-1H0V0L1 0ZM1 41H0V42H1V41ZM34.8889 29.6498L33.9873 30.0823L34.8889 29.6498ZM26.111 11.3501L27.0127 10.9177L26.111 11.3501ZM1 1H8.0783V-1H1V1ZM60 40H1V42H60V40ZM2 41V0L0 0L0 41H2ZM25.2094 11.7826L33.9873 30.0823L35.7906 29.2174L27.0127 10.9177L25.2094 11.7826ZM52.9217 42H60V40H52.9217V42ZM33.9873 30.0823C37.4811 37.3661 44.8433 42 52.9217 42V40C45.6127 40 38.9517 35.8074 35.7906 29.2174L33.9873 30.0823ZM8.0783 1C15.3873 1 22.0483 5.19257 25.2094 11.7826L27.0127 10.9177C23.5188 3.6339 16.1567 -1 8.0783 -1V1Z"
-      fill="black"
+      fill={edgeBorderColor}
       mask={`url(#${path1OutsideMaskId})`}></path>
   </mask>
   <g mask={`url(#${mask0Id})`}>
@@ -70,10 +72,10 @@ const path3OutsideMaskId = `code_group_tab_edge_path_3_outside_2_${idPrefix}`;
     </mask>
     <path
       d="M0 1.02441H7.0783C14.772 1.02441 21.7836 5.43765 25.111 12.3746L33.8889 30.6743C37.2164 37.6112 44.228 42.0244 51.9217 42.0244H59H0L0 1.02441Z"
-      fill="#ffffff"></path>
+      fill={edgeBackgroundColor}></path>
     <path
       d="M0 1.02441L0 0.0244141H-1V1.02441H0ZM0 42.0244H-1V43.0244H0L0 42.0244ZM33.8889 30.6743L32.9873 31.1068L33.8889 30.6743ZM25.111 12.3746L26.0127 11.9421L25.111 12.3746ZM0 2.02441H7.0783V0.0244141H0L0 2.02441ZM59 41.0244H0L0 43.0244H59V41.0244ZM1 42.0244L1 1.02441H-1L-1 42.0244H1ZM24.2094 12.8071L32.9873 31.1068L34.7906 30.2418L26.0127 11.9421L24.2094 12.8071ZM51.9217 43.0244H59V41.0244H51.9217V43.0244ZM32.9873 31.1068C36.4811 38.3905 43.8433 43.0244 51.9217 43.0244V41.0244C44.6127 41.0244 37.9517 36.8318 34.7906 30.2418L32.9873 31.1068ZM7.0783 2.02441C14.3873 2.02441 21.0483 6.21699 24.2094 12.8071L26.0127 11.9421C22.5188 4.65831 15.1567 0.0244141 7.0783 0.0244141V2.02441Z"
-      fill="#e5e5e5"
+      fill={edgeBorderColor}
       mask={`url(#${path3OutsideMaskId})`}></path>
   </g>
 </svg>

package/template/src/components/ui/Field.astro

@@ -81,19 +81,19 @@ if (hasMinLength && hasMaxLength) {
       {name}
     </h5>
     <code
-      class="text-[10px] font-medium text-neutral-500 border border-neutral-200/80 bg-neutral-50 px-1 rounded-sm"
+      class="text-[10px] font-medium text-neutral-500 border border-neutral-200/80 bg-neutral-50 px-1 rounded-sm dark:text-neutral-300 dark:border-neutral-700/70 dark:bg-neutral-900/70"
       >{type}</code
     >
     {
       required && (
-        <div class="text-red-700/70 bg-red-50 border border-red-700/10 rounded-full px-1.5 text-[10px] font-mono leading-none py-0.5 pb-0.5 font-[450] h-fit">
+        <div class="text-red-700/70 bg-red-50 border border-red-700/10 rounded-full px-1.5 text-[10px] font-mono leading-none py-0.5 pb-0.5 font-[450] h-fit dark:text-red-300 dark:bg-red-950/40 dark:border-red-900/40">
           required
         </div>
       )
     }
     {
       optional && (
-        <div class="text-blue-700/70 bg-blue-50 border border-blue-700/10 rounded-full px-1.5 font-mono text-[10px] leading-none py-0.5 pb-0.5 font-[450] h-fit">
+        <div class="text-blue-700/70 bg-blue-50 border border-blue-700/10 rounded-full px-1.5 font-mono text-[10px] leading-none py-0.5 pb-0.5 font-[450] h-fit dark:text-blue-300 dark:bg-blue-950/40 dark:border-blue-900/40">
           optional
         </div>
       )
@@ -103,7 +103,7 @@ if (hasMinLength && hasMaxLength) {
   {
     formattedDescription && (
       <div
-        class="prose-rules prose-sm! leading-5! text-neutral-500 **:text-neutral-500"
+        class="prose-rules prose-sm! leading-5! text-neutral-500 **:text-neutral-500 dark:text-neutral-400 dark:**:text-neutral-400"
         set:html={formattedDescription}
       />
     )
@@ -115,7 +115,7 @@ if (hasMinLength && hasMaxLength) {
         {enumValues.map((v, i, a) => {
           return (
             <div class="flex">
-              <span class="text-[11px] font-medium text-neutral-600 border border-neutral-200 bg-neutral-50 px-1 py-px rounded-md">
+              <span class="text-[11px] font-medium text-neutral-600 border border-neutral-200 bg-neutral-50 px-1 py-px rounded-md dark:text-neutral-300 dark:border-neutral-700 dark:bg-neutral-900/70">
                 <code>{v}</code>
               </span>
               {a.length - 2 === i ? (
@@ -133,7 +133,7 @@ if (hasMinLength && hasMaxLength) {
     numericRangeLabel && (
       <div class="text-sm">
         <span class="font-medium text-xs">Range:</span>
-        <code class="text-[11px] font-medium text-neutral-600 border border-neutral-200 bg-neutral-50 px-1 py-px rounded-md">
+        <code class="text-[11px] font-medium text-neutral-600 border border-neutral-200 bg-neutral-50 px-1 py-px rounded-md dark:text-neutral-300 dark:border-neutral-700 dark:bg-neutral-900/70">
           {numericRangeLabel}
         </code>
       </div>
@@ -143,7 +143,7 @@ if (hasMinLength && hasMaxLength) {
     stringLengthLabel && (
       <div class="text-sm">
         <span class="font-medium text-xs">Length:</span>
-        <code class="text-[11px] font-medium text-neutral-600 border border-neutral-200 bg-neutral-50 px-1 py-px rounded-md">
+        <code class="text-[11px] font-medium text-neutral-600 border border-neutral-200 bg-neutral-50 px-1 py-px rounded-md dark:text-neutral-300 dark:border-neutral-700 dark:bg-neutral-900/70">
           {stringLengthLabel}
         </code>
       </div>

package/template/src/components/ui/demo/Demo.astro

@@ -1,3 +1,3 @@
-<div class="border border-neutral-200 rounded-xl shadow-xs my-5!">
+<div class="border rounded-xl shadow-xs my-5!">
   <slot />
 </div>

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

@@ -50,14 +50,14 @@ validateProps(
 }`
   x-init="id = (typeof register === 'function') ? register() : Math.random()"
   role="region"
-  class="block border-b border-neutral-800/10 last:border-b-0. [&:first-child>h4>button]:pt-0 [&:last-child>div>div]:pb-0"
+  class="block border-b border-neutral-800/10 dark:border-neutral-700/50 last:border-b-0. [&:first-child>h4>button]:pt-0 [&:last-child>div>div]:pb-0"
 >
   <h4 class="not-prose">
     <button
       type="button"
       x-on:click="expanded = !expanded"
       :aria-expanded="expanded"
-      class="pb-4 pt-4 group flex w-full items-center justify-between gap-2.5 text-left font-medium text-neutral-800"
+      class="pb-4 pt-4 group flex w-full items-center justify-between gap-2.5 text-left font-medium text-neutral-800 dark:text-neutral-200"
     >
       {icon && <Icon name={icon} />}
       <span class:list={["flex-1", titleSize && TITLE_SIZE_CLASS[titleSize]]}
@@ -65,7 +65,7 @@ validateProps(
       >
       <Icon
         name="lucide:chevron-down"
-        class="size-5 shrink-0 text-neutral-400 group-hover:text-neutral-600 transition duration-200"
+        class="size-5 shrink-0 text-neutral-400 group-hover:text-neutral-600 transition duration-200 dark:text-neutral-500 dark:group-hover:text-neutral-300"
         x-bind:class="expanded && 'rotate-180'"
       />
     </button>

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

@@ -23,31 +23,31 @@ const typeDefaults: Record<
   warning: {
     icon: warningIcon,
     color: "bg-amber-500",
-    iconColor: "text-amber-500",
+    iconColor: "text-amber-500 dark:text-amber-400",
     title: "Warning",
   },
   info: {
     icon: infoIcon,
     color: "bg-sky-600/80",
-    iconColor: "text-sky-600/80",
+    iconColor: "text-sky-600/80 dark:text-sky-400",
     title: "Info",
   },
   tip: {
     icon: lightbulbIcon,
     color: "bg-yellow-500",
-    iconColor: "text-yellow-500",
+    iconColor: "text-yellow-500 dark:text-yellow-400",
     title: "Tip",
   },
   danger: {
     icon: dangerIcon,
     color: "bg-red-600",
-    iconColor: "text-red-600",
+    iconColor: "text-red-600 dark:text-red-400",
     title: "Danger",
   },
   success: {
     icon: successIcon,
     color: "bg-green-600",
-    iconColor: "text-green-600",
+    iconColor: "text-green-600 dark:text-green-400",
     title: "Success",
   },
 };
@@ -72,7 +72,7 @@ const resolvedTitle = title ?? defaults.title;
 
 <aside
   class:list={[
-    "my-5 space-y-1 rounded-lg border border-neutral-200/80 shadow-xs px-4 py-3.5 pl-6 relative",
+    "my-5 space-y-1 rounded-lg border border-neutral-200 bg-white/80 shadow-xs px-4 py-3.5 pl-6 relative dark:border-neutral-800 dark:bg-(--rd-code-surface)",
   ]}
   role="note"
 >
@@ -96,11 +96,11 @@ const resolvedTitle = title ?? defaults.title;
         <img src={defaults.icon} alt="" width="16" height="16" class="" />
       )
     }
-    <h6 class:list={["font-semibold text-sm"]}>
+    <h6 class:list={["font-semibold text-sm text-neutral-900 dark:text-neutral-100"]}>
       {resolvedTitle}
     </h6>
   </div>
-  <div class="**:first:mt-0! **:last:mb-0! text-sm">
+  <div class="**:first:mt-0! **:last:mb-0! text-sm text-neutral-700 dark:text-neutral-300">
     <slot />
   </div>
 </aside>