@eventcatalog/core 3.0.0 → 3.2.0

package/eventcatalog/src/components/SchemaExplorer/ProducersConsumersSection.tsx

@@ -17,47 +17,51 @@ export default function ProducersConsumersSection({ message, isExpanded, onToggl
   if (totalCount === 0) return null;
 
   return (
-    <div className="flex-shrink-0 border-b border-gray-200">
+    <div className="flex-shrink-0 border-b border-[rgb(var(--ec-page-border))]">
       <button
         onClick={onToggle}
-        className="w-full flex items-center justify-between px-4 py-1.5 text-left hover:bg-gray-50 transition-colors"
+        className="w-full flex items-center justify-between px-4 py-1.5 text-left hover:bg-[rgb(var(--ec-content-hover))] transition-colors"
       >
         <div className="flex items-center gap-2">
           <svg
             xmlns="http://www.w3.org/2000/svg"
-            className="h-4 w-4 text-gray-600"
+            className="h-4 w-4 text-[rgb(var(--ec-page-text-muted))]"
             fill="none"
             viewBox="0 0 24 24"
             stroke="currentColor"
           >
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
           </svg>
-          <span className="text-xs font-semibold text-gray-900">Producers & Consumers</span>
-          <span className="inline-flex items-center rounded-full bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-700">
+          <span className="text-xs font-semibold text-[rgb(var(--ec-page-text))]">Producers & Consumers</span>
+          <span className="inline-flex items-center rounded-full bg-[rgb(var(--ec-content-hover))] px-2 py-0.5 text-xs font-medium text-[rgb(var(--ec-page-text-muted))]">
             {totalCount} services
           </span>
         </div>
-        {isExpanded ? <ChevronUpIcon className="h-4 w-4 text-gray-600" /> : <ChevronDownIcon className="h-4 w-4 text-gray-600" />}
+        {isExpanded ? (
+          <ChevronUpIcon className="h-4 w-4 text-[rgb(var(--ec-page-text-muted))]" />
+        ) : (
+          <ChevronDownIcon className="h-4 w-4 text-[rgb(var(--ec-page-text-muted))]" />
+        )}
       </button>
 
       {isExpanded && (
-        <div className="px-4 pb-2 bg-gray-50">
+        <div className="px-4 pb-2 bg-[rgb(var(--ec-content-hover))]">
           {producers.length > 0 && (
             <div className="mb-3">
-              <h4 className="text-xs font-semibold text-gray-900 mb-2">Producers ({producers.length})</h4>
+              <h4 className="text-xs font-semibold text-[rgb(var(--ec-page-text))] mb-2">Producers ({producers.length})</h4>
               <div className="flex flex-wrap gap-2">
                 {producers.map((producer: Producer, idx: number) => (
                   <a
                     key={`${producer.id}-${idx}`}
                     href={buildUrl(`/docs/services/${producer.id}/${producer.version}`)}
-                    className="inline-flex items-center gap-1.5 pl-1 pr-3 py-1 text-xs font-medium text-gray-700 bg-white border border-gray-200 rounded-full hover:border-gray-300 hover:shadow-sm transition-all"
+                    className="inline-flex items-center gap-1.5 pl-1 pr-3 py-1 text-xs font-medium text-[rgb(var(--ec-page-text))] bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] border border-[rgb(var(--ec-page-border))] rounded-full hover:border-pink-400 dark:hover:border-pink-500 hover:shadow-sm transition-all"
                     title={`View ${producer.id}`}
                   >
                     <div className="flex items-center justify-center w-5 h-5 bg-gradient-to-b from-pink-500 to-pink-600 rounded-full">
                       <ServerIcon className="h-3 w-3 text-white" />
                     </div>
                     <span className="font-medium">{producer.id}</span>
-                    <span className="text-gray-500 text-[11px]">v{producer.version}</span>
+                    <span className="text-[rgb(var(--ec-page-text-muted))] text-[11px]">v{producer.version}</span>
                   </a>
                 ))}
               </div>
@@ -65,20 +69,20 @@ export default function ProducersConsumersSection({ message, isExpanded, onToggl
           )}
           {consumers.length > 0 && (
             <div>
-              <h4 className="text-xs font-semibold text-gray-900 mb-2">Consumers ({consumers.length})</h4>
+              <h4 className="text-xs font-semibold text-[rgb(var(--ec-page-text))] mb-2">Consumers ({consumers.length})</h4>
               <div className="flex flex-wrap gap-2">
                 {consumers.map((consumer: Consumer, idx: number) => (
                   <a
                     key={`${consumer.id}-${idx}`}
                     href={buildUrl(`/docs/services/${consumer.id}/${consumer.version}`)}
-                    className="inline-flex items-center gap-1.5 pl-1 pr-3 py-1 text-xs font-medium text-gray-700 bg-white border border-gray-200 rounded-full hover:border-gray-300 hover:shadow-sm transition-all"
+                    className="inline-flex items-center gap-1.5 pl-1 pr-3 py-1 text-xs font-medium text-[rgb(var(--ec-page-text))] bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] border border-[rgb(var(--ec-page-border))] rounded-full hover:border-pink-400 dark:hover:border-pink-500 hover:shadow-sm transition-all"
                     title={`View ${consumer.id}`}
                   >
                     <div className="flex items-center justify-center w-5 h-5 bg-gradient-to-b from-pink-500 to-pink-600 rounded-full">
                       <ServerIcon className="h-3 w-3 text-white" />
                     </div>
                     <span className="font-medium">{consumer.id}</span>
-                    <span className="text-gray-500 text-[11px]">v{consumer.version}</span>
+                    <span className="text-[rgb(var(--ec-page-text-muted))] text-[11px]">v{consumer.version}</span>
                   </a>
                 ))}
               </div>

package/eventcatalog/src/components/SchemaExplorer/SchemaContentViewer.tsx

@@ -1,11 +1,13 @@
 import { ClipboardDocumentIcon, ArrowsPointingOutIcon } from '@heroicons/react/24/outline';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { oneLight as syntaxHighlighterStyle } from 'react-syntax-highlighter/dist/cjs/styles/prism';
+import { oneDark } from 'react-syntax-highlighter/dist/cjs/styles/prism';
+import { oneLight } from 'react-syntax-highlighter/dist/cjs/styles/prism';
 import { buildUrl } from '@utils/url-builder';
 import JSONSchemaViewer from './JSONSchemaViewer';
 import AvroSchemaViewer from './AvroSchemaViewer';
 import { getLanguageForHighlight } from './utils';
 import type { SchemaItem } from './types';
+import { useState, useEffect } from 'react';
 
 interface SchemaContentViewerProps {
   message: SchemaItem;
@@ -28,9 +30,34 @@ export default function SchemaContentViewer({
   showRequired = false,
   onOpenFullscreen,
 }: SchemaContentViewerProps) {
+  const [isDarkMode, setIsDarkMode] = useState(false);
+
+  useEffect(() => {
+    // Check initial theme
+    const checkTheme = () => {
+      const theme = document.documentElement.getAttribute('data-theme');
+      setIsDarkMode(theme === 'dark');
+    };
+
+    checkTheme();
+
+    // Watch for theme changes
+    const observer = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        if (mutation.attributeName === 'data-theme') {
+          checkTheme();
+        }
+      });
+    });
+
+    observer.observe(document.documentElement, { attributes: true });
+
+    return () => observer.disconnect();
+  }, []);
+
   if (!message.schemaContent) {
     return (
-      <div className="flex items-center justify-center h-full text-gray-500">
+      <div className="flex items-center justify-center h-full text-[rgb(var(--ec-page-text-muted))]">
         <p className="text-sm">No schema content available</p>
       </div>
     );
@@ -47,7 +74,7 @@ export default function SchemaContentViewer({
   }
 
   return (
-    <div className="h-full overflow-auto p-3 relative bg-white border border-gray-200 rounded-lg">
+    <div className="h-full overflow-auto p-3 relative bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] border border-[rgb(var(--ec-page-border))] rounded-lg">
       <div className="absolute top-5 right-5 z-10 flex items-center gap-2">
         {message.collection === 'services' &&
           (() => {
@@ -67,7 +94,7 @@ export default function SchemaContentViewer({
             return (
               <a
                 href={specUrl}
-                className="inline-flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium text-gray-700 bg-white border border-gray-300 hover:bg-gray-50 rounded-md transition-colors shadow-sm"
+                className="inline-flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium text-[rgb(var(--ec-page-text-muted))] bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] border border-[rgb(var(--ec-page-border))] hover:bg-[rgb(var(--ec-content-hover))] hover:text-[rgb(var(--ec-page-text))] rounded-md transition-colors shadow-sm"
                 title="View full specification"
               >
                 <svg
@@ -91,7 +118,7 @@ export default function SchemaContentViewer({
         {onOpenFullscreen && (
           <button
             onClick={onOpenFullscreen}
-            className="inline-flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium text-gray-700 bg-white border border-gray-300 hover:bg-gray-50 rounded-md transition-colors shadow-sm"
+            className="inline-flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium text-[rgb(var(--ec-page-text-muted))] bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] border border-[rgb(var(--ec-page-border))] hover:bg-[rgb(var(--ec-content-hover))] hover:text-[rgb(var(--ec-page-text))] rounded-md transition-colors shadow-sm"
             title="Open in fullscreen"
           >
             <ArrowsPointingOutIcon className="h-3.5 w-3.5" />
@@ -100,7 +127,7 @@ export default function SchemaContentViewer({
         )}
         <button
           onClick={onCopy}
-          className="inline-flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium text-gray-700 bg-white border border-gray-300 hover:bg-gray-50 rounded-md transition-colors shadow-sm"
+          className="inline-flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium text-[rgb(var(--ec-page-text-muted))] bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] border border-[rgb(var(--ec-page-border))] hover:bg-[rgb(var(--ec-content-hover))] hover:text-[rgb(var(--ec-page-text))] rounded-md transition-colors shadow-sm"
           title="Copy code"
         >
           <ClipboardDocumentIcon className="h-3.5 w-3.5" />
@@ -109,7 +136,7 @@ export default function SchemaContentViewer({
       </div>
       <SyntaxHighlighter
         language={getLanguageForHighlight(message.schemaExtension)}
-        style={syntaxHighlighterStyle}
+        style={isDarkMode ? oneDark : oneLight}
         customStyle={{
           margin: 0,
           padding: '0.75rem',
@@ -119,8 +146,8 @@ export default function SchemaContentViewer({
           lineHeight: '1.5',
           height: '100%',
           overflow: 'auto',
+          background: 'rgb(var(--ec-code-bg))',
         }}
-        className="bg-white border border-gray-200 rounded-lg"
         showLineNumbers={true}
         wrapLines={true}
         wrapLongLines={true}

package/eventcatalog/src/components/SchemaExplorer/SchemaDetailsHeader.tsx

@@ -50,7 +50,7 @@ export default function SchemaDetailsHeader({
   const iconName = ext === 'json' ? 'json-schema' : ext;
 
   return (
-    <div className="flex-shrink-0 border-b border-gray-200 bg-white">
+    <div className="flex-shrink-0 border-b border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))]">
       {/* Main Header */}
       <div className="px-4 py-3">
         <div className="flex items-start justify-between gap-4">
@@ -58,19 +58,19 @@ export default function SchemaDetailsHeader({
             {/* Title Row */}
             <div className="flex items-start gap-3">
               <div
-                className={`flex-shrink-0 flex items-center justify-center w-9 h-9 rounded-lg bg-${color}-50 border border-${color}-100 mt-0.5`}
+                className={`flex-shrink-0 flex items-center justify-center w-9 h-9 rounded-lg bg-${color}-50 dark:bg-${color}-500/10 border border-${color}-100 dark:border-${color}-500/30 mt-0.5`}
               >
-                <Icon className={`h-4.5 w-4.5 text-${color}-600`} />
+                <Icon className={`h-4.5 w-4.5 text-${color}-600 dark:text-${color}-400`} />
               </div>
               <div className="min-w-0 flex-1">
                 <div className="flex items-center gap-2">
-                  <h2 className="text-base font-semibold text-gray-900 truncate">{message.data.name}</h2>
+                  <h2 className="text-base font-semibold text-[rgb(var(--ec-page-text))] truncate">{message.data.name}</h2>
                   {hasMultipleVersions ? (
                     <div className="relative flex-shrink-0">
                       <select
                         value={selectedVersion || message.data.version}
                         onChange={(e) => onVersionChange(e.target.value)}
-                        className="appearance-none text-xs font-medium text-gray-600 bg-gray-50 border border-gray-200 rounded-md pl-2.5 pr-7 py-1 focus:outline-none focus:ring-1 focus:ring-gray-300 focus:border-gray-300 cursor-pointer hover:bg-gray-100 transition-colors"
+                        className="appearance-none text-xs font-medium text-[rgb(var(--ec-page-text-muted))] bg-[rgb(var(--ec-content-hover))] border border-[rgb(var(--ec-page-border))] rounded-md pl-2.5 pr-7 py-1 focus:outline-none focus:ring-1 focus:ring-[rgb(var(--ec-accent))] focus:border-[rgb(var(--ec-accent))] cursor-pointer hover:bg-[rgb(var(--ec-input-bg))] transition-colors"
                       >
                         {availableVersions.map((v) => (
                           <option key={v.data.version} value={v.data.version}>
@@ -78,10 +78,10 @@ export default function SchemaDetailsHeader({
                           </option>
                         ))}
                       </select>
-                      <ClockIcon className="absolute right-2 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-gray-400 pointer-events-none" />
+                      <ClockIcon className="absolute right-2 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-[rgb(var(--ec-icon-color))] pointer-events-none" />
                     </div>
                   ) : (
-                    <span className="text-xs text-gray-500 flex-shrink-0 font-medium bg-gray-50 px-2 py-1 rounded-md border border-gray-200">
+                    <span className="text-xs text-[rgb(var(--ec-page-text-muted))] flex-shrink-0 font-medium bg-[rgb(var(--ec-content-hover))] px-2 py-1 rounded-md border border-[rgb(var(--ec-page-border))]">
                       v{message.data.version}
                     </span>
                   )}
@@ -89,11 +89,11 @@ export default function SchemaDetailsHeader({
                 {/* Tags */}
                 <div className="flex items-center gap-1.5 mt-1">
                   <span
-                    className={`inline-flex items-center px-1.5 py-0.5 rounded text-[11px] font-medium bg-${color}-50 text-${color}-700 border border-${color}-100`}
+                    className={`inline-flex items-center px-1.5 py-0.5 rounded text-[11px] font-medium bg-${color}-50 dark:bg-${color}-500/10 text-${color}-700 dark:text-${color}-400 border border-${color}-100 dark:border-${color}-500/30`}
                   >
                     {message.collection}
                   </span>
-                  <span className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-[11px] font-medium bg-gray-50 text-gray-600 border border-gray-100">
+                  <span className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-[11px] font-medium bg-[rgb(var(--ec-content-hover))] text-[rgb(var(--ec-page-text-muted))] border border-[rgb(var(--ec-page-border))]">
                     {hasSchemaIcon && (
                       <img src={buildUrl(`/icons/${iconName}.svg`, true)} alt={`${ext} icon`} className="h-3 w-3 opacity-70" />
                     )}
@@ -101,7 +101,9 @@ export default function SchemaDetailsHeader({
                   </span>
                 </div>
                 {/* Summary */}
-                {message.data.summary && <p className="text-xs text-gray-500 mt-1.5 line-clamp-1">{message.data.summary}</p>}
+                {message.data.summary && (
+                  <p className="text-xs text-[rgb(var(--ec-page-text-muted))] mt-1.5 line-clamp-1">{message.data.summary}</p>
+                )}
               </div>
             </div>
           </div>
@@ -109,7 +111,7 @@ export default function SchemaDetailsHeader({
           {/* View Docs Button */}
           <a
             href={buildUrl(`/docs/${message.collection}/${message.data.id}/${message.data.version}`)}
-            className="flex-shrink-0 inline-flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium text-gray-600 bg-white border border-gray-200 rounded-md hover:bg-gray-50 hover:text-gray-900 transition-colors"
+            className="flex-shrink-0 inline-flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium text-[rgb(var(--ec-page-text-muted))] bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] border border-[rgb(var(--ec-page-border))] rounded-md hover:bg-[rgb(var(--ec-content-hover))] hover:text-[rgb(var(--ec-page-text))] transition-colors"
           >
             View docs
             <ArrowTopRightOnSquareIcon className="h-3.5 w-3.5" />
@@ -118,13 +120,15 @@ export default function SchemaDetailsHeader({
       </div>
 
       {/* Action Bar */}
-      <div className="px-4 py-2 bg-gray-50/50 border-t border-gray-100 flex items-center justify-between">
+      <div className="px-4 py-2 bg-[rgb(var(--ec-content-hover))] border-t border-[rgb(var(--ec-page-border))] flex items-center justify-between">
         {/* View Mode Toggle */}
-        <div className="flex items-center gap-0.5 p-0.5 bg-gray-100/80 rounded-md">
+        <div className="flex items-center gap-0.5 p-0.5 bg-[rgb(var(--ec-input-bg))] border border-[rgb(var(--ec-page-border))] rounded-md">
           <button
             onClick={() => onViewModeChange('code')}
             className={`inline-flex items-center gap-1.5 px-2.5 py-1 text-xs font-medium rounded transition-all ${
-              schemaViewMode === 'code' ? 'bg-white text-gray-900 shadow-sm' : 'text-gray-500 hover:text-gray-700'
+              schemaViewMode === 'code'
+                ? 'bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] text-[rgb(var(--ec-page-text))] shadow-sm'
+                : 'text-[rgb(var(--ec-page-text-muted))] hover:text-[rgb(var(--ec-page-text))]'
             }`}
             title="View raw code"
           >
@@ -135,7 +139,9 @@ export default function SchemaDetailsHeader({
             <button
               onClick={() => onViewModeChange('schema')}
               className={`inline-flex items-center gap-1.5 px-2.5 py-1 text-xs font-medium rounded transition-all ${
-                schemaViewMode === 'schema' ? 'bg-white text-gray-900 shadow-sm' : 'text-gray-500 hover:text-gray-700'
+                schemaViewMode === 'schema'
+                  ? 'bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] text-[rgb(var(--ec-page-text))] shadow-sm'
+                  : 'text-[rgb(var(--ec-page-text-muted))] hover:text-[rgb(var(--ec-page-text))]'
               }`}
               title="View as schema"
             >
@@ -147,7 +153,9 @@ export default function SchemaDetailsHeader({
             <button
               onClick={() => onViewModeChange('diff')}
               className={`inline-flex items-center gap-1.5 px-2.5 py-1 text-xs font-medium rounded transition-all ${
-                schemaViewMode === 'diff' ? 'bg-white text-gray-900 shadow-sm' : 'text-gray-500 hover:text-gray-700'
+                schemaViewMode === 'diff'
+                  ? 'bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] text-[rgb(var(--ec-page-text))] shadow-sm'
+                  : 'text-[rgb(var(--ec-page-text-muted))] hover:text-[rgb(var(--ec-page-text))]'
               }`}
               title="View version diffs"
             >
@@ -155,7 +163,9 @@ export default function SchemaDetailsHeader({
               History
               <span
                 className={`ml-0.5 px-1 py-0.5 rounded text-[10px] tabular-nums ${
-                  schemaViewMode === 'diff' ? 'bg-gray-100 text-gray-600' : 'bg-gray-200/60 text-gray-500'
+                  schemaViewMode === 'diff'
+                    ? 'bg-[rgb(var(--ec-content-hover))] text-[rgb(var(--ec-page-text-muted))]'
+                    : 'bg-[rgb(var(--ec-input-bg))] text-[rgb(var(--ec-icon-color))]'
                 }`}
               >
                 {diffCount}
@@ -165,7 +175,9 @@ export default function SchemaDetailsHeader({
           <button
             onClick={() => onViewModeChange('api')}
             className={`inline-flex items-center gap-1.5 px-2.5 py-1 text-xs font-medium rounded transition-all ${
-              schemaViewMode === 'api' ? 'bg-white text-gray-900 shadow-sm' : 'text-gray-500 hover:text-gray-700'
+              schemaViewMode === 'api'
+                ? 'bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] text-[rgb(var(--ec-page-text))] shadow-sm'
+                : 'text-[rgb(var(--ec-page-text-muted))] hover:text-[rgb(var(--ec-page-text))]'
             }`}
             title="API access"
           >
@@ -180,8 +192,8 @@ export default function SchemaDetailsHeader({
             onClick={onCopy}
             className={`inline-flex items-center gap-1 px-2 py-1 text-xs font-medium rounded-md transition-all ${
               isCopied
-                ? 'bg-green-50 text-green-600 border border-green-200'
-                : 'text-gray-500 bg-white border border-gray-200 hover:bg-gray-50 hover:text-gray-700'
+                ? 'bg-green-50 dark:bg-green-500/10 text-green-600 dark:text-green-400 border border-green-200 dark:border-green-500/30'
+                : 'text-[rgb(var(--ec-page-text-muted))] bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] border border-[rgb(var(--ec-page-border))] hover:bg-[rgb(var(--ec-content-hover))] hover:text-[rgb(var(--ec-page-text))]'
             }`}
             title="Copy schema to clipboard"
           >
@@ -199,7 +211,7 @@ export default function SchemaDetailsHeader({
           </button>
           <button
             onClick={onDownload}
-            className="inline-flex items-center gap-1 px-2 py-1 text-xs font-medium text-gray-500 bg-white border border-gray-200 rounded-md hover:bg-gray-50 hover:text-gray-700 transition-all"
+            className="inline-flex items-center gap-1 px-2 py-1 text-xs font-medium text-[rgb(var(--ec-page-text-muted))] bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] border border-[rgb(var(--ec-page-border))] rounded-md hover:bg-[rgb(var(--ec-content-hover))] hover:text-[rgb(var(--ec-page-text))] transition-all"
             title="Download schema file"
           >
             <ArrowDownTrayIcon className="h-3.5 w-3.5" />

package/eventcatalog/src/components/SchemaExplorer/SchemaDetailsPanel.tsx

@@ -142,7 +142,7 @@ export default function SchemaDetailsPanel({
   const isCopied = copiedId === message.data.id;
 
   return (
-    <div className="h-full flex flex-col bg-white overflow-hidden">
+    <div className="h-full flex flex-col bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] overflow-hidden">
       {/* Header */}
       <SchemaDetailsHeader
         message={message}

package/eventcatalog/src/components/SchemaExplorer/SchemaExplorer.tsx

@@ -351,14 +351,14 @@ export default function SchemaExplorer({ schemas, apiAccessEnabled = false }: Sc
       {/* Split View - Full Height */}
       <div className="flex-1 flex gap-4 overflow-hidden">
         {/* Left: Schema List */}
-        <div className="w-[320px] flex-shrink-0 flex flex-col bg-white border border-gray-200 rounded-lg overflow-hidden shadow-sm">
+        <div className="w-[320px] flex-shrink-0 flex flex-col bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] border border-[rgb(var(--ec-page-border))] rounded-lg overflow-hidden shadow-sm">
           {/* Search Header */}
-          <div className="flex-shrink-0 p-3 border-b border-gray-200">
+          <div className="flex-shrink-0 p-3 border-b border-[rgb(var(--ec-page-border))]">
             {/* Search + Format Filter Row */}
             <div className="flex items-center gap-2">
               <div className="relative flex-1">
                 <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
-                  <MagnifyingGlassIcon className="h-4 w-4 text-gray-400" />
+                  <MagnifyingGlassIcon className="h-4 w-4 text-[rgb(var(--ec-icon-color))]" />
                 </div>
                 <input
                   ref={searchInputRef}
@@ -366,11 +366,11 @@ export default function SchemaExplorer({ schemas, apiAccessEnabled = false }: Sc
                   placeholder="Search schemas..."
                   value={searchQuery}
                   onChange={(e) => setSearchQuery(e.target.value)}
-                  className="w-full rounded-md border border-gray-200 bg-white py-2 pl-9 pr-8 text-sm placeholder:text-gray-400 focus:border-gray-300 focus:outline-none focus:ring-1 focus:ring-gray-300 transition-all"
+                  className="w-full rounded-md border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-input-bg))] py-2 pl-9 pr-8 text-sm text-[rgb(var(--ec-page-text))] placeholder:text-[rgb(var(--ec-icon-color))] focus:border-[rgb(var(--ec-accent))] focus:outline-none focus:ring-1 focus:ring-[rgb(var(--ec-accent)/0.3)] transition-all"
                 />
                 {searchQuery && (
                   <button onClick={() => setSearchQuery('')} className="absolute inset-y-0 right-0 flex items-center pr-2.5">
-                    <XMarkIcon className="h-4 w-4 text-gray-400 hover:text-gray-600" />
+                    <XMarkIcon className="h-4 w-4 text-[rgb(var(--ec-icon-color))] hover:text-[rgb(var(--ec-page-text))]" />
                   </button>
                 )}
               </div>
@@ -379,7 +379,7 @@ export default function SchemaExplorer({ schemas, apiAccessEnabled = false }: Sc
                 <select
                   value={selectedSchemaType}
                   onChange={(e) => setSelectedSchemaType(e.target.value)}
-                  className="flex-shrink-0 text-xs font-medium text-gray-600 bg-white border border-gray-200 rounded-md px-2 py-2 focus:outline-none focus:ring-1 focus:ring-gray-300 focus:border-gray-300 cursor-pointer hover:bg-gray-50 transition-colors"
+                  className="flex-shrink-0 text-xs font-medium text-[rgb(var(--ec-page-text-muted))] bg-[rgb(var(--ec-input-bg))] border border-[rgb(var(--ec-page-border))] rounded-md px-2 py-2 focus:outline-none focus:ring-1 focus:ring-[rgb(var(--ec-accent)/0.3)] focus:border-[rgb(var(--ec-accent))] cursor-pointer hover:bg-[rgb(var(--ec-content-hover))] transition-colors"
                 >
                   <option value="all">All formats</option>
                   {schemaTypes.map((type) => {
@@ -408,14 +408,16 @@ export default function SchemaExplorer({ schemas, apiAccessEnabled = false }: Sc
                   onClick={() => toggleType('events')}
                   className={`inline-flex items-center gap-1.5 px-2 py-1 rounded-md text-xs font-medium transition-all border ${
                     selectedTypes.has('events')
-                      ? 'bg-orange-50 text-orange-700 border-orange-200'
-                      : 'text-gray-600 border-gray-200 hover:bg-gray-50'
+                      ? 'bg-orange-50 dark:bg-orange-500/10 text-orange-700 dark:text-orange-300 border-orange-200 dark:border-orange-500/30'
+                      : 'text-[rgb(var(--ec-page-text-muted))] border-[rgb(var(--ec-page-border))] hover:bg-[rgb(var(--ec-content-hover))]'
                   }`}
                   title="Events"
                 >
                   <BoltIcon className={`h-3.5 w-3.5 ${selectedTypes.has('events') ? 'text-orange-500' : 'text-orange-400'}`} />
                   <span>Events</span>
-                  <span className={`tabular-nums ${selectedTypes.has('events') ? 'text-orange-500' : 'text-gray-400'}`}>
+                  <span
+                    className={`tabular-nums ${selectedTypes.has('events') ? 'text-orange-500' : 'text-[rgb(var(--ec-icon-color))]'}`}
+                  >
                     {stats.events}
                   </span>
                 </button>
@@ -425,8 +427,8 @@ export default function SchemaExplorer({ schemas, apiAccessEnabled = false }: Sc
                   onClick={() => toggleType('commands')}
                   className={`inline-flex items-center gap-1.5 px-2 py-1 rounded-md text-xs font-medium transition-all border ${
                     selectedTypes.has('commands')
-                      ? 'bg-blue-50 text-blue-700 border-blue-200'
-                      : 'text-gray-600 border-gray-200 hover:bg-gray-50'
+                      ? 'bg-blue-50 dark:bg-blue-500/10 text-blue-700 dark:text-blue-300 border-blue-200 dark:border-blue-500/30'
+                      : 'text-[rgb(var(--ec-page-text-muted))] border-[rgb(var(--ec-page-border))] hover:bg-[rgb(var(--ec-content-hover))]'
                   }`}
                   title="Commands"
                 >
@@ -434,7 +436,9 @@ export default function SchemaExplorer({ schemas, apiAccessEnabled = false }: Sc
                     className={`h-3.5 w-3.5 ${selectedTypes.has('commands') ? 'text-blue-500' : 'text-blue-400'}`}
                   />
                   <span>Commands</span>
-                  <span className={`tabular-nums ${selectedTypes.has('commands') ? 'text-blue-500' : 'text-gray-400'}`}>
+                  <span
+                    className={`tabular-nums ${selectedTypes.has('commands') ? 'text-blue-500' : 'text-[rgb(var(--ec-icon-color))]'}`}
+                  >
                     {stats.commands}
                   </span>
                 </button>
@@ -444,8 +448,8 @@ export default function SchemaExplorer({ schemas, apiAccessEnabled = false }: Sc
                   onClick={() => toggleType('queries')}
                   className={`inline-flex items-center gap-1.5 px-2 py-1 rounded-md text-xs font-medium transition-all border ${
                     selectedTypes.has('queries')
-                      ? 'bg-green-50 text-green-700 border-green-200'
-                      : 'text-gray-600 border-gray-200 hover:bg-gray-50'
+                      ? 'bg-green-50 dark:bg-green-500/10 text-green-700 dark:text-green-300 border-green-200 dark:border-green-500/30'
+                      : 'text-[rgb(var(--ec-page-text-muted))] border-[rgb(var(--ec-page-border))] hover:bg-[rgb(var(--ec-content-hover))]'
                   }`}
                   title="Queries"
                 >
@@ -453,7 +457,9 @@ export default function SchemaExplorer({ schemas, apiAccessEnabled = false }: Sc
                     className={`h-3.5 w-3.5 ${selectedTypes.has('queries') ? 'text-green-500' : 'text-green-400'}`}
                   />
                   <span>Queries</span>
-                  <span className={`tabular-nums ${selectedTypes.has('queries') ? 'text-green-500' : 'text-gray-400'}`}>
+                  <span
+                    className={`tabular-nums ${selectedTypes.has('queries') ? 'text-green-500' : 'text-[rgb(var(--ec-icon-color))]'}`}
+                  >
                     {stats.queries}
                   </span>
                 </button>
@@ -463,16 +469,18 @@ export default function SchemaExplorer({ schemas, apiAccessEnabled = false }: Sc
                   onClick={() => toggleType('specifications')}
                   className={`inline-flex items-center gap-1.5 px-2 py-1 rounded-md text-xs font-medium transition-all border ${
                     selectedTypes.has('specifications')
-                      ? 'bg-purple-50 text-purple-700 border-purple-200'
-                      : 'text-gray-600 border-gray-200 hover:bg-gray-50'
+                      ? 'bg-[rgb(var(--ec-accent-subtle))] text-[rgb(var(--ec-accent-text))] border-[rgb(var(--ec-accent)/0.3)]'
+                      : 'text-[rgb(var(--ec-page-text-muted))] border-[rgb(var(--ec-page-border))] hover:bg-[rgb(var(--ec-content-hover))]'
                   }`}
                   title="Specifications (OpenAPI, AsyncAPI, etc.)"
                 >
                   <CodeBracketIcon
-                    className={`h-3.5 w-3.5 ${selectedTypes.has('specifications') ? 'text-purple-500' : 'text-purple-400'}`}
+                    className={`h-3.5 w-3.5 ${selectedTypes.has('specifications') ? 'text-[rgb(var(--ec-accent))]' : 'text-[rgb(var(--ec-accent)/0.7)]'}`}
                   />
                   <span>Specs</span>
-                  <span className={`tabular-nums ${selectedTypes.has('specifications') ? 'text-purple-500' : 'text-gray-400'}`}>
+                  <span
+                    className={`tabular-nums ${selectedTypes.has('specifications') ? 'text-[rgb(var(--ec-accent))]' : 'text-[rgb(var(--ec-icon-color))]'}`}
+                  >
                     {stats.specifications}
                   </span>
                 </button>
@@ -481,8 +489,8 @@ export default function SchemaExplorer({ schemas, apiAccessEnabled = false }: Sc
           </div>
 
           {/* Results Count Bar */}
-          <div className="flex-shrink-0 px-3 py-1.5 bg-gray-50 border-b border-gray-100 flex items-center justify-between">
-            <span className="text-xs text-gray-500">
+          <div className="flex-shrink-0 px-3 py-1.5 bg-[rgb(var(--ec-content-hover))] border-b border-[rgb(var(--ec-page-border))] flex items-center justify-between">
+            <span className="text-xs text-[rgb(var(--ec-page-text-muted))]">
               {filteredMessages.length === stats.total
                 ? `${stats.total} schemas`
                 : `${filteredMessages.length} of ${stats.total} schemas`}
@@ -494,7 +502,7 @@ export default function SchemaExplorer({ schemas, apiAccessEnabled = false }: Sc
                   clearTypeFilters();
                   setSelectedSchemaType('all');
                 }}
-                className="text-xs text-gray-500 hover:text-gray-700"
+                className="text-xs text-[rgb(var(--ec-page-text-muted))] hover:text-[rgb(var(--ec-page-text))]"
               >
                 Clear filters
               </button>
@@ -504,7 +512,7 @@ export default function SchemaExplorer({ schemas, apiAccessEnabled = false }: Sc
           {/* Schema List - Independently Scrollable */}
           <div className="flex-1 overflow-y-auto">
             {paginatedMessages.length > 0 ? (
-              <div className="divide-y divide-gray-100">
+              <div className="divide-y divide-[rgb(var(--ec-page-border))]">
                 {paginatedMessages.map((message) => {
                   // For services, also check spec type to determine if selected
                   const isSelected =
@@ -536,11 +544,11 @@ export default function SchemaExplorer({ schemas, apiAccessEnabled = false }: Sc
               </div>
             ) : (
               <div className="flex flex-col items-center justify-center h-full p-6 text-center">
-                <div className="flex items-center justify-center w-12 h-12 rounded-full bg-gray-100 mb-3">
-                  <MagnifyingGlassIcon className="h-6 w-6 text-gray-400" />
+                <div className="flex items-center justify-center w-12 h-12 rounded-full bg-[rgb(var(--ec-content-hover))] mb-3">
+                  <MagnifyingGlassIcon className="h-6 w-6 text-[rgb(var(--ec-icon-color))]" />
                 </div>
-                <h3 className="text-sm font-semibold text-gray-900 mb-1">No schemas found</h3>
-                <p className="text-xs text-gray-500 mb-3 max-w-[200px]">
+                <h3 className="text-sm font-semibold text-[rgb(var(--ec-page-text))] mb-1">No schemas found</h3>
+                <p className="text-xs text-[rgb(var(--ec-page-text-muted))] mb-3 max-w-[200px]">
                   {searchQuery ? `No results for "${searchQuery}"` : 'Try adjusting your filters'}
                 </p>
                 {(searchQuery || selectedTypes.size > 0 || selectedSchemaType !== 'all') && (
@@ -550,7 +558,7 @@ export default function SchemaExplorer({ schemas, apiAccessEnabled = false }: Sc
                       clearTypeFilters();
                       setSelectedSchemaType('all');
                     }}
-                    className="text-xs font-medium text-gray-600 hover:text-gray-900"
+                    className="text-xs font-medium text-[rgb(var(--ec-page-text-muted))] hover:text-[rgb(var(--ec-page-text))]"
                   >
                     Clear filters
                   </button>
@@ -564,7 +572,7 @@ export default function SchemaExplorer({ schemas, apiAccessEnabled = false }: Sc
         </div>
 
         {/* Right: Schema Details */}
-        <div className="flex-1 bg-white border border-gray-200 rounded-lg overflow-hidden">
+        <div className="flex-1 bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] border border-[rgb(var(--ec-page-border))] rounded-lg overflow-hidden">
           {displayMessage ? (
             <SchemaDetailsPanel
               message={displayMessage}
@@ -576,11 +584,11 @@ export default function SchemaExplorer({ schemas, apiAccessEnabled = false }: Sc
           ) : (
             <div className="h-full flex items-center justify-center">
               <div className="text-center max-w-xs">
-                <div className="flex items-center justify-center w-14 h-14 mx-auto mb-4 rounded-xl bg-gray-50 border border-gray-100">
-                  <DocumentTextIcon className="h-7 w-7 text-gray-400" />
+                <div className="flex items-center justify-center w-14 h-14 mx-auto mb-4 rounded-xl bg-[rgb(var(--ec-content-hover))] border border-[rgb(var(--ec-page-border))]">
+                  <DocumentTextIcon className="h-7 w-7 text-[rgb(var(--ec-icon-color))]" />
                 </div>
-                <h3 className="text-sm font-semibold text-gray-900 mb-1">Select a schema</h3>
-                <p className="text-sm text-gray-500 leading-relaxed">
+                <h3 className="text-sm font-semibold text-[rgb(var(--ec-page-text))] mb-1">Select a schema</h3>
+                <p className="text-sm text-[rgb(var(--ec-page-text-muted))] leading-relaxed">
                   Choose a schema from the list to view details, compare versions, and access raw code
                 </p>
               </div>