diff --git a/src/components/dark-mode-toggle.tsx b/src/components/dark-mode-toggle.tsx
index 571ac0b..5b83a54 100644
--- a/src/components/dark-mode-toggle.tsx
+++ b/src/components/dark-mode-toggle.tsx
@@ -1,9 +1,14 @@
 import { SunIcon, MoonIcon } from '@heroicons/react/24/outline';
-import { useDarkMode } from '../utils/hooks';
+import { useTheme } from '../utils/hooks';
 import classNames from 'classnames';
 
 export function DarkModeToggle() {
-  const { isDark, toggleDarkMode } = useDarkMode();
+  const { isDark, currentTheme, toggleMode } = useTheme();
+  
+  const toggleDarkMode = () => {
+    // Toggle between light and dark variants of current theme family
+    toggleMode();
+  };
 
   return (
     <button
diff --git a/src/components/theme-selector.tsx b/src/components/theme-selector.tsx
new file mode 100644
index 0000000..2947c10
--- /dev/null
+++ b/src/components/theme-selector.tsx
@@ -0,0 +1,163 @@
+import { Fragment } from 'preact';
+import { Listbox, Transition } from '@headlessui/react';
+import { ChevronUpDownIcon, CheckIcon, SwatchIcon, SunIcon, MoonIcon } from '@heroicons/react/24/outline';
+import classNames from 'classnames';
+import { useTheme } from '../utils/hooks';
+
+export function ThemeSelector() {
+  const { currentTheme, setTheme, toggleMode, getThemesByBase } = useTheme();
+  const themesByBase = getThemesByBase();
+
+  const handleThemeChange = (themeId: string) => {
+    setTheme(themeId);
+  };
+
+  const getCurrentBaseTheme = () => {
+    return currentTheme.id.replace('-light', '').replace('-dark', '');
+  };
+
+  return (
+    <div className="flex items-center gap-2">
+      {/* Light/Dark Mode Toggle */}
+      <button
+        onClick={toggleMode}
+        className={classNames(
+          'relative rounded-lg p-2 transition-colors duration-200',
+          'hover:bg-gray-100 dark:hover:bg-gray-800',
+          'focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900'
+        )}
+        title={`Switch to ${currentTheme.mode === 'light' ? 'dark' : 'light'} mode`}
+      >
+        {currentTheme.mode === 'light' ? (
+          <MoonIcon className="h-5 w-5 text-gray-600 dark:text-gray-400" />
+        ) : (
+          <SunIcon className="h-5 w-5 text-gray-600 dark:text-gray-400" />
+        )}
+        <span className="sr-only">Toggle light/dark mode</span>
+      </button>
+
+      {/* Theme Selector */}
+      <Listbox value={getCurrentBaseTheme()} onChange={(baseThemeId) => {
+        const newThemeId = `${baseThemeId}-${currentTheme.mode}`;
+        handleThemeChange(newThemeId);
+      }}>
+        <div className="relative">
+          <Listbox.Button className={classNames(
+            'relative rounded-lg p-2 transition-colors duration-200',
+            'hover:bg-gray-100 dark:hover:bg-gray-800',
+            'focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900',
+            'flex items-center gap-2'
+          )}>
+            <SwatchIcon className="h-5 w-5 text-gray-600 dark:text-gray-400" />
+            <span className="sr-only">Theme selector</span>
+            <ChevronUpDownIcon className="h-4 w-4 text-gray-400" aria-hidden="true" />
+          </Listbox.Button>
+
+          <Transition
+            as={Fragment}
+            leave="transition ease-in duration-100"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
+          >
+            <Listbox.Options className={classNames(
+              'absolute right-0 z-50 mt-1 max-h-60 w-80 overflow-auto rounded-md',
+              'bg-white dark:bg-gray-800 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5',
+              'focus:outline-none sm:text-sm'
+            )}>
+              {Array.from(themesByBase.entries()).map(([baseThemeId, variants]) => {
+                const lightTheme = variants.light;
+                const darkTheme = variants.dark;
+                const displayTheme = currentTheme.mode === 'light' ? lightTheme : darkTheme;
+                
+                if (!displayTheme) return null;
+
+                return (
+                  <Listbox.Option
+                    key={baseThemeId}
+                    className={({ active }) =>
+                      classNames(
+                        'relative cursor-pointer select-none py-3 pl-10 pr-4',
+                        active
+                          ? 'bg-sky-100 dark:bg-sky-900 text-sky-900 dark:text-sky-100'
+                          : 'text-gray-900 dark:text-gray-100'
+                      )
+                    }
+                    value={baseThemeId}
+                  >
+                    {({ selected }) => (
+                      <>
+                        <div className="flex flex-col">
+                          <div className="flex items-center justify-between">
+                            <span className={classNames(
+                              'font-medium',
+                              selected ? 'font-semibold' : 'font-normal'
+                            )}>
+                              {displayTheme.name.replace(' Light', '').replace(' Dark', '')}
+                            </span>
+                            <div className="flex gap-1">
+                              {lightTheme && (
+                                <div className="flex items-center gap-1">
+                                  <SunIcon className="h-3 w-3 text-gray-400" />
+                                  <div className="flex gap-0.5">
+                                    <div 
+                                      className="w-2 h-2 rounded-full border border-gray-300"
+                                      style={{ backgroundColor: lightTheme.colors.bgPrimary }}
+                                    />
+                                    <div 
+                                      className="w-2 h-2 rounded-full border border-gray-300"
+                                      style={{ backgroundColor: lightTheme.colors.textPrimary }}
+                                    />
+                                    <div 
+                                      className="w-2 h-2 rounded-full border border-gray-300"
+                                      style={{ backgroundColor: lightTheme.colors.bgButton }}
+                                    />
+                                  </div>
+                                </div>
+                              )}
+                              {darkTheme && (
+                                <div className="flex items-center gap-1 ml-2">
+                                  <MoonIcon className="h-3 w-3 text-gray-400" />
+                                  <div className="flex gap-0.5">
+                                    <div 
+                                      className="w-2 h-2 rounded-full border border-gray-300"
+                                      style={{ backgroundColor: darkTheme.colors.bgPrimary }}
+                                    />
+                                    <div 
+                                      className="w-2 h-2 rounded-full border border-gray-300"
+                                      style={{ backgroundColor: darkTheme.colors.textPrimary }}
+                                    />
+                                    <div 
+                                      className="w-2 h-2 rounded-full border border-gray-300"
+                                      style={{ backgroundColor: darkTheme.colors.bgButton }}
+                                    />
+                                  </div>
+                                </div>
+                              )}
+                            </div>
+                          </div>
+                          <span className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+                            {displayTheme.description.replace(' (Light mode)', '').replace(' (Dark mode)', '')}
+                          </span>
+                          <div className="flex items-center gap-2 mt-2 text-xs text-gray-400">
+                            <span>Font: {displayTheme.typography.fontFamilyPrimary.split(',')[0].replace(/"/g, '')}</span>
+                            <span>•</span>
+                            <span>Radius: {displayTheme.spacing.radiusMd}</span>
+                          </div>
+                        </div>
+                        {selected ? (
+                          <span className="absolute inset-y-0 left-0 flex items-center pl-3 text-sky-600 dark:text-sky-400">
+                            <CheckIcon className="h-5 w-5" aria-hidden="true" />
+                          </span>
+                        ) : null}
+                      </>
+                    )}
+                  </Listbox.Option>
+                );
+              })}
+            </Listbox.Options>
+          </Transition>
+        </div>
+      </Listbox>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/mdx/api-playground.tsx b/src/mdx/api-playground.tsx
index d5751a1..4e8b3b9 100644
--- a/src/mdx/api-playground.tsx
+++ b/src/mdx/api-playground.tsx
@@ -5,7 +5,7 @@ import { PencilIcon, TrashIcon, XIcon } from 'lucide-react'
 import { useCallback, useEffect, useRef, useState } from 'preact/hooks'
 import { Highlight, themes } from 'prism-react-renderer'
 import Dropdown from '../components/dropdown'
-import { useDarkMode } from '../utils/hooks'
+import { useTheme } from '../utils/hooks'
 import { Fence } from './fence'
 import { Tag } from './tag'
 
@@ -154,8 +154,8 @@ export const HeadersTab = ({ requestConfig, setRequestConfig }: HeadersTabProps)
   return (
     <div className="flex flex-col gap-2 px-2 py-4">
       <div className="flex items-center gap-2 px-2">
-        <span className="text-sm font-medium text-zinc-400 w-32">Key</span>
-        <span className="text-sm font-medium text-zinc-400 flex-1">Value</span>
+        <span className="text-sm font-medium w-32" style={{color: 'var(--theme-text-secondary)'}}>Key</span>
+        <span className="text-sm font-medium flex-1" style={{color: 'var(--theme-text-secondary)'}}>Value</span>
       </div>
       {headersList.map((hdr, idx) => (
         <div key={idx} className="flex items-center gap-2">
@@ -166,37 +166,37 @@ export const HeadersTab = ({ requestConfig, setRequestConfig }: HeadersTabProps)
                 value={hdr.key}
                 onChange={e => updateHeader(idx, 'key', (e.target as HTMLInputElement).value)}
                 placeholder="Header name"
-                className="w-32 rounded-lg bg-zinc-800 border border-zinc-600 px-2 py-1 text-sm text-white"
+                className="w-32 rounded-lg api-playground-input px-2 py-1 text-sm"
               />
               <Input
                 type="text"
                 value={hdr.value}
                 onChange={e => updateHeader(idx, 'value', (e.target as HTMLInputElement).value)}
                 placeholder="Header value"
-                className="flex-1 rounded-lg bg-zinc-800 border border-zinc-600 px-2 py-1 text-sm text-white"
+                className="flex-1 rounded-lg api-playground-input px-2 py-1 text-sm"
               />
-              <button onClick={() => saveHeader(idx)} className="text-white">
+              <button onClick={() => saveHeader(idx)} style={{color: 'var(--theme-text-primary)'}}>
                 <CheckIcon className="w-4 h-4" />
               </button>
-              <button onClick={() => cancelEdit(idx)} className="text-white">
+              <button onClick={() => cancelEdit(idx)} style={{color: 'var(--theme-text-primary)'}}>
                 <XIcon className="w-4 h-4" />
               </button>
             </>
           ) : (
             <>
-              <span className="text-sm text-white w-32 truncate">{hdr.key}</span>
-              <span className="text-sm text-white flex-1 truncate">{hdr.value}</span>
-              <button onClick={() => editHeader(idx)} className="text-white">
+              <span className="text-sm w-32 truncate" style={{color: 'var(--theme-text-primary)'}}>{hdr.key}</span>
+              <span className="text-sm flex-1 truncate" style={{color: 'var(--theme-text-primary)'}}>{hdr.value}</span>
+              <button onClick={() => editHeader(idx)} style={{color: 'var(--theme-text-primary)'}}>
                 <PencilIcon className="w-4 h-4" />
               </button>
-              <button onClick={() => removeHeader(idx)} className="text-red-400">
+              <button onClick={() => removeHeader(idx)} style={{color: 'var(--theme-text-error)'}}>
                 <TrashIcon className="w-4 h-4" />
               </button>
             </>
           )}
         </div>
       ))}
-      <button onClick={addEmptyHeaderRow} className="text-sm text-sky-400 hover:text-sky-300 mt-2 w-fit">
+      <button onClick={addEmptyHeaderRow} className="text-sm mt-2 w-fit" style={{color: 'var(--theme-text-accent)'}}>
         + Add Header
       </button>
     </div>
@@ -274,37 +274,37 @@ export const ParamsTab = ({ queryParams, setQueryParams }: ParamsTabProps) => {
   return (
     <div className="flex flex-col gap-2 px-2 py-4">
       <div className="flex items-center gap-2">
-        <span className="text-sm font-medium text-zinc-400 w-32">Name</span>
-        <span className="text-sm font-medium text-zinc-400 flex-1">Value</span>
+        <span className="text-sm font-medium w-32" style={{color: 'var(--theme-text-secondary)'}}>Name</span>
+        <span className="text-sm font-medium flex-1" style={{color: 'var(--theme-text-secondary)'}}>Value</span>
       </div>
       {paramsList.map((p, i) => (
         <div key={i} className="flex items-center gap-2">
           {p.isEditing ? (
             <>
-              <Input value={p.name} onChange={e => updateParam(i, 'name', (e.target as HTMLInputElement).value)} placeholder="Param name" className="w-32 rounded-lg bg-zinc-800 border border-zinc-600 px-2 py-1 text-sm text-white" />
-              <Input value={p.value} onChange={e => updateParam(i, 'value', (e.target as HTMLInputElement).value)} placeholder="Param value" className="flex-1 rounded-lg bg-zinc-800 border border-zinc-600 px-2 py-1 text-sm text-white" />
-              <button onClick={() => saveParam(i)} className="text-white">
+              <Input value={p.name} onChange={e => updateParam(i, 'name', (e.target as HTMLInputElement).value)} placeholder="Param name" className="w-32 rounded-lg api-playground-input px-2 py-1 text-sm" />
+              <Input value={p.value} onChange={e => updateParam(i, 'value', (e.target as HTMLInputElement).value)} placeholder="Param value" className="flex-1 rounded-lg api-playground-input px-2 py-1 text-sm" />
+              <button onClick={() => saveParam(i)} style={{color: 'var(--theme-text-primary)'}}>
                 <CheckIcon className="w-4 h-4" />
               </button>
-              <button onClick={() => cancelEdit(i)} className="text-white">
+              <button onClick={() => cancelEdit(i)} style={{color: 'var(--theme-text-primary)'}}>
                 <XIcon className="w-4 h-4" />
               </button>
             </>
           ) : (
             <>
-              <span className="w-32 truncate text-sm text-white">{p.name}</span>
-              <span className="flex-1 truncate text-sm text-white">{p.value}</span>
-              <button onClick={() => editParam(i)} className="text-white">
+              <span className="w-32 truncate text-sm" style={{color: 'var(--theme-text-primary)'}}>{p.name}</span>
+              <span className="flex-1 truncate text-sm" style={{color: 'var(--theme-text-primary)'}}>{p.value}</span>
+              <button onClick={() => editParam(i)} style={{color: 'var(--theme-text-primary)'}}>
                 <PencilIcon className="w-4 h-4" />
               </button>
-              <button onClick={() => removeParam(i)} className="text-red-400">
+              <button onClick={() => removeParam(i)} style={{color: 'var(--theme-text-error)'}}>
                 <TrashIcon className="w-4 h-4" />
               </button>
             </>
           )}
         </div>
       ))}
-      <button onClick={addParamRow} className="mt-2 text-sm text-sky-400 hover:text-sky-300 self-start">
+      <button onClick={addParamRow} className="mt-2 text-sm self-start" style={{color: 'var(--theme-text-accent)'}}>
         + Add Parameter
       </button>
     </div>
@@ -327,7 +327,7 @@ export function APIPlayground({
   const [isLoading, setIsLoading] = useState(false)
   const [response, setResponse] = useState<ResponseData | null>(null)
   const [error, setError] = useState<string | null>(null)
-  const { isDark } = useDarkMode();
+  const { isDark } = useTheme();
   const [selectedServer, setSelectedServer] = useState<Server | null>(servers?.[0] || null)
   
   // Request configuration state
@@ -428,12 +428,12 @@ export function APIPlayground({
   ]
 
   return (
-    <div className="my-6 overflow-hidden rounded-2xl">
+    <div className="my-6 overflow-hidden rounded-2xl api-playground">
       {/* Header */}
-      <div className="flex min-h-[calc(--spacing(12)+1px)] flex-wrap items-start gap-x-4 border-b border-zinc-700 bg-zinc-800 px-4 dark:border-zinc-800 dark:bg-transparent pb-4">
+      <div className="flex min-h-[calc(--spacing(12)+1px)] flex-wrap items-start gap-x-4 api-playground-panel px-4 pb-4">
         <div className="flex items-center gap-3 pt-3">
           <Tag variant="small">{method.toUpperCase()}</Tag>
-          <span className="font-mono text-sm text-white">{title || url}</span>
+          <span className="font-mono text-sm" style={{color: 'var(--theme-text-primary)'}}>{title || url}</span>
         </div>
         <button
           onClick={executeRequest}
@@ -441,8 +441,8 @@ export function APIPlayground({
           className={classNames(
             'ml-auto mt-3 flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition',
             isLoading
-              ? 'bg-zinc-600 text-zinc-400 cursor-not-allowed'
-              : 'bg-sky-600 text-white hover:bg-sky-700'
+              ? 'opacity-50 cursor-not-allowed api-playground-button'
+              : 'api-playground-button'
           )}
         >
           {isLoading ? (
@@ -455,14 +455,14 @@ export function APIPlayground({
       </div>
 
       {description && (
-        <div className="px-4 py-3 border-b border-zinc-700 dark:border-zinc-800">
-          <p className="text-sm text-zinc-300">{description}</p>
+        <div className="px-4 py-3 api-playground-panel">
+          <p className="text-sm" style={{color: 'var(--theme-text-secondary)'}}>{description}</p>
         </div>
       )}
 
       <div className="flex flex-col gap-4">
         <div className="flex flex-col gap-2">
-          <label className="text-sm font-medium text-white">Server</label>
+          <label className="text-sm font-medium" style={{color: 'var(--theme-text-primary)'}}>Server</label>
           <Dropdown
             buttonLabel={selectedServer?.description || 'Select Server'}
             items={servers.map(server => ({ label: server.description || server.url, onClick: () => setSelectedServer(server) }))}
@@ -471,18 +471,18 @@ export function APIPlayground({
         </div>
 
         {/* Request Configuration */}
-        <div className="flex-1 border-r border-zinc-700 dark:border-zinc-800">
+        <div className="flex-1 api-playground-panel">
           <TabGroup selectedIndex={selectedTab} onChange={setSelectedTab}>
-            <TabList className="flex border-b border-zinc-700 dark:border-zinc-800">
+            <TabList className="flex api-playground-panel">
               {tabs.map((tab) => (
                 <Tab
                   key={tab.key}
                   className={({ selected }) =>
                     classNames(
-                      'px-4 py-3 text-sm font-medium transition border-b-2',
+                      'px-4 py-3 text-sm font-medium transition border-b-2 api-playground-tab',
                       selected
-                        ? 'border-sky-500 text-sky-400'
-                        : 'border-transparent text-zinc-400 hover:text-zinc-300'
+                        ? 'active'
+                        : ''
                     )
                   }
                 >
@@ -510,7 +510,7 @@ export function APIPlayground({
               <TabPanel className="p-4">
                 {['POST', 'PUT', 'PATCH'].includes(method.toUpperCase()) ? (
                   <div className="flex flex-col space-y-2">
-                    <label className="text-sm font-medium text-white">Request Body (JSON)</label>
+                    <label className="text-sm font-medium" style={{color: 'var(--theme-text-primary)'}}>Request Body (JSON)</label>
                     <Highlight
                       code={requestConfig.body || ''}
                       language="json"
@@ -521,21 +521,21 @@ export function APIPlayground({
                           onChange={(e) => setRequestConfig(prev => ({ ...prev, body: (e.target as HTMLTextAreaElement).value }))}
                           placeholder="Enter JSON body..."
                           rows={8}
-                          className={`w-full rounded-lg bg-zinc-800 border border-zinc-600 px-3 py-2 text-sm text-white placeholder-zinc-400 focus:border-sky-500 focus:outline-none font-mono ${className}`}
+                          className={`w-full rounded-lg api-playground-input px-3 py-2 text-sm font-mono ${className}`}
                           style={style}
                         />
                       )}
                     </Highlight>
                   </div>
                 ) : (
-                  <p className="text-sm text-zinc-400">Request body not applicable for {method.toUpperCase()} requests.</p>
+                  <p className="text-sm" style={{color: 'var(--theme-text-secondary)'}}>Request body not applicable for {method.toUpperCase()} requests.</p>
                 )}
               </TabPanel>
 
               {/* Auth Tab */}
               <TabPanel className="p-4 space-y-4">
                 <div className="flex flex-col space-y-2">
-                  <label className="text-sm font-medium text-white">Authentication Type</label>
+                  <label className="text-sm font-medium" style={{color: 'var(--theme-text-primary)'}}>Authentication Type</label>
                   <Dropdown
                     buttonLabel={auth.type === 'none' ? 'Select Auth Type' : auth.type.charAt(0).toUpperCase() + auth.type.slice(1)}
                     items={[
@@ -550,26 +550,26 @@ export function APIPlayground({
 
                 {auth.type === 'bearer' && (
                   <div className="space-y-2">
-                    <label className="text-sm font-medium text-white">Bearer Token</label>
+                    <label className="text-sm font-medium" style={{color: 'var(--theme-text-primary)'}}>Bearer Token</label>
                     <input
                       type="password"
                       value={auth.token}
                       onChange={(e) => setAuth(prev => ({ ...prev, token: (e.target as HTMLInputElement).value }))}
                       placeholder="Enter bearer token..."
-                      className="w-full rounded-lg bg-zinc-800 border border-zinc-600 px-3 py-2 text-sm text-white placeholder-zinc-400 focus:border-sky-500 focus:outline-none"
+                      className="w-full rounded-lg api-playground-input px-3 py-2 text-sm"
                     />
                   </div>
                 )}
 
                 {auth.type === 'apiKey' && (
                   <div className="space-y-2">
-                    <label className="text-sm font-medium text-white">API Key</label>
+                    <label className="text-sm font-medium" style={{color: 'var(--theme-text-primary)'}}>API Key</label>
                     <input
                       type="password"
                       value={auth.apiKey}
                       onChange={(e) => setAuth(prev => ({ ...prev, apiKey: (e.target as HTMLInputElement).value }))}
                       placeholder="Enter API key..."
-                      className="w-full rounded-lg bg-zinc-800 border border-zinc-600 px-3 py-2 text-sm text-white placeholder-zinc-400 focus:border-sky-500 focus:outline-none"
+                      className="w-full rounded-lg api-playground-input px-3 py-2 text-sm"
                     />
                   </div>
                 )}
@@ -577,23 +577,23 @@ export function APIPlayground({
                 {auth.type === 'basic' && (
                   <div className="space-y-4">
                     <div className="space-y-2">
-                      <label className="text-sm font-medium text-white">Username</label>
+                      <label className="text-sm font-medium" style={{color: 'var(--theme-text-primary)'}}>Username</label>
                       <input
                         type="text"
                         value={auth.username}
                         onChange={(e) => setAuth(prev => ({ ...prev, username: (e.target as HTMLInputElement).value }))}
                         placeholder="Enter username..."
-                        className="w-full rounded-lg bg-zinc-800 border border-zinc-600 px-3 py-2 text-sm text-white placeholder-zinc-400 focus:border-sky-500 focus:outline-none"
+                        className="w-full rounded-lg api-playground-input px-3 py-2 text-sm"
                       />
                     </div>
                     <div className="space-y-2">
-                      <label className="text-sm font-medium text-white">Password</label>
+                      <label className="text-sm font-medium" style={{color: 'var(--theme-text-primary)'}}>Password</label>
                       <input
                         type="password"
                         value={auth.password}
                         onChange={(e) => setAuth(prev => ({ ...prev, password: (e.target as HTMLInputElement).value }))}
                         placeholder="Enter password..."
-                        className="w-full rounded-lg bg-zinc-800 border border-zinc-600 px-3 py-2 text-sm text-white placeholder-zinc-400 focus:border-sky-500 focus:outline-none"
+                        className="w-full rounded-lg api-playground-input px-3 py-2 text-sm"
                       />
                     </div>
                   </div>
@@ -605,8 +605,8 @@ export function APIPlayground({
 
         {/* Response */}
         <div className="flex-1">
-          <div className="border-b border-zinc-700 dark:border-zinc-800 px-4 py-3">
-            <h3 className="text-sm font-semibold text-white">Response</h3>
+          <div className="api-playground-panel px-4 py-3">
+            <h3 className="text-sm font-semibold" style={{color: 'var(--theme-text-primary)'}}>Response</h3>
           </div>
           
           <div className="p-4">
@@ -627,18 +627,18 @@ export function APIPlayground({
                   <span className={classNames(
                     'inline-flex items-center rounded-full px-2 py-1 text-xs font-medium ring-1 ring-inset',
                     response.status >= 200 && response.status < 300
-                      ? 'bg-sky-500/10 text-sky-400 ring-sky-500/20'
+                      ? 'bg-success text-success'
                       : response.status >= 400
-                      ? 'bg-rose-500/10 text-rose-400 ring-rose-500/20'
-                      : 'bg-yellow-500/10 text-yellow-400 ring-yellow-500/20'
+                      ? 'bg-error text-error'
+                      : 'bg-warning text-warning'
                   )}>
                     {response.status} {response.statusText}
                   </span>
-                  <span className="text-xs text-zinc-400">{response.duration}ms</span>
+                  <span className="text-xs" style={{color: 'var(--theme-text-secondary)'}}>{response.duration}ms</span>
                 </div>
 
                 <div className="space-y-2">
-                  <h4 className="text-sm font-medium text-white">Response Body</h4>
+                  <h4 className="text-sm font-medium" style={{color: 'var(--theme-text-primary)'}}>Response Body</h4>
                   <Fence language="json">
                     {typeof response.data === 'string' 
                       ? response.data 
@@ -648,12 +648,12 @@ export function APIPlayground({
                 </div>
 
                 <div className="space-y-2">
-                  <h4 className="text-sm font-medium text-white">Response Headers</h4>
+                  <h4 className="text-sm font-medium" style={{color: 'var(--theme-text-primary)'}}>Response Headers</h4>
                   <div className="space-y-1">
                     {Object.entries(response.headers).map(([key, value]) => (
                       <div key={key} className="flex text-xs">
-                        <span className="text-zinc-400 w-32">{key}:</span>
-                        <span className="text-zinc-300">{value}</span>
+                        <span className="w-32" style={{color: 'var(--theme-text-secondary)'}}>{key}:</span>
+                        <span style={{color: 'var(--theme-text-primary)'}}>{value}</span>
                       </div>
                     ))}
                   </div>
@@ -661,7 +661,7 @@ export function APIPlayground({
               </div>
             ) : (
               <div className="text-center py-8">
-                <div className="text-zinc-400 text-sm">
+                <div className="text-sm" style={{color: 'var(--theme-text-secondary)'}}>
                   Click "Send Request" to see the response
                 </div>
               </div>
diff --git a/src/mdx/open-api.tsx b/src/mdx/open-api.tsx
index 9711a4b..efdd27c 100644
--- a/src/mdx/open-api.tsx
+++ b/src/mdx/open-api.tsx
@@ -169,7 +169,7 @@ export function OpenAPI({ openAPIJson, method: selectedMethod, path: selectedPat
   }
 
   return (
-    <div className="max-w-none w-full">
+    <div className="max-w-none w-full openapi-component">
       {
         showPlayground &&
         <motion.div
@@ -177,14 +177,15 @@ export function OpenAPI({ openAPIJson, method: selectedMethod, path: selectedPat
           animate={{ x: 0 }}
           exit={{ x: "100%" }}
           transition={{ type: "spring", damping: 20 }}
-          className="fixed inset-y-0 right-0 w-full max-w-3xl bg-white dark:bg-[#1e1e1e] shadow-xl z-50 overflow-y-auto border-l border-zinc-200 dark:border-zinc-800"
+          className="fixed inset-y-0 right-0 w-full max-w-3xl shadow-xl z-50 overflow-y-auto openapi-panel"
         >
           <div className="p-6">
             <div className="flex justify-between items-center mb-6">
               <h2 className="text-xl font-semibold">API Playground</h2>
               <button
                 onClick={() => setShowPlayground(false)}
-                className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+                className="transition-colors"
+                style={{color: 'var(--theme-text-secondary)'}}
               >
                 <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
@@ -295,7 +296,7 @@ export function OpenAPI({ openAPIJson, method: selectedMethod, path: selectedPat
                 <Col sticky>
                   <button
                     onClick={handleShowPlayground}
-                    className='ml-auto mt-3 flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition bg-sky-600 text-white hover:bg-sky-700'>
+                    className='ml-auto mt-3 flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition api-playground-button'>
                       Try
                     <PlayButton className="h-4 w-4" />
                   </button>
diff --git a/src/theme.scss b/src/theme.scss
index c65c258..c430085 100644
--- a/src/theme.scss
+++ b/src/theme.scss
@@ -1,121 +1,427 @@
 
+/* ========================================
+   Dory Theme System - CSS Custom Properties
+   ======================================== */
+
+/* Apply theme colors using CSS custom properties */
 html {
-  background-color: #ffffff !important;
+  background-color: var(--theme-bg-primary) !important;
+}
+
+/* Typography theming */
+body {
+  font-family: var(--theme-font-family-primary) !important;
+  font-size: var(--theme-font-size-md) !important;
+  font-weight: var(--theme-font-weight-normal) !important;
+  line-height: var(--theme-line-height-normal) !important;
+  transition: var(--theme-transition-normal) !important;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  color: var(--theme-text-primary) !important;
+  font-family: var(--theme-font-family-primary) !important;
+  font-weight: var(--theme-font-weight-semibold) !important;
+  line-height: var(--theme-line-height-tight) !important;
+}
+
+h1 {
+  font-size: var(--theme-font-size-3xl) !important;
+  font-weight: var(--theme-font-weight-bold) !important;
+}
+
+h2 {
+  font-size: var(--theme-font-size-2xl) !important;
+}
+
+h3 {
+  font-size: var(--theme-font-size-xl) !important;
+}
+
+h4 {
+  font-size: var(--theme-font-size-lg) !important;
+}
+
+h5, h6 {
+  font-size: var(--theme-font-size-md) !important;
+}
+
+p, li, span {
+  color: var(--theme-text-primary) !important;
+  line-height: var(--theme-line-height-normal) !important;
 }
 
-h1, h2, h3, h4, h5, h6, p, li {
-  color: #000000 !important;
+/* Code and preformatted text */
+code, pre, .code {
+  font-family: var(--theme-font-family-mono) !important;
+  font-size: var(--theme-font-size-sm) !important;
 }
 
+/* Spacing and layout theming */
+.container, .content, .section {
+  padding: var(--theme-space-lg) !important;
+}
+
+.btn, button {
+  padding: var(--theme-space-sm) var(--theme-space-md) !important;
+  border-radius: var(--theme-radius-md) !important;
+  font-weight: var(--theme-font-weight-medium) !important;
+  transition: var(--theme-transition-fast) !important;
+  box-shadow: var(--theme-shadow-sm) !important;
+}
+
+.btn:hover, button:hover {
+  box-shadow: var(--theme-shadow-md) !important;
+}
+
+/* Cards and panels */
+.card, .panel {
+  border-radius: var(--theme-radius-lg) !important;
+  box-shadow: var(--theme-shadow-md) !important;
+  padding: var(--theme-space-lg) !important;
+  margin-bottom: var(--theme-space-md) !important;
+}
+
+/* Input fields */
+input, textarea, select {
+  border-radius: var(--theme-radius-sm) !important;
+  padding: var(--theme-space-sm) var(--theme-space-md) !important;
+  font-family: var(--theme-font-family-primary) !important;
+  font-size: var(--theme-font-size-md) !important;
+  transition: var(--theme-transition-fast) !important;
+}
+
+/* ========================================
+   Mermaid Diagram Theming
+   ======================================== */
 .mermaid {
-  background-color: #ffffff !important;
-  color: #000000 !important;
+  background-color: var(--theme-mermaid-bg) !important;
+  color: var(--theme-mermaid-text) !important;
   font-size: 12px !important;
 }
 
 /* Nodes */
 .mermaid .node rect {
-  fill: #f0f0f0 !important;
-  stroke: #333333 !important;
+  fill: var(--theme-mermaid-node) !important;
+  stroke: var(--theme-mermaid-node-border) !important;
   stroke-width: 1px !important;
 }
 .mermaid .nodes p {
-  color: #000000 !important;
+  color: var(--theme-mermaid-text) !important;
 }
 
 /* Edges */
 .mermaid .edgePaths path {
-  stroke: #555555 !important;
+  stroke: var(--theme-mermaid-edge) !important;
   stroke-width: 1.5px !important;
 }
 .mermaid .edgeLabel {
-  color: unset !important;
+  color: var(--theme-mermaid-text) !important;
 }
 
 /* Clusters */
 .mermaid .cluster rect {
-  fill: #f8f8f8 !important;
-  stroke: #999999 !important;
+  fill: var(--theme-mermaid-cluster) !important;
+  stroke: var(--theme-border-secondary) !important;
   stroke-width: 0px !important;
 }
 
 .mermaid .cluster p {
-  fill: #000000 !important;
+  fill: var(--theme-mermaid-text) !important;
 }
 
 /* Notes */
 .mermaid .note {
-  fill: #ffffcc !important;
-  stroke: #999999 !important;
-  color: #000000 !important;
+  fill: var(--theme-mermaid-note) !important;
+  stroke: var(--theme-border-secondary) !important;
+  color: var(--theme-mermaid-text) !important;
 }
 
+/* ========================================
+   Code Block Theming
+   ======================================== */
 .docucod-mdx-code {
-    background-color: #f8f8f8 !important;
-}
-
-body.dark {
-    background-color: #1e1e1e !important;
-
-  #container {
-    background-color: #1e1e1e !important;
-  }
-
-  h1, h2, h3, h4, h5, h6, p, li, th, td {
-    color: #ffffff !important;
-  }
-
-  .mermaid {
-    background-color: #1e1e1e !important; 
-    color: #ffffff !important;
-  }
-  
-  .mermaid .node rect {
-    fill: #333333 !important;
-    stroke: #aaaaaa !important;
-  }
-  
-  .mermaid .nodeLabel p {
-    color: #ffffff !important;
-  }
-  
-  .mermaid .edgePaths path {
-    stroke: #cccccc !important;
-  }
-  
-  .mermaid .edgeLabel p {
-    background-color: #2a2a2a !important;
-    color: #ffffff !important;
-  }
-  
-  .mermaid .cluster rect {
-    fill: #2a2a2a !important;
-    stroke: #444444 !important;
-  }
-
-  .mermaid .cluster p {
-    color: #ffffff !important;
-  }
-  
-  .mermaid .note {
-    fill: #2a2a2a !important;
-    stroke: #444444 !important;
-    color: #ffffff !important;
-  }
-  
-  .docucod-mdx-code {
-      background-color: #2a2a2a !important;
-  }
-
-  .docucod-mdx-code-group {
-    background-color: #2a2a2a !important;
-  }
-
-  .docucod-mdx-code-group-header {
-      background-color: #2a2a2a !important;
-  }
-
-  .prism-code {
-    background-color: transparent !important;
-  }
+  background-color: var(--theme-bg-code) !important;
+}
+
+.docucod-mdx-code-group {
+  background-color: var(--theme-bg-code) !important;
+}
+
+.docucod-mdx-code-group-header {
+  background-color: var(--theme-bg-code) !important;
+}
+
+.prism-code {
+  background-color: transparent !important;
+}
+
+/* ========================================
+   API Playground Theming
+   ======================================== */
+.api-playground {
+  background-color: var(--theme-playground-bg) !important;
+  color: var(--theme-text-primary) !important;
+}
+
+.api-playground-panel {
+  background-color: var(--theme-playground-panel) !important;
+  border-color: var(--theme-border-primary) !important;
+}
+
+.api-playground-input {
+  background-color: var(--theme-playground-input) !important;
+  border-color: var(--theme-border-primary) !important;
+  color: var(--theme-text-primary) !important;
+}
+
+.api-playground-input:focus {
+  border-color: var(--theme-border-accent) !important;
+}
+
+.api-playground-button {
+  background-color: var(--theme-playground-button) !important;
+  color: var(--theme-text-button) !important;
+}
+
+.api-playground-button:hover {
+  background-color: var(--theme-playground-button-hover) !important;
+}
+
+.api-playground-tab {
+  background-color: var(--theme-playground-tab) !important;
+  color: var(--theme-text-secondary) !important;
+  border-color: var(--theme-border-secondary) !important;
+}
+
+.api-playground-tab:hover {
+  background-color: var(--theme-playground-tab-hover) !important;
+  color: var(--theme-text-primary) !important;
+}
+
+.api-playground-tab.active {
+  background-color: var(--theme-playground-tab-active) !important;
+  color: var(--theme-text-button) !important;
+  border-color: var(--theme-border-accent) !important;
+}
+
+/* ========================================
+   OpenAPI Component Theming
+   ======================================== */
+.openapi-component {
+  background-color: var(--theme-api-bg) !important;
+  color: var(--theme-text-primary) !important;
+}
+
+.openapi-panel {
+  background-color: var(--theme-api-panel) !important;
+  border-color: var(--theme-border-primary) !important;
+}
+
+.openapi-header {
+  background-color: var(--theme-api-header) !important;
+  color: var(--theme-text-primary) !important;
+}
+
+.openapi-method {
+  color: var(--theme-api-method) !important;
+}
+
+.openapi-path {
+  color: var(--theme-api-path) !important;
+}
+
+/* ========================================
+   Generic Component Theming
+   ======================================== */
+.btn-primary {
+  background-color: var(--theme-bg-button) !important;
+  color: var(--theme-text-button) !important;
+  border-color: var(--theme-border-accent) !important;
+}
+
+.btn-primary:hover {
+  background-color: var(--theme-bg-button-hover) !important;
+}
+
+.btn-primary:focus {
+  box-shadow: 0 0 0 3px var(--theme-focus-ring) !important;
+}
+
+.bg-error {
+  background-color: var(--theme-bg-error) !important;
+  color: var(--theme-text-error) !important;
+}
+
+.bg-success {
+  background-color: var(--theme-bg-success) !important;
+  color: var(--theme-text-success) !important;
+}
+
+.bg-warning {
+  background-color: var(--theme-bg-warning) !important;
+  color: var(--theme-text-warning) !important;
+}
+
+.text-error {
+  color: var(--theme-text-error) !important;
+}
+
+.text-success {
+  color: var(--theme-text-success) !important;
+}
+
+.text-warning {
+  color: var(--theme-text-warning) !important;
+}
+
+.border-error {
+  border-color: var(--theme-border-error) !important;
+}
+
+.border-success {
+  border-color: var(--theme-border-success) !important;
+}
+
+.border-warning {
+  border-color: var(--theme-border-warning) !important;
+}
+
+/* ========================================
+   Legacy Dark Mode Support (for compatibility)
+   ======================================== */
+body.dark #container {
+  background-color: var(--theme-bg-primary) !important;
+}
+
+body.dark th, 
+body.dark td {
+  color: var(--theme-text-primary) !important;
+}
+
+/* ========================================
+   Theme-specific Customizations
+   ======================================== */
+
+/* Cyberpunk theme specific glowing effects */
+body.theme-cyberpunk .api-playground-button,
+body.theme-cyberpunk .btn-primary,
+body.theme-cyberpunk .btn {
+  box-shadow: var(--theme-shadow-md) !important;
+  text-transform: uppercase !important;
+  letter-spacing: 0.05em !important;
+  font-family: var(--theme-font-family-mono) !important;
+}
+
+body.theme-cyberpunk .api-playground-button:hover,
+body.theme-cyberpunk .btn-primary:hover,
+body.theme-cyberpunk .btn:hover {
+  box-shadow: var(--theme-shadow-lg) !important;
+  transform: translateY(-1px) !important;
+}
+
+body.theme-cyberpunk h1,
+body.theme-cyberpunk h2,
+body.theme-cyberpunk h3 {
+  font-family: var(--theme-font-family-mono) !important;
+  text-transform: uppercase !important;
+  letter-spacing: 0.1em !important;
+}
+
+/* Corporate theme specific professional styling */
+body.theme-corporate {
+  letter-spacing: 0.01em !important;
+}
+
+body.theme-corporate h1,
+body.theme-corporate h2,
+body.theme-corporate h3 {
+  font-weight: var(--theme-font-weight-semibold) !important;
+}
+
+body.theme-corporate .btn,
+body.theme-corporate button {
+  font-weight: var(--theme-font-weight-medium) !important;
+  text-transform: none !important;
+}
+
+/* Minimal theme specific clean styling */
+body.theme-minimal {
+  font-weight: var(--theme-font-weight-normal) !important;
+}
+
+body.theme-minimal h1,
+body.theme-minimal h2,
+body.theme-minimal h3 {
+  font-weight: var(--theme-font-weight-medium) !important;
+}
+
+body.theme-minimal .btn,
+body.theme-minimal button {
+  box-shadow: none !important;
+  border: 1px solid var(--theme-border-primary) !important;
+}
+
+body.theme-minimal .btn:hover,
+body.theme-minimal button:hover {
+  box-shadow: var(--theme-shadow-sm) !important;
+}
+
+/* Sepia theme specific text styling */
+body.theme-sepia {
+  font-family: var(--theme-font-family-primary) !important;
+  line-height: var(--theme-line-height-relaxed) !important;
+}
+
+body.theme-sepia h1, 
+body.theme-sepia h2, 
+body.theme-sepia h3 {
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
+  font-family: var(--theme-font-family-primary) !important;
+}
+
+body.theme-sepia p,
+body.theme-sepia li {
+  line-height: var(--theme-line-height-relaxed) !important;
+}
+
+/* Nord theme specific styles */
+body.theme-nord .mermaid .node rect {
+  border-radius: var(--theme-radius-sm) !important;
+}
+
+body.theme-nord .card,
+body.theme-nord .panel {
+  border-radius: var(--theme-radius-sm) !important;
+}
+
+/* Ocean theme specific wave effects */
+body.theme-ocean .api-playground-panel {
+  background: linear-gradient(135deg, var(--theme-playground-panel) 0%, var(--theme-bg-secondary) 100%) !important;
+}
+
+body.theme-ocean .card,
+body.theme-ocean .panel {
+  background: linear-gradient(135deg, var(--theme-bg-secondary) 0%, var(--theme-bg-tertiary) 100%) !important;
+}
+
+/* Forest theme specific organic styling */
+body.theme-forest .btn,
+body.theme-forest button {
+  border-radius: var(--theme-radius-lg) !important;
+}
+
+body.theme-forest .card,
+body.theme-forest .panel {
+  border-radius: var(--theme-radius-xl) !important;
+}
+
+/* Sunset theme specific warm styling */
+body.theme-sunset .btn,
+body.theme-sunset button {
+  background: linear-gradient(135deg, var(--theme-bg-button) 0%, var(--theme-bg-button-hover) 100%) !important;
+}
+
+body.theme-sunset .card,
+body.theme-sunset .panel {
+  background: linear-gradient(135deg, var(--theme-bg-secondary) 0%, var(--theme-bg-tertiary) 100%) !important;
 }
\ No newline at end of file
diff --git a/src/themes/theme-config.ts b/src/themes/theme-config.ts
new file mode 100644
index 0000000..d417343
--- /dev/null
+++ b/src/themes/theme-config.ts
@@ -0,0 +1,1420 @@
+export interface ThemeColors {
+  // Background colors
+  bgPrimary: string;
+  bgSecondary: string;
+  bgTertiary: string;
+  bgCode: string;
+  bgButton: string;
+  bgButtonHover: string;
+  bgAccent: string;
+  bgError: string;
+  bgSuccess: string;
+  bgWarning: string;
+  
+  // Text colors
+  textPrimary: string;
+  textSecondary: string;
+  textTertiary: string;
+  textAccent: string;
+  textButton: string;
+  textError: string;
+  textSuccess: string;
+  textWarning: string;
+  
+  // Border colors
+  borderPrimary: string;
+  borderSecondary: string;
+  borderAccent: string;
+  borderError: string;
+  borderSuccess: string;
+  borderWarning: string;
+  
+  // Interactive colors
+  linkPrimary: string;
+  linkHover: string;
+  focusRing: string;
+  
+  // Component specific colors
+  playgroundBg: string;
+  playgroundPanel: string;
+  playgroundInput: string;
+  playgroundButton: string;
+  playgroundButtonHover: string;
+  playgroundTab: string;
+  playgroundTabActive: string;
+  playgroundTabHover: string;
+  
+  // API colors
+  apiBg: string;
+  apiPanel: string;
+  apiHeader: string;
+  apiMethod: string;
+  apiPath: string;
+  
+  // Mermaid colors
+  mermaidBg: string;
+  mermaidNode: string;
+  mermaidNodeBorder: string;
+  mermaidText: string;
+  mermaidEdge: string;
+  mermaidCluster: string;
+  mermaidNote: string;
+}
+
+export interface ThemeTypography {
+  // Font families
+  fontFamilyPrimary: string;
+  fontFamilySecondary: string;
+  fontFamilyMono: string;
+  
+  // Font sizes
+  fontSizeXs: string;
+  fontSizeSm: string;
+  fontSizeMd: string;
+  fontSizeLg: string;
+  fontSizeXl: string;
+  fontSize2xl: string;
+  fontSize3xl: string;
+  
+  // Font weights
+  fontWeightNormal: string;
+  fontWeightMedium: string;
+  fontWeightSemibold: string;
+  fontWeightBold: string;
+  
+  // Line heights
+  lineHeightTight: string;
+  lineHeightNormal: string;
+  lineHeightRelaxed: string;
+}
+
+export interface ThemeSpacing {
+  // Spacing scale
+  spaceXs: string;
+  spaceSm: string;
+  spaceMd: string;
+  spaceLg: string;
+  spaceXl: string;
+  space2xl: string;
+  space3xl: string;
+  
+  // Border radius
+  radiusXs: string;
+  radiusSm: string;
+  radiusMd: string;
+  radiusLg: string;
+  radiusXl: string;
+  radiusFull: string;
+  
+  // Shadows
+  shadowSm: string;
+  shadowMd: string;
+  shadowLg: string;
+  shadowXl: string;
+  
+  // Transitions
+  transitionFast: string;
+  transitionNormal: string;
+  transitionSlow: string;
+}
+
+export interface ThemeVariant {
+  mode: 'light' | 'dark';
+  colors: ThemeColors;
+}
+
+export interface ThemeBase {
+  id: string;
+  name: string;
+  description: string;
+  typography: ThemeTypography;
+  spacing: ThemeSpacing;
+  variants: {
+    light: ThemeVariant;
+    dark: ThemeVariant;
+  };
+}
+
+export interface Theme {
+  id: string;
+  name: string;
+  description: string;
+  mode: 'light' | 'dark';
+  colors: ThemeColors;
+  typography: ThemeTypography;
+  spacing: ThemeSpacing;
+  isDark: boolean;
+}
+
+// Default typography settings
+const defaultTypography: ThemeTypography = {
+  fontFamilyPrimary: '-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", sans-serif',
+  fontFamilySecondary: 'Georgia, "Times New Roman", serif',
+  fontFamilyMono: '"SF Mono", "Monaco", "Inconsolata", "Roboto Mono", "Source Code Pro", monospace',
+  
+  fontSizeXs: '0.75rem',
+  fontSizeSm: '0.875rem', 
+  fontSizeMd: '1rem',
+  fontSizeLg: '1.125rem',
+  fontSizeXl: '1.25rem',
+  fontSize2xl: '1.5rem',
+  fontSize3xl: '1.875rem',
+  
+  fontWeightNormal: '400',
+  fontWeightMedium: '500',
+  fontWeightSemibold: '600',
+  fontWeightBold: '700',
+  
+  lineHeightTight: '1.25',
+  lineHeightNormal: '1.5',
+  lineHeightRelaxed: '1.75'
+};
+
+// Default spacing settings
+const defaultSpacing: ThemeSpacing = {
+  spaceXs: '0.25rem',
+  spaceSm: '0.5rem',
+  spaceMd: '1rem',
+  spaceLg: '1.5rem',
+  spaceXl: '2rem',
+  space2xl: '3rem',
+  space3xl: '4rem',
+  
+  radiusXs: '0.125rem',
+  radiusSm: '0.25rem',
+  radiusMd: '0.375rem',
+  radiusLg: '0.5rem',
+  radiusXl: '0.75rem',
+  radiusFull: '9999px',
+  
+  shadowSm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+  shadowMd: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
+  shadowLg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
+  shadowXl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
+  
+  transitionFast: 'all 0.15s ease',
+  transitionNormal: 'all 0.3s ease',
+  transitionSlow: 'all 0.5s ease'
+};
+
+// Enhanced typography for different themes
+const corporateTypography: ThemeTypography = {
+  ...defaultTypography,
+  fontFamilyPrimary: '"Inter", -apple-system, BlinkMacSystemFont, sans-serif',
+  fontWeightNormal: '400',
+  fontWeightMedium: '500',
+  fontWeightSemibold: '600',
+  fontWeightBold: '700'
+};
+
+const minimalTypography: ThemeTypography = {
+  ...defaultTypography,
+  fontFamilyPrimary: '"Helvetica Neue", Helvetica, Arial, sans-serif',
+  fontWeightNormal: '300',
+  fontWeightMedium: '400',
+  fontWeightSemibold: '500',
+  fontWeightBold: '600'
+};
+
+const cyberpunkTypography: ThemeTypography = {
+  ...defaultTypography,
+  fontFamilyPrimary: '"JetBrains Mono", "SF Mono", monospace',
+  fontSizeMd: '0.95rem',
+  lineHeightTight: '1.2',
+  lineHeightNormal: '1.4'
+};
+
+const serifTypography: ThemeTypography = {
+  ...defaultTypography,
+  fontFamilyPrimary: '"Crimson Text", Georgia, "Times New Roman", serif',
+  lineHeightNormal: '1.6',
+  lineHeightRelaxed: '1.8'
+};
+
+// Enhanced spacing for different themes
+const compactSpacing: ThemeSpacing = {
+  ...defaultSpacing,
+  spaceSm: '0.375rem',
+  spaceMd: '0.75rem',
+  spaceLg: '1.125rem',
+  spaceXl: '1.5rem'
+};
+
+const relaxedSpacing: ThemeSpacing = {
+  ...defaultSpacing,
+  spaceSm: '0.625rem',
+  spaceMd: '1.25rem',
+  spaceLg: '2rem',
+  spaceXl: '2.5rem',
+  space2xl: '3.5rem'
+};
+
+const cyberpunkSpacing: ThemeSpacing = {
+  ...defaultSpacing,
+  radiusSm: '0rem',
+  radiusMd: '0.125rem',
+  radiusLg: '0.25rem',
+  shadowMd: '0 0 20px rgba(0, 255, 136, 0.3)',
+  shadowLg: '0 0 30px rgba(0, 255, 136, 0.4)'
+};
+
+// Base theme definitions with light/dark variants
+export const baseThemes: ThemeBase[] = [
+  {
+    id: 'default',
+    name: 'Default',
+    description: 'Clean and professional theme for optimal readability',
+    typography: defaultTypography,
+    spacing: defaultSpacing,
+    variants: {
+      light: {
+        mode: 'light',
+        colors: {
+          bgPrimary: '#ffffff',
+          bgSecondary: '#f8f9fa',
+          bgTertiary: '#e9ecef',
+          bgCode: '#f8f8f8',
+          bgButton: '#007bff',
+          bgButtonHover: '#0056b3',
+          bgAccent: '#e3f2fd',
+          bgError: '#ffedef',
+          bgSuccess: '#e8f5e8',
+          bgWarning: '#fff3cd',
+          
+          textPrimary: '#212529',
+          textSecondary: '#6c757d',
+          textTertiary: '#adb5bd',
+          textAccent: '#007bff',
+          textButton: '#ffffff',
+          textError: '#dc3545',
+          textSuccess: '#28a745',
+          textWarning: '#ffc107',
+          
+          borderPrimary: '#dee2e6',
+          borderSecondary: '#e9ecef',
+          borderAccent: '#007bff',
+          borderError: '#dc3545',
+          borderSuccess: '#28a745',
+          borderWarning: '#ffc107',
+          
+          linkPrimary: '#007bff',
+          linkHover: '#0056b3',
+          focusRing: '#80bdff',
+          
+          playgroundBg: '#ffffff',
+          playgroundPanel: '#f8f9fa',
+          playgroundInput: '#ffffff',
+          playgroundButton: '#007bff',
+          playgroundButtonHover: '#0056b3',
+          playgroundTab: '#f8f9fa',
+          playgroundTabActive: '#007bff',
+          playgroundTabHover: '#e9ecef',
+          
+          apiBg: '#ffffff',
+          apiPanel: '#f8f9fa',
+          apiHeader: '#e9ecef',
+          apiMethod: '#007bff',
+          apiPath: '#212529',
+          
+          mermaidBg: '#ffffff',
+          mermaidNode: '#f0f0f0',
+          mermaidNodeBorder: '#333333',
+          mermaidText: '#000000',
+          mermaidEdge: '#555555',
+          mermaidCluster: '#f8f8f8',
+          mermaidNote: '#ffffcc'
+        }
+      },
+      dark: {
+        mode: 'dark',
+        colors: {
+          bgPrimary: '#1a1a1a',
+          bgSecondary: '#2d2d2d',
+          bgTertiary: '#404040',
+          bgCode: '#2a2a2a',
+          bgButton: '#0d6efd',
+          bgButtonHover: '#0b5ed7',
+          bgAccent: '#1a2332',
+          bgError: '#2d1b1b',
+          bgSuccess: '#1b2d1b',
+          bgWarning: '#2d2a1b',
+          
+          textPrimary: '#ffffff',
+          textSecondary: '#b3b3b3',
+          textTertiary: '#808080',
+          textAccent: '#4dabf7',
+          textButton: '#ffffff',
+          textError: '#ff6b6b',
+          textSuccess: '#51cf66',
+          textWarning: '#ffd43b',
+          
+          borderPrimary: '#404040',
+          borderSecondary: '#2d2d2d',
+          borderAccent: '#4dabf7',
+          borderError: '#ff6b6b',
+          borderSuccess: '#51cf66',
+          borderWarning: '#ffd43b',
+          
+          linkPrimary: '#4dabf7',
+          linkHover: '#339af0',
+          focusRing: '#4dabf7',
+          
+          playgroundBg: '#1a1a1a',
+          playgroundPanel: '#2d2d2d',
+          playgroundInput: '#404040',
+          playgroundButton: '#0d6efd',
+          playgroundButtonHover: '#0b5ed7',
+          playgroundTab: '#2d2d2d',
+          playgroundTabActive: '#4dabf7',
+          playgroundTabHover: '#404040',
+          
+          apiBg: '#1a1a1a',
+          apiPanel: '#2d2d2d',
+          apiHeader: '#404040',
+          apiMethod: '#4dabf7',
+          apiPath: '#ffffff',
+          
+          mermaidBg: '#1a1a1a',
+          mermaidNode: '#333333',
+          mermaidNodeBorder: '#aaaaaa',
+          mermaidText: '#ffffff',
+          mermaidEdge: '#cccccc',
+          mermaidCluster: '#2a2a2a',
+          mermaidNote: '#2a2a2a'
+        }
+      }
+    }
+  },
+  {
+    id: 'nord',
+    name: 'Nord',
+    description: 'Arctic-inspired theme with cool blues and whites',
+    typography: defaultTypography,
+    spacing: defaultSpacing,
+    variants: {
+      light: {
+        mode: 'light',
+        colors: {
+          bgPrimary: '#eceff4',
+          bgSecondary: '#e5e9f0',
+          bgTertiary: '#d8dee9',
+          bgCode: '#e5e9f0',
+          bgButton: '#5e81ac',
+          bgButtonHover: '#81a1c1',
+          bgAccent: '#d8dee9',
+          bgError: '#bf616a',
+          bgSuccess: '#a3be8c',
+          bgWarning: '#ebcb8b',
+          
+          textPrimary: '#2e3440',
+          textSecondary: '#3b4252',
+          textTertiary: '#434c5e',
+          textAccent: '#5e81ac',
+          textButton: '#eceff4',
+          textError: '#bf616a',
+          textSuccess: '#a3be8c',
+          textWarning: '#ebcb8b',
+          
+          borderPrimary: '#d8dee9',
+          borderSecondary: '#e5e9f0',
+          borderAccent: '#5e81ac',
+          borderError: '#bf616a',
+          borderSuccess: '#a3be8c',
+          borderWarning: '#ebcb8b',
+          
+          linkPrimary: '#5e81ac',
+          linkHover: '#81a1c1',
+          focusRing: '#88c0d0',
+          
+          playgroundBg: '#eceff4',
+          playgroundPanel: '#e5e9f0',
+          playgroundInput: '#eceff4',
+          playgroundButton: '#5e81ac',
+          playgroundButtonHover: '#81a1c1',
+          playgroundTab: '#e5e9f0',
+          playgroundTabActive: '#5e81ac',
+          playgroundTabHover: '#d8dee9',
+          
+          apiBg: '#eceff4',
+          apiPanel: '#e5e9f0',
+          apiHeader: '#d8dee9',
+          apiMethod: '#5e81ac',
+          apiPath: '#2e3440',
+          
+          mermaidBg: '#eceff4',
+          mermaidNode: '#d8dee9',
+          mermaidNodeBorder: '#434c5e',
+          mermaidText: '#2e3440',
+          mermaidEdge: '#434c5e',
+          mermaidCluster: '#e5e9f0',
+          mermaidNote: '#d8dee9'
+        }
+      },
+      dark: {
+        mode: 'dark',
+        colors: {
+          bgPrimary: '#2e3440',
+          bgSecondary: '#3b4252',
+          bgTertiary: '#434c5e',
+          bgCode: '#3b4252',
+          bgButton: '#5e81ac',
+          bgButtonHover: '#81a1c1',
+          bgAccent: '#4c566a',
+          bgError: '#bf616a',
+          bgSuccess: '#a3be8c',
+          bgWarning: '#ebcb8b',
+          
+          textPrimary: '#eceff4',
+          textSecondary: '#d8dee9',
+          textTertiary: '#8fbcbb',
+          textAccent: '#88c0d0',
+          textButton: '#eceff4',
+          textError: '#bf616a',
+          textSuccess: '#a3be8c',
+          textWarning: '#ebcb8b',
+          
+          borderPrimary: '#4c566a',
+          borderSecondary: '#434c5e',
+          borderAccent: '#88c0d0',
+          borderError: '#bf616a',
+          borderSuccess: '#a3be8c',
+          borderWarning: '#ebcb8b',
+          
+          linkPrimary: '#88c0d0',
+          linkHover: '#8fbcbb',
+          focusRing: '#88c0d0',
+          
+          playgroundBg: '#2e3440',
+          playgroundPanel: '#3b4252',
+          playgroundInput: '#434c5e',
+          playgroundButton: '#5e81ac',
+          playgroundButtonHover: '#81a1c1',
+          playgroundTab: '#3b4252',
+          playgroundTabActive: '#88c0d0',
+          playgroundTabHover: '#434c5e',
+          
+          apiBg: '#2e3440',
+          apiPanel: '#3b4252',
+          apiHeader: '#434c5e',
+          apiMethod: '#88c0d0',
+          apiPath: '#eceff4',
+          
+          mermaidBg: '#2e3440',
+          mermaidNode: '#434c5e',
+          mermaidNodeBorder: '#8fbcbb',
+          mermaidText: '#eceff4',
+          mermaidEdge: '#8fbcbb',
+          mermaidCluster: '#3b4252',
+          mermaidNote: '#4c566a'
+        }
+      }
+    }
+  },
+  {
+    id: 'ocean',
+    name: 'Ocean',
+    description: 'Deep ocean blues with professional appeal',
+    typography: defaultTypography,
+    spacing: defaultSpacing,
+    variants: {
+      light: {
+        mode: 'light',
+        colors: {
+          bgPrimary: '#f8fafc',
+          bgSecondary: '#f1f5f9',
+          bgTertiary: '#e2e8f0',
+          bgCode: '#f1f5f9',
+          bgButton: '#0ea5e9',
+          bgButtonHover: '#0284c7',
+          bgAccent: '#e0f2fe',
+          bgError: '#fef2f2',
+          bgSuccess: '#f0fdf4',
+          bgWarning: '#fffbeb',
+          
+          textPrimary: '#0f172a',
+          textSecondary: '#334155',
+          textTertiary: '#64748b',
+          textAccent: '#0ea5e9',
+          textButton: '#f8fafc',
+          textError: '#dc2626',
+          textSuccess: '#16a34a',
+          textWarning: '#ca8a04',
+          
+          borderPrimary: '#e2e8f0',
+          borderSecondary: '#f1f5f9',
+          borderAccent: '#0ea5e9',
+          borderError: '#dc2626',
+          borderSuccess: '#16a34a',
+          borderWarning: '#ca8a04',
+          
+          linkPrimary: '#0ea5e9',
+          linkHover: '#0284c7',
+          focusRing: '#38bdf8',
+          
+          playgroundBg: '#f8fafc',
+          playgroundPanel: '#f1f5f9',
+          playgroundInput: '#f8fafc',
+          playgroundButton: '#0ea5e9',
+          playgroundButtonHover: '#0284c7',
+          playgroundTab: '#f1f5f9',
+          playgroundTabActive: '#0ea5e9',
+          playgroundTabHover: '#e2e8f0',
+          
+          apiBg: '#f8fafc',
+          apiPanel: '#f1f5f9',
+          apiHeader: '#e2e8f0',
+          apiMethod: '#0ea5e9',
+          apiPath: '#0f172a',
+          
+          mermaidBg: '#f8fafc',
+          mermaidNode: '#e2e8f0',
+          mermaidNodeBorder: '#64748b',
+          mermaidText: '#0f172a',
+          mermaidEdge: '#64748b',
+          mermaidCluster: '#f1f5f9',
+          mermaidNote: '#e0f2fe'
+        }
+      },
+      dark: {
+        mode: 'dark',
+        colors: {
+          bgPrimary: '#0f172a',
+          bgSecondary: '#1e293b',
+          bgTertiary: '#334155',
+          bgCode: '#1e293b',
+          bgButton: '#0ea5e9',
+          bgButtonHover: '#0284c7',
+          bgAccent: '#1e40af',
+          bgError: '#dc2626',
+          bgSuccess: '#16a34a',
+          bgWarning: '#ca8a04',
+          
+          textPrimary: '#f8fafc',
+          textSecondary: '#cbd5e1',
+          textTertiary: '#94a3b8',
+          textAccent: '#38bdf8',
+          textButton: '#f8fafc',
+          textError: '#fca5a5',
+          textSuccess: '#86efac',
+          textWarning: '#fde047',
+          
+          borderPrimary: '#475569',
+          borderSecondary: '#334155',
+          borderAccent: '#38bdf8',
+          borderError: '#dc2626',
+          borderSuccess: '#16a34a',
+          borderWarning: '#ca8a04',
+          
+          linkPrimary: '#38bdf8',
+          linkHover: '#0ea5e9',
+          focusRing: '#38bdf8',
+          
+          playgroundBg: '#0f172a',
+          playgroundPanel: '#1e293b',
+          playgroundInput: '#334155',
+          playgroundButton: '#0ea5e9',
+          playgroundButtonHover: '#0284c7',
+          playgroundTab: '#1e293b',
+          playgroundTabActive: '#38bdf8',
+          playgroundTabHover: '#334155',
+          
+          apiBg: '#0f172a',
+          apiPanel: '#1e293b',
+          apiHeader: '#334155',
+          apiMethod: '#38bdf8',
+          apiPath: '#f8fafc',
+          
+          mermaidBg: '#0f172a',
+          mermaidNode: '#334155',
+          mermaidNodeBorder: '#94a3b8',
+          mermaidText: '#f8fafc',
+          mermaidEdge: '#94a3b8',
+          mermaidCluster: '#1e293b',
+          mermaidNote: '#334155'
+        }
+      }
+    }
+  },
+  {
+    id: 'forest',
+    name: 'Forest',
+    description: 'Natural green theme with earthy tones',
+    typography: defaultTypography,
+    spacing: defaultSpacing,
+    variants: {
+      light: {
+        mode: 'light',
+        colors: {
+          bgPrimary: '#f0fdf4',
+          bgSecondary: '#dcfce7',
+          bgTertiary: '#bbf7d0',
+          bgCode: '#dcfce7',
+          bgButton: '#22c55e',
+          bgButtonHover: '#16a34a',
+          bgAccent: '#dcfce7',
+          bgError: '#fef2f2',
+          bgSuccess: '#f0fdf4',
+          bgWarning: '#fffbeb',
+          
+          textPrimary: '#14532d',
+          textSecondary: '#166534',
+          textTertiary: '#22c55e',
+          textAccent: '#15803d',
+          textButton: '#f0fdf4',
+          textError: '#dc2626',
+          textSuccess: '#22c55e',
+          textWarning: '#eab308',
+          
+          borderPrimary: '#bbf7d0',
+          borderSecondary: '#dcfce7',
+          borderAccent: '#22c55e',
+          borderError: '#dc2626',
+          borderSuccess: '#22c55e',
+          borderWarning: '#eab308',
+          
+          linkPrimary: '#15803d',
+          linkHover: '#22c55e',
+          focusRing: '#4ade80',
+          
+          playgroundBg: '#f0fdf4',
+          playgroundPanel: '#dcfce7',
+          playgroundInput: '#f0fdf4',
+          playgroundButton: '#22c55e',
+          playgroundButtonHover: '#16a34a',
+          playgroundTab: '#dcfce7',
+          playgroundTabActive: '#22c55e',
+          playgroundTabHover: '#bbf7d0',
+          
+          apiBg: '#f0fdf4',
+          apiPanel: '#dcfce7',
+          apiHeader: '#bbf7d0',
+          apiMethod: '#15803d',
+          apiPath: '#14532d',
+          
+          mermaidBg: '#f0fdf4',
+          mermaidNode: '#bbf7d0',
+          mermaidNodeBorder: '#166534',
+          mermaidText: '#14532d',
+          mermaidEdge: '#166534',
+          mermaidCluster: '#dcfce7',
+          mermaidNote: '#bbf7d0'
+        }
+      },
+      dark: {
+        mode: 'dark',
+        colors: {
+          bgPrimary: '#1c2e1c',
+          bgSecondary: '#2d4a2d',
+          bgTertiary: '#3d5a3d',
+          bgCode: '#2d4a2d',
+          bgButton: '#22c55e',
+          bgButtonHover: '#16a34a',
+          bgAccent: '#15803d',
+          bgError: '#dc2626',
+          bgSuccess: '#22c55e',
+          bgWarning: '#eab308',
+          
+          textPrimary: '#f0fdf4',
+          textSecondary: '#dcfce7',
+          textTertiary: '#bbf7d0',
+          textAccent: '#4ade80',
+          textButton: '#f0fdf4',
+          textError: '#fca5a5',
+          textSuccess: '#86efac',
+          textWarning: '#fde047',
+          
+          borderPrimary: '#4d6d4d',
+          borderSecondary: '#3d5a3d',
+          borderAccent: '#4ade80',
+          borderError: '#dc2626',
+          borderSuccess: '#22c55e',
+          borderWarning: '#eab308',
+          
+          linkPrimary: '#4ade80',
+          linkHover: '#22c55e',
+          focusRing: '#4ade80',
+          
+          playgroundBg: '#1c2e1c',
+          playgroundPanel: '#2d4a2d',
+          playgroundInput: '#3d5a3d',
+          playgroundButton: '#22c55e',
+          playgroundButtonHover: '#16a34a',
+          playgroundTab: '#2d4a2d',
+          playgroundTabActive: '#4ade80',
+          playgroundTabHover: '#3d5a3d',
+          
+          apiBg: '#1c2e1c',
+          apiPanel: '#2d4a2d',
+          apiHeader: '#3d5a3d',
+          apiMethod: '#4ade80',
+          apiPath: '#f0fdf4',
+          
+          mermaidBg: '#1c2e1c',
+          mermaidNode: '#3d5a3d',
+          mermaidNodeBorder: '#bbf7d0',
+          mermaidText: '#f0fdf4',
+          mermaidEdge: '#bbf7d0',
+          mermaidCluster: '#2d4a2d',
+          mermaidNote: '#4d6d4d'
+        }
+      }
+    }
+  },
+  {
+    id: 'sunset',
+    name: 'Sunset',
+    description: 'Warm sunset colors with orange and pink accents',
+    typography: defaultTypography,
+    spacing: defaultSpacing,
+    variants: {
+      light: {
+        mode: 'light',
+        colors: {
+          bgPrimary: '#fff7ed',
+          bgSecondary: '#ffedd5',
+          bgTertiary: '#fed7aa',
+          bgCode: '#ffedd5',
+          bgButton: '#f97316',
+          bgButtonHover: '#ea580c',
+          bgAccent: '#fff7ed',
+          bgError: '#fef2f2',
+          bgSuccess: '#f0fdf4',
+          bgWarning: '#fffbeb',
+          
+          textPrimary: '#9a3412',
+          textSecondary: '#c2410c',
+          textTertiary: '#ea580c',
+          textAccent: '#f97316',
+          textButton: '#fff7ed',
+          textError: '#dc2626',
+          textSuccess: '#16a34a',
+          textWarning: '#eab308',
+          
+          borderPrimary: '#fed7aa',
+          borderSecondary: '#ffedd5',
+          borderAccent: '#f97316',
+          borderError: '#dc2626',
+          borderSuccess: '#16a34a',
+          borderWarning: '#eab308',
+          
+          linkPrimary: '#f97316',
+          linkHover: '#ea580c',
+          focusRing: '#fb923c',
+          
+          playgroundBg: '#fff7ed',
+          playgroundPanel: '#ffedd5',
+          playgroundInput: '#fff7ed',
+          playgroundButton: '#f97316',
+          playgroundButtonHover: '#ea580c',
+          playgroundTab: '#ffedd5',
+          playgroundTabActive: '#f97316',
+          playgroundTabHover: '#fed7aa',
+          
+          apiBg: '#fff7ed',
+          apiPanel: '#ffedd5',
+          apiHeader: '#fed7aa',
+          apiMethod: '#f97316',
+          apiPath: '#9a3412',
+          
+          mermaidBg: '#fff7ed',
+          mermaidNode: '#fed7aa',
+          mermaidNodeBorder: '#c2410c',
+          mermaidText: '#9a3412',
+          mermaidEdge: '#c2410c',
+          mermaidCluster: '#ffedd5',
+          mermaidNote: '#fed7aa'
+        }
+      },
+      dark: {
+        mode: 'dark',
+        colors: {
+          bgPrimary: '#1f1611',
+          bgSecondary: '#2d2319',
+          bgTertiary: '#3d3021',
+          bgCode: '#2d2319',
+          bgButton: '#f97316',
+          bgButtonHover: '#ea580c',
+          bgAccent: '#dc2626',
+          bgError: '#dc2626',
+          bgSuccess: '#16a34a',
+          bgWarning: '#eab308',
+          
+          textPrimary: '#fef7ed',
+          textSecondary: '#fed7aa',
+          textTertiary: '#fdba74',
+          textAccent: '#fb923c',
+          textButton: '#fef7ed',
+          textError: '#fca5a5',
+          textSuccess: '#86efac',
+          textWarning: '#fde047',
+          
+          borderPrimary: '#57534e',
+          borderSecondary: '#3d3021',
+          borderAccent: '#fb923c',
+          borderError: '#dc2626',
+          borderSuccess: '#16a34a',
+          borderWarning: '#eab308',
+          
+          linkPrimary: '#fb923c',
+          linkHover: '#f97316',
+          focusRing: '#fb923c',
+          
+          playgroundBg: '#1f1611',
+          playgroundPanel: '#2d2319',
+          playgroundInput: '#3d3021',
+          playgroundButton: '#f97316',
+          playgroundButtonHover: '#ea580c',
+          playgroundTab: '#2d2319',
+          playgroundTabActive: '#fb923c',
+          playgroundTabHover: '#3d3021',
+          
+          apiBg: '#1f1611',
+          apiPanel: '#2d2319',
+          apiHeader: '#3d3021',
+          apiMethod: '#fb923c',
+          apiPath: '#fef7ed',
+          
+          mermaidBg: '#1f1611',
+          mermaidNode: '#3d3021',
+          mermaidNodeBorder: '#fdba74',
+          mermaidText: '#fef7ed',
+          mermaidEdge: '#fdba74',
+          mermaidCluster: '#2d2319',
+          mermaidNote: '#57534e'
+        }
+      }
+    }
+  },
+  {
+    id: 'corporate',
+    name: 'Corporate',
+    description: 'Professional corporate theme with blue and gray',
+    typography: corporateTypography,
+    spacing: compactSpacing,
+    variants: {
+      light: {
+        mode: 'light',
+        colors: {
+          bgPrimary: '#ffffff',
+          bgSecondary: '#f8f9fa',
+          bgTertiary: '#e9ecef',
+          bgCode: '#f8f9fa',
+          bgButton: '#0d47a1',
+          bgButtonHover: '#1565c0',
+          bgAccent: '#e3f2fd',
+          bgError: '#ffebee',
+          bgSuccess: '#e8f5e8',
+          bgWarning: '#fff8e1',
+          
+          textPrimary: '#263238',
+          textSecondary: '#546e7a',
+          textTertiary: '#90a4ae',
+          textAccent: '#1976d2',
+          textButton: '#ffffff',
+          textError: '#d32f2f',
+          textSuccess: '#388e3c',
+          textWarning: '#f57c00',
+          
+          borderPrimary: '#cfd8dc',
+          borderSecondary: '#eceff1',
+          borderAccent: '#1976d2',
+          borderError: '#d32f2f',
+          borderSuccess: '#388e3c',
+          borderWarning: '#f57c00',
+          
+          linkPrimary: '#1976d2',
+          linkHover: '#1565c0',
+          focusRing: '#64b5f6',
+          
+          playgroundBg: '#ffffff',
+          playgroundPanel: '#f8f9fa',
+          playgroundInput: '#ffffff',
+          playgroundButton: '#0d47a1',
+          playgroundButtonHover: '#1565c0',
+          playgroundTab: '#f8f9fa',
+          playgroundTabActive: '#1976d2',
+          playgroundTabHover: '#e9ecef',
+          
+          apiBg: '#ffffff',
+          apiPanel: '#f8f9fa',
+          apiHeader: '#e9ecef',
+          apiMethod: '#1976d2',
+          apiPath: '#263238',
+          
+          mermaidBg: '#ffffff',
+          mermaidNode: '#eceff1',
+          mermaidNodeBorder: '#546e7a',
+          mermaidText: '#263238',
+          mermaidEdge: '#546e7a',
+          mermaidCluster: '#f8f9fa',
+          mermaidNote: '#fff3e0'
+        }
+      },
+      dark: {
+        mode: 'dark',
+        colors: {
+          bgPrimary: '#1a1a1a',
+          bgSecondary: '#2d2d2d',
+          bgTertiary: '#404040',
+          bgCode: '#2a2a2a',
+          bgButton: '#1976d2',
+          bgButtonHover: '#1565c0',
+          bgAccent: '#0d47a1',
+          bgError: '#d32f2f',
+          bgSuccess: '#388e3c',
+          bgWarning: '#f57c00',
+          
+          textPrimary: '#eceff1',
+          textSecondary: '#cfd8dc',
+          textTertiary: '#90a4ae',
+          textAccent: '#64b5f6',
+          textButton: '#ffffff',
+          textError: '#f48fb1',
+          textSuccess: '#81c784',
+          textWarning: '#ffb74d',
+          
+          borderPrimary: '#546e7a',
+          borderSecondary: '#404040',
+          borderAccent: '#64b5f6',
+          borderError: '#d32f2f',
+          borderSuccess: '#388e3c',
+          borderWarning: '#f57c00',
+          
+          linkPrimary: '#64b5f6',
+          linkHover: '#42a5f5',
+          focusRing: '#64b5f6',
+          
+          playgroundBg: '#1a1a1a',
+          playgroundPanel: '#2d2d2d',
+          playgroundInput: '#404040',
+          playgroundButton: '#1976d2',
+          playgroundButtonHover: '#1565c0',
+          playgroundTab: '#2d2d2d',
+          playgroundTabActive: '#64b5f6',
+          playgroundTabHover: '#404040',
+          
+          apiBg: '#1a1a1a',
+          apiPanel: '#2d2d2d',
+          apiHeader: '#404040',
+          apiMethod: '#64b5f6',
+          apiPath: '#eceff1',
+          
+          mermaidBg: '#1a1a1a',
+          mermaidNode: '#404040',
+          mermaidNodeBorder: '#90a4ae',
+          mermaidText: '#eceff1',
+          mermaidEdge: '#90a4ae',
+          mermaidCluster: '#2d2d2d',
+          mermaidNote: '#546e7a'
+        }
+      }
+    }
+  },
+  {
+    id: 'minimal',
+    name: 'Minimal',
+    description: 'Clean minimal theme with subtle grays',
+    typography: minimalTypography,
+    spacing: compactSpacing,
+    variants: {
+      light: {
+        mode: 'light',
+        colors: {
+          bgPrimary: '#ffffff',
+          bgSecondary: '#fafafa',
+          bgTertiary: '#f5f5f5',
+          bgCode: '#fafafa',
+          bgButton: '#424242',
+          bgButtonHover: '#616161',
+          bgAccent: '#f5f5f5',
+          bgError: '#ffebee',
+          bgSuccess: '#e8f5e8',
+          bgWarning: '#fff8e1',
+          
+          textPrimary: '#212121',
+          textSecondary: '#616161',
+          textTertiary: '#9e9e9e',
+          textAccent: '#424242',
+          textButton: '#ffffff',
+          textError: '#d32f2f',
+          textSuccess: '#388e3c',
+          textWarning: '#f57c00',
+          
+          borderPrimary: '#e0e0e0',
+          borderSecondary: '#f5f5f5',
+          borderAccent: '#424242',
+          borderError: '#d32f2f',
+          borderSuccess: '#388e3c',
+          borderWarning: '#f57c00',
+          
+          linkPrimary: '#424242',
+          linkHover: '#616161',
+          focusRing: '#9e9e9e',
+          
+          playgroundBg: '#ffffff',
+          playgroundPanel: '#fafafa',
+          playgroundInput: '#ffffff',
+          playgroundButton: '#424242',
+          playgroundButtonHover: '#616161',
+          playgroundTab: '#fafafa',
+          playgroundTabActive: '#424242',
+          playgroundTabHover: '#f5f5f5',
+          
+          apiBg: '#ffffff',
+          apiPanel: '#fafafa',
+          apiHeader: '#f5f5f5',
+          apiMethod: '#424242',
+          apiPath: '#212121',
+          
+          mermaidBg: '#ffffff',
+          mermaidNode: '#f5f5f5',
+          mermaidNodeBorder: '#9e9e9e',
+          mermaidText: '#212121',
+          mermaidEdge: '#9e9e9e',
+          mermaidCluster: '#fafafa',
+          mermaidNote: '#fff8e1'
+        }
+      },
+      dark: {
+        mode: 'dark',
+        colors: {
+          bgPrimary: '#121212',
+          bgSecondary: '#1e1e1e',
+          bgTertiary: '#2d2d2d',
+          bgCode: '#1e1e1e',
+          bgButton: '#ffffff',
+          bgButtonHover: '#f5f5f5',
+          bgAccent: '#2d2d2d',
+          bgError: '#cf6679',
+          bgSuccess: '#81c784',
+          bgWarning: '#ffb74d',
+          
+          textPrimary: '#ffffff',
+          textSecondary: '#b3b3b3',
+          textTertiary: '#8a8a8a',
+          textAccent: '#ffffff',
+          textButton: '#121212',
+          textError: '#cf6679',
+          textSuccess: '#81c784',
+          textWarning: '#ffb74d',
+          
+          borderPrimary: '#404040',
+          borderSecondary: '#2d2d2d',
+          borderAccent: '#ffffff',
+          borderError: '#cf6679',
+          borderSuccess: '#81c784',
+          borderWarning: '#ffb74d',
+          
+          linkPrimary: '#ffffff',
+          linkHover: '#f5f5f5',
+          focusRing: '#ffffff',
+          
+          playgroundBg: '#121212',
+          playgroundPanel: '#1e1e1e',
+          playgroundInput: '#2d2d2d',
+          playgroundButton: '#ffffff',
+          playgroundButtonHover: '#f5f5f5',
+          playgroundTab: '#1e1e1e',
+          playgroundTabActive: '#ffffff',
+          playgroundTabHover: '#2d2d2d',
+          
+          apiBg: '#121212',
+          apiPanel: '#1e1e1e',
+          apiHeader: '#2d2d2d',
+          apiMethod: '#ffffff',
+          apiPath: '#ffffff',
+          
+          mermaidBg: '#121212',
+          mermaidNode: '#2d2d2d',
+          mermaidNodeBorder: '#8a8a8a',
+          mermaidText: '#ffffff',
+          mermaidEdge: '#8a8a8a',
+          mermaidCluster: '#1e1e1e',
+          mermaidNote: '#404040'
+        }
+      }
+    }
+  },
+  {
+    id: 'cyberpunk',
+    name: 'Cyberpunk',
+    description: 'Futuristic theme with neon colors and high contrast',
+    typography: cyberpunkTypography,
+    spacing: cyberpunkSpacing,
+    variants: {
+      light: {
+        mode: 'light',
+        colors: {
+          bgPrimary: '#f8fafc',
+          bgSecondary: '#e2e8f0',
+          bgTertiary: '#cbd5e1',
+          bgCode: '#e2e8f0',
+          bgButton: '#e94560',
+          bgButtonHover: '#dc2626',
+          bgAccent: '#e0f2fe',
+          bgError: '#fef2f2',
+          bgSuccess: '#f0fdf4',
+          bgWarning: '#fffbeb',
+          
+          textPrimary: '#0a0a0f',
+          textSecondary: '#1a1a2e',
+          textTertiary: '#475569',
+          textAccent: '#e94560',
+          textButton: '#f8fafc',
+          textError: '#dc2626',
+          textSuccess: '#16a34a',
+          textWarning: '#eab308',
+          
+          borderPrimary: '#cbd5e1',
+          borderSecondary: '#e2e8f0',
+          borderAccent: '#e94560',
+          borderError: '#dc2626',
+          borderSuccess: '#16a34a',
+          borderWarning: '#eab308',
+          
+          linkPrimary: '#e94560',
+          linkHover: '#dc2626',
+          focusRing: '#ff6b6b',
+          
+          playgroundBg: '#f8fafc',
+          playgroundPanel: '#e2e8f0',
+          playgroundInput: '#f8fafc',
+          playgroundButton: '#e94560',
+          playgroundButtonHover: '#dc2626',
+          playgroundTab: '#e2e8f0',
+          playgroundTabActive: '#e94560',
+          playgroundTabHover: '#cbd5e1',
+          
+          apiBg: '#f8fafc',
+          apiPanel: '#e2e8f0',
+          apiHeader: '#cbd5e1',
+          apiMethod: '#e94560',
+          apiPath: '#0a0a0f',
+          
+          mermaidBg: '#f8fafc',
+          mermaidNode: '#cbd5e1',
+          mermaidNodeBorder: '#475569',
+          mermaidText: '#0a0a0f',
+          mermaidEdge: '#475569',
+          mermaidCluster: '#e2e8f0',
+          mermaidNote: '#e0f2fe'
+        }
+      },
+      dark: {
+        mode: 'dark',
+        colors: {
+          bgPrimary: '#0a0a0f',
+          bgSecondary: '#1a1a2e',
+          bgTertiary: '#16213e',
+          bgCode: '#1a1a2e',
+          bgButton: '#e94560',
+          bgButtonHover: '#ff6b6b',
+          bgAccent: '#0f3460',
+          bgError: '#e94560',
+          bgSuccess: '#00ff88',
+          bgWarning: '#ffff00',
+          
+          textPrimary: '#ffffff',
+          textSecondary: '#00d9ff',
+          textTertiary: '#8892b0',
+          textAccent: '#00ff88',
+          textButton: '#ffffff',
+          textError: '#ff6b6b',
+          textSuccess: '#00ff88',
+          textWarning: '#ffff00',
+          
+          borderPrimary: '#0f3460',
+          borderSecondary: '#16213e',
+          borderAccent: '#00ff88',
+          borderError: '#e94560',
+          borderSuccess: '#00ff88',
+          borderWarning: '#ffff00',
+          
+          linkPrimary: '#00ff88',
+          linkHover: '#00d9ff',
+          focusRing: '#00ff88',
+          
+          playgroundBg: '#0a0a0f',
+          playgroundPanel: '#1a1a2e',
+          playgroundInput: '#16213e',
+          playgroundButton: '#e94560',
+          playgroundButtonHover: '#ff6b6b',
+          playgroundTab: '#1a1a2e',
+          playgroundTabActive: '#00ff88',
+          playgroundTabHover: '#16213e',
+          
+          apiBg: '#0a0a0f',
+          apiPanel: '#1a1a2e',
+          apiHeader: '#16213e',
+          apiMethod: '#00ff88',
+          apiPath: '#ffffff',
+          
+          mermaidBg: '#0a0a0f',
+          mermaidNode: '#16213e',
+          mermaidNodeBorder: '#00d9ff',
+          mermaidText: '#ffffff',
+          mermaidEdge: '#00d9ff',
+          mermaidCluster: '#1a1a2e',
+          mermaidNote: '#0f3460'
+        }
+      }
+    }
+  },
+  {
+    id: 'sepia',
+    name: 'Sepia',
+    description: 'Warm sepia tones for comfortable reading',
+    typography: serifTypography,
+    spacing: relaxedSpacing,
+    variants: {
+      light: {
+        mode: 'light',
+        colors: {
+          bgPrimary: '#fdf6e3',
+          bgSecondary: '#eee8d5',
+          bgTertiary: '#e3dcc6',
+          bgCode: '#eee8d5',
+          bgButton: '#b58900',
+          bgButtonHover: '#cb4b16',
+          bgAccent: '#fdf6e3',
+          bgError: '#dc322f',
+          bgSuccess: '#859900',
+          bgWarning: '#b58900',
+          
+          textPrimary: '#657b83',
+          textSecondary: '#839496',
+          textTertiary: '#93a1a1',
+          textAccent: '#268bd2',
+          textButton: '#fdf6e3',
+          textError: '#dc322f',
+          textSuccess: '#859900',
+          textWarning: '#b58900',
+          
+          borderPrimary: '#d3cbb7',
+          borderSecondary: '#e3dcc6',
+          borderAccent: '#268bd2',
+          borderError: '#dc322f',
+          borderSuccess: '#859900',
+          borderWarning: '#b58900',
+          
+          linkPrimary: '#268bd2',
+          linkHover: '#2aa198',
+          focusRing: '#268bd2',
+          
+          playgroundBg: '#fdf6e3',
+          playgroundPanel: '#eee8d5',
+          playgroundInput: '#fdf6e3',
+          playgroundButton: '#b58900',
+          playgroundButtonHover: '#cb4b16',
+          playgroundTab: '#eee8d5',
+          playgroundTabActive: '#268bd2',
+          playgroundTabHover: '#e3dcc6',
+          
+          apiBg: '#fdf6e3',
+          apiPanel: '#eee8d5',
+          apiHeader: '#e3dcc6',
+          apiMethod: '#268bd2',
+          apiPath: '#657b83',
+          
+          mermaidBg: '#fdf6e3',
+          mermaidNode: '#e3dcc6',
+          mermaidNodeBorder: '#839496',
+          mermaidText: '#657b83',
+          mermaidEdge: '#839496',
+          mermaidCluster: '#eee8d5',
+          mermaidNote: '#eee8d5'
+        }
+      },
+      dark: {
+        mode: 'dark',
+        colors: {
+          bgPrimary: '#2d1b0e',
+          bgSecondary: '#3d2b1e',
+          bgTertiary: '#4d3b2e',
+          bgCode: '#3d2b1e',
+          bgButton: '#b58900',
+          bgButtonHover: '#cb4b16',
+          bgAccent: '#2d1b0e',
+          bgError: '#dc322f',
+          bgSuccess: '#859900',
+          bgWarning: '#b58900',
+          
+          textPrimary: '#fdf6e3',
+          textSecondary: '#eee8d5',
+          textTertiary: '#d3cbb7',
+          textAccent: '#268bd2',
+          textButton: '#2d1b0e',
+          textError: '#dc322f',
+          textSuccess: '#859900',
+          textWarning: '#b58900',
+          
+          borderPrimary: '#5d4b3e',
+          borderSecondary: '#4d3b2e',
+          borderAccent: '#268bd2',
+          borderError: '#dc322f',
+          borderSuccess: '#859900',
+          borderWarning: '#b58900',
+          
+          linkPrimary: '#2aa198',
+          linkHover: '#268bd2',
+          focusRing: '#2aa198',
+          
+          playgroundBg: '#2d1b0e',
+          playgroundPanel: '#3d2b1e',
+          playgroundInput: '#4d3b2e',
+          playgroundButton: '#b58900',
+          playgroundButtonHover: '#cb4b16',
+          playgroundTab: '#3d2b1e',
+          playgroundTabActive: '#268bd2',
+          playgroundTabHover: '#4d3b2e',
+          
+          apiBg: '#2d1b0e',
+          apiPanel: '#3d2b1e',
+          apiHeader: '#4d3b2e',
+          apiMethod: '#268bd2',
+          apiPath: '#fdf6e3',
+          
+          mermaidBg: '#2d1b0e',
+          mermaidNode: '#4d3b2e',
+          mermaidNodeBorder: '#839496',
+          mermaidText: '#fdf6e3',
+          mermaidEdge: '#839496',
+          mermaidCluster: '#3d2b1e',
+          mermaidNote: '#5d4b3e'
+        }
+      }
+    }
+  }
+];
+
+// Generate all theme variants (light + dark for each base theme)
+export const themes: Theme[] = baseThemes.flatMap(baseTheme => [
+  {
+    id: `${baseTheme.id}-light`,
+    name: `${baseTheme.name} Light`,
+    description: `${baseTheme.description} (Light mode)`,
+    mode: 'light' as const,
+    isDark: false,
+    colors: baseTheme.variants.light.colors,
+    typography: baseTheme.typography,
+    spacing: baseTheme.spacing
+  },
+  {
+    id: `${baseTheme.id}-dark`,
+    name: `${baseTheme.name} Dark`,
+    description: `${baseTheme.description} (Dark mode)`,
+    mode: 'dark' as const,
+    isDark: true,
+    colors: baseTheme.variants.dark.colors,
+    typography: baseTheme.typography,
+    spacing: baseTheme.spacing
+  }
+]);
+
+export function getTheme(id: string): Theme | undefined {
+  return themes.find(theme => theme.id === id);
+}
+
+export function getThemeNames(): { id: string; name: string; description: string }[] {
+  return themes.map(theme => ({ id: theme.id, name: theme.name, description: theme.description }));
+}
\ No newline at end of file
diff --git a/src/ui/header.tsx b/src/ui/header.tsx
index d0f5747..8128c3d 100644
--- a/src/ui/header.tsx
+++ b/src/ui/header.tsx
@@ -4,6 +4,7 @@ import { Link } from 'wouter-preact';
 import { usePathname } from 'wouter-preact/use-browser-location';
 import docsConfig from '../../docs/dory.json';
 import { DarkModeToggle } from '../components/dark-mode-toggle';
+import { ThemeSelector } from '../components/theme-selector';
 import { MobileSearch, Search } from '../components/search';
 import { ALL_NAVIGATION } from '../components/store';
 import { MobileNavigation } from './mobile-navigation';
@@ -79,6 +80,7 @@ export function Header({ className }: { className?: string }) {
         <div className="flex items-center gap-3">
           <MobileSearch />
           <Search />
+          <ThemeSelector />
           <DarkModeToggle />
           <MobileNavigation />
         </div>
diff --git a/src/utils/hooks.ts b/src/utils/hooks.ts
index c343e81..3c67781 100644
--- a/src/utils/hooks.ts
+++ b/src/utils/hooks.ts
@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'preact/hooks';
+import { getTheme, themes, type Theme } from '../themes/theme-config';
 
 export function useDarkMode() {
   // Check localStorage and system preference on initial load
@@ -43,4 +44,112 @@ export function useDarkMode() {
   const toggleDarkMode = () => setIsDark(!isDark);
 
   return { isDark, toggleDarkMode };
+}
+
+export function useTheme() {
+  // Get initial theme from localStorage or default to system preference
+  const [currentTheme, setCurrentTheme] = useState<Theme>(() => {
+    if (typeof window === 'undefined') {
+      return themes[0]; // Default to light theme on server
+    }
+    
+    const storedThemeId = localStorage.getItem('selectedTheme');
+    if (storedThemeId) {
+      const theme = getTheme(storedThemeId);
+      if (theme) return theme;
+    }
+    
+    // Fallback to dark/light based on system preference
+    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    return getTheme(prefersDark ? 'default-dark' : 'default-light') || themes[0];
+  });
+
+  // Apply theme CSS custom properties
+  useEffect(() => {
+    const root = document.documentElement;
+    const body = document.body;
+    
+    if (!root || !body) return;
+
+    // Apply all theme colors as CSS custom properties
+    Object.entries(currentTheme.colors).forEach(([key, value]) => {
+      root.style.setProperty(`--theme-${key.replace(/([A-Z])/g, '-$1').toLowerCase()}`, value);
+    });
+
+    // Apply typography properties as CSS custom properties
+    Object.entries(currentTheme.typography).forEach(([key, value]) => {
+      root.style.setProperty(`--theme-${key.replace(/([A-Z])/g, '-$1').toLowerCase()}`, value);
+    });
+
+    // Apply spacing properties as CSS custom properties
+    Object.entries(currentTheme.spacing).forEach(([key, value]) => {
+      root.style.setProperty(`--theme-${key.replace(/([A-Z])/g, '-$1').toLowerCase()}`, value);
+    });
+
+    // Set theme class for legacy compatibility
+    if (currentTheme.isDark) {
+      body.classList.add('dark');
+      body.classList.remove('light');
+    } else {
+      body.classList.add('light');
+      body.classList.remove('dark');
+    }
+
+    // Set theme-specific class
+    body.className = body.className.replace(/theme-[a-z-]+/g, '');
+    body.classList.add(`theme-${currentTheme.id.replace('-light', '').replace('-dark', '')}`);
+
+    // Store theme preference
+    localStorage.setItem('selectedTheme', currentTheme.id);
+  }, [currentTheme]);
+
+  const setTheme = (themeId: string) => {
+    const theme = getTheme(themeId);
+    if (theme) {
+      setCurrentTheme(theme);
+    }
+  };
+
+  const toggleTheme = () => {
+    const currentIndex = themes.findIndex(t => t.id === currentTheme.id);
+    const nextIndex = (currentIndex + 1) % themes.length;
+    setCurrentTheme(themes[nextIndex]);
+  };
+
+  const toggleMode = () => {
+    const currentBaseThemeId = currentTheme.id.replace('-light', '').replace('-dark', '');
+    const newMode = currentTheme.mode === 'light' ? 'dark' : 'light';
+    const newThemeId = `${currentBaseThemeId}-${newMode}`;
+    const newTheme = getTheme(newThemeId);
+    if (newTheme) {
+      setCurrentTheme(newTheme);
+    }
+  };
+
+  const getThemesByBase = () => {
+    const themesByBase = new Map();
+    themes.forEach(theme => {
+      const baseId = theme.id.replace('-light', '').replace('-dark', '');
+      if (!themesByBase.has(baseId)) {
+        themesByBase.set(baseId, { light: null, dark: null });
+      }
+      const entry = themesByBase.get(baseId);
+      if (theme.mode === 'light') {
+        entry.light = theme;
+      } else {
+        entry.dark = theme;
+      }
+    });
+    return themesByBase;
+  };
+
+  return {
+    currentTheme,
+    setTheme,
+    toggleTheme,
+    toggleMode,
+    getThemesByBase,
+    themes: themes,
+    isDark: currentTheme.isDark
+  };
 }
\ No newline at end of file