From 31399f86590ead987327735444583877e5e158fd Mon Sep 17 00:00:00 2001
From: Nathan Totten <nate@zuplo.com>
Date: Thu, 6 Nov 2025 14:51:10 -0500
Subject: [PATCH] Use css variables and tailwind styles in custom components

---
 .../step-2-add-rate-limiting-local.mdx        |   2 +-
 .../step-3-add-api-key-auth-local.mdx         |   2 +-
 scripts/generate-cli-docs.ts                  |   3 +-
 src/BrowserScreenshot.tsx                     | 165 +++---------------
 src/BundlesTable.tsx                          |  25 +--
 src/CliCommand.tsx                            |  20 +--
 src/CopyPrompt.tsx                            |   8 +-
 src/LandingPage.tsx                           |   4 +-
 src/ModalScreenshot.tsx                       |  89 +---------
 src/TutorialModeSelector.tsx                  |  20 +--
 src/components.tsx                            |   6 +-
 src/zudoku-env.d.ts                           |   5 +
 12 files changed, 77 insertions(+), 272 deletions(-)

diff --git a/docs/articles/step-2-add-rate-limiting-local.mdx b/docs/articles/step-2-add-rate-limiting-local.mdx
index 5db825585..3361bee35 100644
--- a/docs/articles/step-2-add-rate-limiting-local.mdx
+++ b/docs/articles/step-2-add-rate-limiting-local.mdx
@@ -64,7 +64,7 @@ limiter.
 1.  Add the rate-limiting Policy
 
     Open the local **Route Designer** by navigating to http://localhost:9100/.
-    Select your route and click **Add Policy** on the incoming Requeset policies
+    Select your route and click **Add Policy** on the incoming Request policies
     section.
 
     <BrowserScreenshot url="http://localhost:9100/?path=routes.oas.json">
diff --git a/docs/articles/step-3-add-api-key-auth-local.mdx b/docs/articles/step-3-add-api-key-auth-local.mdx
index 8d52d1baf..dab7a1d2d 100644
--- a/docs/articles/step-3-add-api-key-auth-local.mdx
+++ b/docs/articles/step-3-add-api-key-auth-local.mdx
@@ -61,7 +61,7 @@ Let's get started.
 1.  Add the API Key Authentication Policy
 
     Open the local **Route Designer** by navigating to http://localhost:9100/.
-    Select your route and click **Add Policy** on the incoming Requeset policies
+    Select your route and click **Add Policy** on the incoming Request policies
     section.
 
     <BrowserScreenshot url="http://localhost:9100/?path=routes.oas.json">
diff --git a/scripts/generate-cli-docs.ts b/scripts/generate-cli-docs.ts
index b89557989..15172c0fe 100644
--- a/scripts/generate-cli-docs.ts
+++ b/scripts/generate-cli-docs.ts
@@ -266,7 +266,8 @@ async function createCommandPage(
   }
 
   if (command.usage) {
-    props.push(formatJsxProp("usage", command.usage));
+    // Wrap long usage commands for better readability
+    props.push(formatJsxProp("usage", wrapCliCommand(command.usage)));
   }
 
   // Get custom content from partial files
diff --git a/src/BrowserScreenshot.tsx b/src/BrowserScreenshot.tsx
index 912cb1339..564836f0f 100644
--- a/src/BrowserScreenshot.tsx
+++ b/src/BrowserScreenshot.tsx
@@ -1,12 +1,7 @@
-import type { CSSProperties, PropsWithChildren, ReactElement } from "react";
+import type { PropsWithChildren, ReactElement } from "react";
 
 interface BrowserScreenshotProps {
   url?: string;
-  browserTheme?: "light" | "dark";
-  browserShadow?: string;
-  borderRadius?: number;
-  className?: string;
-  style?: CSSProperties;
   size?: "sm" | "md" | "lg";
 }
 
@@ -19,144 +14,33 @@ const marginClasses = {
 export function BrowserScreenshot({
   children,
   url = "https://example.com",
-  browserTheme = "light",
-  browserShadow = "0 10px 40px rgba(0, 0, 0, 0.08), 0 2px 10px rgba(0, 0, 0, 0.04)",
-  borderRadius = 8,
-  className = "",
-  style,
   size,
 }: PropsWithChildren<BrowserScreenshotProps>): ReactElement {
-  const isDark = browserTheme === "dark";
-
-  const browserWindowStyle: CSSProperties = {
-    borderRadius: `${borderRadius}px`,
-    overflow: "hidden",
-    boxShadow: browserShadow,
-    backgroundColor: isDark ? "#1a1a1a" : "#fafafa",
-    border: `1px solid ${isDark ? "rgba(255, 255, 255, 0.12)" : "rgba(0, 0, 0, 0.12)"}`,
-    margin: "0 auto",
-    maxWidth: "90%",
-    ...style,
-  };
-
-  const browserBarStyle: CSSProperties = {
-    height: "40px",
-    backgroundColor: isDark ? "#262626" : "#f6f6f6",
-    display: "flex",
-    alignItems: "center",
-    padding: "0 16px",
-    gap: "16px",
-    position: "relative" as const,
-  };
-
-  const trafficLightStyle: CSSProperties = {
-    display: "flex",
-    gap: "8px",
-    alignItems: "center",
-  };
-
-  const dotStyle: CSSProperties = {
-    width: "12px",
-    height: "12px",
-    borderRadius: "50%",
-  };
-
-  const navigationStyle: CSSProperties = {
-    display: "flex",
-    gap: "16px",
-    alignItems: "center",
-  };
-
-  const navButtonStyle: CSSProperties = {
-    width: "14px",
-    height: "14px",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    cursor: "pointer",
-    opacity: 0.6,
-  };
-
-  const urlBarStyle: CSSProperties = {
-    flex: 1,
-    maxWidth: "320px",
-    height: "28px",
-    backgroundColor: isDark ? "#1a1a1a" : "#fafafa",
-    border: `1px solid ${isDark ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.1)"}`,
-    borderRadius: "20px",
-    padding: "0 12px",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    fontSize: "13px",
-    color: isDark ? "#888888" : "#666666",
-    fontFamily:
-      "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
-  };
-
-  const contentStyle: CSSProperties = {
-    backgroundColor: "#ffffff",
-    display: "block",
-  };
-
-  const marginClass = size
-    ? marginClasses[size]
-      ? marginClasses[size]
-      : "mx-auto"
-    : "mx-auto";
+  const marginClass = size ? (marginClasses[size] ?? "mx-auto") : "mx-auto";
 
   return (
     <div
       className={`[&>p]:m-0 [&>p]:p-0 [&>p>img]:m-0 [&>p>img]:p-0 my-8 ${marginClass}`}
     >
-      <div
-        className={`browser-screenshot-wrapper ${className}`}
-        style={browserWindowStyle}
-      >
-        <style
-          dangerouslySetInnerHTML={{
-            __html: `
-          .browser-screenshot-wrapper img {
-            border: 0 !important;
-            border-radius: 0 !important;
-            padding: 0 !important;
-            margin: 0 !important;
-            display: block !important;
-            max-width: 100% !important;
-            height: auto !important;
-          }
-          .browser-screenshot-wrapper p {
-            margin: 0 !important;
-            padding: 0 !important;
-            line-height: 0 !important;
-          }
-        `,
-          }}
-        />
-        <div style={browserBarStyle}>
-          <div style={trafficLightStyle}>
+      <div className="overflow-hidden mx-auto max-w-[90%] rounded-lg shadow-lg border border-border bg-card [&_img]:!border-0 [&_img]:!rounded-none [&_img]:!p-0 [&_img]:!m-0 [&_img]:!block [&_img]:!max-w-full [&_img]:!h-auto [&_p]:!m-0 [&_p]:!p-0 [&_p]:!leading-[0]">
+        <div className="h-10 flex items-center px-4 gap-4 relative bg-gray-100 dark:bg-gray-900">
+          <div className="flex gap-2 items-center">
             <div
-              style={{
-                ...dotStyle,
-                backgroundColor: "#FE5F57",
-              }}
+              className="w-3 h-3 rounded-full"
+              style={{ backgroundColor: "#FE5F57" }}
             />
             <div
-              style={{
-                ...dotStyle,
-                backgroundColor: "#FEBB2E",
-              }}
+              className="w-3 h-3 rounded-full"
+              style={{ backgroundColor: "#FEBB2E" }}
             />
             <div
-              style={{
-                ...dotStyle,
-                backgroundColor: "#26C941",
-              }}
+              className="w-3 h-3 rounded-full"
+              style={{ backgroundColor: "#26C941" }}
             />
           </div>
-          <div style={navigationStyle}>
-            <div style={navButtonStyle}>
-              <svg viewBox="0 0 16 16" fill={isDark ? "#888888" : "#666666"}>
+          <div className="flex gap-4 items-center">
+            <div className="w-3.5 h-3.5 flex items-center justify-center cursor-pointer opacity-60 text-gray-600 dark:text-gray-400">
+              <svg viewBox="0 0 16 16" fill="currentColor">
                 <path
                   fillRule="evenodd"
                   clipRule="evenodd"
@@ -164,8 +48,8 @@ export function BrowserScreenshot({
                 />
               </svg>
             </div>
-            <div style={navButtonStyle}>
-              <svg viewBox="0 0 16 16" fill={isDark ? "#888888" : "#666666"}>
+            <div className="w-3.5 h-3.5 flex items-center justify-center cursor-pointer opacity-60 text-gray-600 dark:text-gray-400">
+              <svg viewBox="0 0 16 16" fill="currentColor">
                 <path
                   fillRule="evenodd"
                   clipRule="evenodd"
@@ -173,8 +57,8 @@ export function BrowserScreenshot({
                 />
               </svg>
             </div>
-            <div style={navButtonStyle}>
-              <svg viewBox="0 0 16 16" fill={isDark ? "#888888" : "#666666"}>
+            <div className="w-3.5 h-3.5 flex items-center justify-center cursor-pointer opacity-60 text-gray-600 dark:text-gray-400">
+              <svg viewBox="0 0 16 16" fill="currentColor">
                 <path
                   fillRule="evenodd"
                   clipRule="evenodd"
@@ -183,20 +67,13 @@ export function BrowserScreenshot({
               </svg>
             </div>
           </div>
-          <div style={urlBarStyle}>
-            <span
-              style={{
-                fontSize: "13px",
-                whiteSpace: "nowrap",
-                overflow: "hidden",
-                textOverflow: "ellipsis",
-              }}
-            >
+          <div className="flex-1 max-w-xs h-7 rounded-full px-3 flex items-center justify-center text-[13px] font-sans bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 text-gray-600 dark:text-gray-400">
+            <span className="text-[13px] whitespace-nowrap overflow-hidden text-ellipsis">
               {url}
             </span>
           </div>
         </div>
-        <div style={contentStyle}>{children}</div>
+        <div className="bg-card block">{children}</div>
       </div>
     </div>
   );
diff --git a/src/BundlesTable.tsx b/src/BundlesTable.tsx
index 305148100..cb8cc4a1c 100644
--- a/src/BundlesTable.tsx
+++ b/src/BundlesTable.tsx
@@ -29,17 +29,19 @@ export const BundlesTable = () => {
 
   return (
     <table className="w-full border-collapse text-sm">
-      <tr className="bg-gray-50 border-b">
-        <th className="px-3 py-2 text-left font-medium text-gray-600">
+      <tr className="bg-secondary border-b">
+        <th className="px-3 py-2 text-left font-medium text-muted-foreground">
           Module
         </th>
-        <th className="px-3 py-2 text-left font-medium text-gray-600">
+        <th className="px-3 py-2 text-left font-medium text-muted-foreground">
           Status
         </th>
-        <th className="px-3 py-2 text-left font-medium text-gray-600">
+        <th className="px-3 py-2 text-left font-medium text-muted-foreground">
           Version
         </th>{" "}
-        <th className="px-3 py-2 text-left font-medium text-gray-600">Notes</th>
+        <th className="px-3 py-2 text-left font-medium text-muted-foreground">
+          Notes
+        </th>
       </tr>
       {data?.bundles
         .filter((bundle) => bundle.isPublic)
@@ -52,16 +54,17 @@ export const BundlesTable = () => {
           let status = issue?.status ?? "Unknown";
 
           const statusClass = {
-            Unknown: "bg-gray-200 text-gray-700",
-            Issues: "bg-red-100 text-red-800",
-            Working: "bg-green-200 text-green-800",
+            Unknown: "bg-secondary text-foreground",
+            Issues: "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200",
+            Working:
+              "bg-green-200 text-green-800 dark:bg-green-900 dark:text-green-200",
           };
 
           return (
-            <tr className="border-b hover:bg-gray-50" key={i}>
+            <tr className="border-b hover:bg-accent" key={i}>
               <td className="px-3 py-2 align-top">
                 <a
-                  className="text-blue-600 hover:underline font-medium"
+                  className="text-primary hover:underline font-medium"
                   href={
                     bundle.url ?? `https://www.npmjs.com/package/${bundle.name}`
                   }
@@ -80,7 +83,7 @@ export const BundlesTable = () => {
                 {bundle.version}
               </td>
 
-              <td className="px-3 py-2 align-top text-gray-700 text-xs">
+              <td className="px-3 py-2 align-top text-foreground text-xs">
                 {notes}
               </td>
             </tr>
diff --git a/src/CliCommand.tsx b/src/CliCommand.tsx
index c4237c609..e968b441d 100644
--- a/src/CliCommand.tsx
+++ b/src/CliCommand.tsx
@@ -165,7 +165,7 @@ export const CliCommand: React.FC<CliCommandProps> = ({
           <h2 className="text-2xl font-bold mb-6">Examples</h2>
           {examples.map(([cmd, desc], index) => (
             <div key={index} className="mb-6">
-              <p className="mb-2 text-gray-700">{desc}</p>
+              <p className="mb-2 text-foreground">{desc}</p>
               <SyntaxHighlight language="bash">
                 {cmd.replace(/\$0/g, "zuplo")}
               </SyntaxHighlight>
@@ -184,21 +184,19 @@ export const CliCommand: React.FC<CliCommandProps> = ({
                 <code>--{option.name}</code>
               </h3>
               {option.description && (
-                <p className="mb-3 text-gray-700">{option.description}</p>
+                <p className="mb-3 text-foreground">{option.description}</p>
               )}
-              <div className="text-sm text-gray-600">
+              <div className="text-sm text-muted-foreground">
                 {option.type && (
                   <span className="mr-3">
                     Type:{" "}
-                    <code className="bg-gray-100 px-1 rounded">
-                      {option.type}
-                    </code>
+                    <code className="bg-muted px-1 rounded">{option.type}</code>
                   </span>
                 )}
                 {option.default !== undefined && (
                   <span className="mr-3">
                     Default:{" "}
-                    <code className="bg-gray-100 px-1 rounded">
+                    <code className="bg-muted px-1 rounded">
                       {JSON.stringify(option.default)}
                     </code>
                   </span>
@@ -206,7 +204,7 @@ export const CliCommand: React.FC<CliCommandProps> = ({
                 {option.choices && option.choices.length > 0 && (
                   <span className="mr-3">
                     Choices:{" "}
-                    <code className="bg-gray-100 px-1 rounded">
+                    <code className="bg-muted px-1 rounded">
                       {option.choices.join(", ")}
                     </code>
                   </span>
@@ -214,7 +212,7 @@ export const CliCommand: React.FC<CliCommandProps> = ({
                 {option.alias && option.alias.length > 0 && (
                   <span className="mr-3">
                     Alias:{" "}
-                    <code className="bg-gray-100 px-1 rounded">
+                    <code className="bg-muted px-1 rounded">
                       -{option.alias.join(", -")}
                     </code>
                   </span>
@@ -222,7 +220,7 @@ export const CliCommand: React.FC<CliCommandProps> = ({
                 {option.envVar && (
                   <span className="mr-3">
                     Env:{" "}
-                    <code className="bg-gray-100 px-1 rounded">
+                    <code className="bg-muted px-1 rounded">
                       {option.envVar}
                     </code>
                   </span>
@@ -230,7 +228,7 @@ export const CliCommand: React.FC<CliCommandProps> = ({
                 {option.conflicts && option.conflicts.length > 0 && (
                   <span className="mr-3">
                     Conflicts:{" "}
-                    <code className="bg-gray-100 px-1 rounded">
+                    <code className="bg-muted px-1 rounded">
                       --{option.conflicts.join(", --")}
                     </code>
                   </span>
diff --git a/src/CopyPrompt.tsx b/src/CopyPrompt.tsx
index 31a539492..b78bad580 100644
--- a/src/CopyPrompt.tsx
+++ b/src/CopyPrompt.tsx
@@ -65,15 +65,15 @@ export const CopyPrompt = ({ children, src }: CopyPromptProps) => {
   };
 
   return (
-    <div className="relative border border-[#eaecef] rounded-lg overflow-hidden bg-gray-50 dark:bg-gray-800 dark:border-gray-700 my-6">
-      <div className="px-4 py-3 text-sm text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 whitespace-pre-wrap">
+    <div className="relative border border-border rounded-lg overflow-hidden bg-secondary my-6">
+      <div className="px-4 py-3 text-sm text-foreground bg-card whitespace-pre-wrap">
         {displayContent()}
       </div>
-      <div className="px-4 py-2 bg-gray-50 dark:bg-gray-700 border-t border-[#eaecef] dark:border-gray-600 flex justify-end">
+      <div className="px-4 py-2 bg-secondary border-t border-border flex justify-end">
         <button
           onClick={copyToClipboard}
           disabled={loading || !!error}
-          className="flex items-center gap-2 px-3 py-1.5 text-xs font-medium text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white bg-white dark:bg-gray-600 border border-gray-300 dark:border-gray-500 rounded hover:bg-gray-50 dark:hover:bg-gray-500 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+          className="flex items-center gap-2 px-3 py-1.5 text-xs font-medium text-muted-foreground hover:text-foreground bg-card border border-border rounded hover:bg-accent transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
         >
           <CopyIcon size={14} />
           {copied ? "Copied!" : "Copy prompt"}
diff --git a/src/LandingPage.tsx b/src/LandingPage.tsx
index d01d8ce7a..a02560fd6 100644
--- a/src/LandingPage.tsx
+++ b/src/LandingPage.tsx
@@ -42,8 +42,8 @@ const ProductCard = ({
         <CardTitle className="flex flex-col gap-3 text-xl xl:text-2xl font-bold">
           <div
             className={cn(
-              "flex transition-colors rounded-md p-2 w-fit bg-neutral-100 dark:bg-neutral-800",
-              "group-hover:bg-primary/10 group-hover:text-primary group-hover:dark:bg-primary/20",
+              "flex transition-colors rounded-md p-2 w-fit bg-secondary",
+              "group-hover:bg-primary/10 group-hover:text-primary",
             )}
           >
             {icon}
diff --git a/src/ModalScreenshot.tsx b/src/ModalScreenshot.tsx
index 00eea8d5e..4108a33ab 100644
--- a/src/ModalScreenshot.tsx
+++ b/src/ModalScreenshot.tsx
@@ -1,13 +1,6 @@
-import type { CSSProperties, PropsWithChildren, ReactElement } from "react";
+import type { PropsWithChildren, ReactElement } from "react";
 
 interface ModalScreenshotProps {
-  overlayOpacity?: number;
-  overlayBlur?: number;
-  modalPadding?: number;
-  modalBorderRadius?: number;
-  modalShadow?: string;
-  className?: string;
-  style?: CSSProperties;
   size?: "sm" | "md" | "lg";
 }
 
@@ -20,87 +13,17 @@ const marginClasses = {
 export function ModalScreenshot({
   children,
   size,
-  overlayOpacity = 0.3,
-  overlayBlur = 8,
-  modalPadding = 16,
-  modalBorderRadius = 8,
-  modalShadow = "0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 15px rgba(0, 0, 0, 0.1)",
-  className = "",
-  style,
 }: PropsWithChildren<ModalScreenshotProps>): ReactElement {
-  const wrapperStyle: CSSProperties = {
-    position: "relative",
-    display: "block",
-    borderRadius: `${modalBorderRadius}px`,
-    overflow: "hidden",
-    boxShadow: modalShadow,
-    margin: "0 auto",
-    maxWidth: "90%",
-    ...style,
-  };
-
-  const overlayStyle: CSSProperties = {
-    position: "absolute",
-    inset: 0,
-    backgroundColor: `rgba(0, 0, 0, ${overlayOpacity})`,
-    backdropFilter: `blur(${overlayBlur}px)`,
-    WebkitBackdropFilter: `blur(${overlayBlur}px)`,
-    pointerEvents: "none",
-  };
-
-  const imageContainerStyle: CSSProperties = {
-    position: "relative",
-    padding: `${modalPadding}px`,
-    display: "block",
-  };
-
-  const marginClass = size
-    ? marginClasses[size]
-      ? marginClasses[size]
-      : "mx-auto"
-    : "mx-auto";
+  const marginClass = size ? (marginClasses[size] ?? "mx-auto") : "mx-auto";
 
   return (
     <div
       className={`[&>p]:m-0 [&>p]:p-0 [&>p>img]:m-0 [&>p>img]:p-0 my-8 ${marginClass}`}
     >
-      <div
-        className={`modal-screenshot-wrapper ${className}`}
-        style={wrapperStyle}
-      >
-        <style
-          dangerouslySetInnerHTML={{
-            __html: `
-          .modal-screenshot-wrapper img {
-            border: 0 !important;
-            border-radius: 0 !important;
-            padding: 0 !important;
-            margin: 0 !important;
-            display: block !important;
-            max-width: 100% !important;
-            height: auto !important;
-          }
-          .modal-screenshot-wrapper p {
-            margin: 0 !important;
-            padding: 0 !important;
-            line-height: 0 !important;
-          }
-        `,
-          }}
-        />
-        <div style={overlayStyle} />
-        <div style={imageContainerStyle}>
-          <div
-            style={{
-              position: "relative",
-              zIndex: 1,
-              borderRadius: `${modalBorderRadius}px`,
-              overflow: "hidden",
-              boxShadow:
-                "0 10px 25px rgba(0, 0, 0, 0.15), 0 6px 10px rgba(0, 0, 0, 0.1)",
-              border: "1px solid rgba(0, 0, 0, 0.1)",
-            }}
-          >
+      <div className="relative block rounded-lg overflow-hidden shadow-2xl mx-auto max-w-[90%] [&_img]:!border-0 [&_img]:!rounded-none [&_img]:!p-0 [&_img]:!m-0 [&_img]:!block [&_img]:!max-w-full [&_img]:!h-auto [&_p]:!m-0 [&_p]:!p-0 [&_p]:!leading-[0]">
+        <div className="absolute inset-0 backdrop-blur-lg pointer-events-none bg-black/30 dark:bg-white/20" />
+        <div className="relative p-4 block">
+          <div className="relative z-10 rounded-lg overflow-hidden shadow-lg border border-border">
             {children}
           </div>
         </div>
diff --git a/src/TutorialModeSelector.tsx b/src/TutorialModeSelector.tsx
index df2c5c3ef..c4fc9eb6e 100644
--- a/src/TutorialModeSelector.tsx
+++ b/src/TutorialModeSelector.tsx
@@ -8,7 +8,7 @@ interface ModeProps {
   link?: string;
 }
 
-export function TutorialMode({ label }: ModeProps) {
+export function TutorialMode(_props: ModeProps) {
   return null; // This component is only used for passing props
 }
 
@@ -42,14 +42,12 @@ export function TutorialModeSelector({
       {(title || description) && (
         <div className="mb-4">
           {title && (
-            <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">
+            <h2 className="text-xl font-semibold text-foreground mb-2">
               {title}
             </h2>
           )}
           {description && (
-            <p className="text-base text-gray-600 dark:text-gray-400">
-              {description}
-            </p>
+            <p className="text-base text-muted-foreground">{description}</p>
           )}
         </div>
       )}
@@ -57,14 +55,14 @@ export function TutorialModeSelector({
       {/* Combined tab bar and content */}
       <div className="border border-border rounded-lg overflow-hidden">
         {/* Mode selector tabs */}
-        <div className="flex bg-gray-50 dark:bg-gray-800 border-b border-border">
+        <div className="flex bg-secondary border-b border-border">
           {modes.map((mode, index) => {
             const isActive = mode.active;
 
             return isActive ? (
               <div
                 key={index}
-                className="flex-1 flex items-center justify-center gap-2 h-12 text-sm font-medium bg-white dark:bg-gray-900 text-primary border-b-2 border-primary -mb-[1px] transition-all"
+                className="flex-1 flex items-center justify-center gap-2 h-12 text-sm font-medium bg-card text-primary border-b-2 border-primary -mb-[1px] transition-all"
               >
                 {mode.icon && (
                   <span
@@ -80,7 +78,7 @@ export function TutorialModeSelector({
               <Link
                 key={index}
                 to={mode.link!}
-                className="flex-1 flex items-center justify-center gap-2 h-12 text-sm font-medium text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700/50 transition-all"
+                className="flex-1 flex items-center justify-center gap-2 h-12 text-sm font-medium text-muted-foreground hover:text-foreground hover:bg-accent transition-all"
               >
                 {mode.icon && (
                   <span
@@ -98,7 +96,7 @@ export function TutorialModeSelector({
 
         {/* Active mode content */}
         {activeMode && (
-          <div className="bg-white dark:bg-gray-900 p-6">
+          <div className="bg-card p-6">
             <div className="flex items-start gap-3">
               {activeMode.icon && (
                 <span
@@ -109,11 +107,11 @@ export function TutorialModeSelector({
                 </span>
               )}
               <div className="flex-1 min-w-0">
-                <h3 className="font-semibold text-base text-gray-900 dark:text-gray-100 mb-2">
+                <h3 className="font-semibold text-base text-foreground mb-2">
                   {activeMode.label}
                 </h3>
                 {activeMode.description && (
-                  <p className="text-sm leading-relaxed text-gray-600 dark:text-gray-400 m-0">
+                  <p className="text-sm leading-relaxed text-muted-foreground m-0">
                     {activeMode.description}
                   </p>
                 )}
diff --git a/src/components.tsx b/src/components.tsx
index 49afd9a7d..f37058b84 100644
--- a/src/components.tsx
+++ b/src/components.tsx
@@ -52,7 +52,7 @@ export const mdxComponents = {
         <Framed size={props.size}>
           <Image
             {...props}
-            className="border border-[#eaecef] overflow-hidden rounded-sm"
+            className="border border-border overflow-hidden rounded-sm"
           />
         </Framed>
       );
@@ -60,13 +60,13 @@ export const mdxComponents = {
     return (
       <Image
         {...props}
-        className="border border-[#eaecef] overflow-hidden rounded-sm"
+        className="border border-border overflow-hidden rounded-sm"
       />
     );
   },
   Framed,
   CodeType: (props: PropsWithChildren) => (
-    <code className="text-green-600">&lt;{props.children}&gt;</code>
+    <code className="text-primary">&lt;{props.children}&gt;</code>
   ),
   DocusaurusDocsLicense,
   GithubButton,
diff --git a/src/zudoku-env.d.ts b/src/zudoku-env.d.ts
index b29675aeb..facde0eb8 100644
--- a/src/zudoku-env.d.ts
+++ b/src/zudoku-env.d.ts
@@ -13,3 +13,8 @@ declare module "*.jpg" {
   const content: string;
   export default content;
 }
+
+declare module "*.svg" {
+  const content: string;
+  export default content;
+}