@eventcatalog/core 3.0.0 → 3.2.0

package/eventcatalog/src/components/Grids/MessageGrid.tsx

@@ -47,24 +47,28 @@ const MessageCard = memo(({ message, compact = false }: { message: any; compact?
   return (
     <a
       href={buildUrl(`/docs/${message.collection}/${message.data.id}/${message.data.version}`)}
-      className={`group block bg-white border border-${color}-200 rounded-lg shadow-sm hover:shadow-md hover:border-${color}-300 transition-all`}
+      className={`group block bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] border border-${color}-200 dark:border-${color}-500/30 rounded-lg shadow-sm hover:shadow-md hover:border-${color}-300 dark:hover:border-${color}-500/50 transition-all`}
     >
       <div className={compact ? 'p-3' : 'p-4'}>
         <div className="flex items-center gap-2 mb-1">
-          <div className={`flex items-center justify-center w-7 h-7 bg-${color}-100 rounded-md`}>
-            <Icon className={`h-4 w-4 text-${color}-600`} />
+          <div className={`flex items-center justify-center w-7 h-7 bg-${color}-100 dark:bg-${color}-500/20 rounded-md`}>
+            <Icon className={`h-4 w-4 text-${color}-600 dark:text-${color}-400`} />
           </div>
           <h3
-            className={`font-semibold text-gray-900 group-hover:text-${color}-600 transition-colors truncate ${compact ? 'text-sm' : 'text-base'}`}
+            className={`font-semibold text-[rgb(var(--ec-page-text))] group-hover:text-${color}-600 dark:group-hover:text-${color}-400 transition-colors truncate ${compact ? 'text-sm' : 'text-base'}`}
           >
             {message.data.name}
           </h3>
-          <span className={`text-[10px] text-${color}-600 font-medium bg-${color}-50 px-1.5 py-0.5 rounded flex-shrink-0`}>
+          <span
+            className={`text-[10px] text-${color}-600 dark:text-${color}-400 font-medium bg-${color}-50 dark:bg-${color}-500/20 px-1.5 py-0.5 rounded flex-shrink-0`}
+          >
             v{message.data.version}
           </span>
         </div>
         {message.data.summary && (
-          <p className={`text-gray-600 line-clamp-2 ${compact ? 'text-xs mt-1' : 'text-sm mt-2'}`}>{message.data.summary}</p>
+          <p className={`text-[rgb(var(--ec-page-text-muted))] line-clamp-2 ${compact ? 'text-xs mt-1' : 'text-sm mt-2'}`}>
+            {message.data.summary}
+          </p>
         )}
       </div>
     </a>
@@ -78,20 +82,28 @@ const ContainerCard = memo(({ container, type }: { container: any; type: 'reads'
   return (
     <a
       href={buildUrl(`/docs/containers/${container.data.id}/${container.data.version}`)}
-      className={`group block bg-white border rounded-lg shadow-sm hover:shadow-md transition-all ${
-        type === 'reads' ? 'border-amber-200 hover:border-amber-300' : 'border-violet-200 hover:border-violet-300'
+      className={`group block bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] border rounded-lg shadow-sm hover:shadow-md transition-all ${
+        type === 'reads'
+          ? 'border-amber-200 dark:border-amber-500/30 hover:border-amber-300 dark:hover:border-amber-500/50'
+          : 'border-violet-200 dark:border-violet-500/30 hover:border-violet-300 dark:hover:border-violet-500/50'
       }`}
     >
       <div className="p-3">
         <div className="flex items-center gap-2">
-          <div className={`flex items-center justify-center w-7 h-7 bg-${colorClass}-100 rounded-md`}>
-            <CircleStackIcon className={`h-4 w-4 text-${colorClass}-600`} />
+          <div
+            className={`flex items-center justify-center w-7 h-7 bg-${colorClass}-100 dark:bg-${colorClass}-500/20 rounded-md`}
+          >
+            <CircleStackIcon className={`h-4 w-4 text-${colorClass}-600 dark:text-${colorClass}-400`} />
           </div>
-          <h3 className={`font-semibold text-gray-900 text-sm group-hover:text-${colorClass}-600 transition-colors truncate`}>
+          <h3
+            className={`font-semibold text-[rgb(var(--ec-page-text))] text-sm group-hover:text-${colorClass}-600 dark:group-hover:text-${colorClass}-400 transition-colors truncate`}
+          >
             {container.data.name}
           </h3>
         </div>
-        {container.data.summary && <p className="text-xs text-gray-600 mt-1.5 line-clamp-2">{container.data.summary}</p>}
+        {container.data.summary && (
+          <p className="text-xs text-[rgb(var(--ec-page-text-muted))] mt-1.5 line-clamp-2">{container.data.summary}</p>
+        )}
       </div>
     </a>
   );
@@ -105,14 +117,16 @@ const SpecificationCard = memo(
     return (
       <a
         href={getSpecUrl(spec, serviceId, serviceVersion)}
-        className={`group flex items-center gap-3 p-3 bg-white border border-${color}-200 rounded-lg shadow-sm hover:shadow-md hover:border-${color}-300 transition-all`}
+        className={`group flex items-center gap-3 p-3 bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] border border-${color}-200 dark:border-${color}-500/30 rounded-lg shadow-sm hover:shadow-md hover:border-${color}-300 dark:hover:border-${color}-500/50 transition-all`}
       >
         <img src={buildUrl(`/icons/${getSpecIcon(spec.type)}.svg`, true)} alt={`${spec.type} icon`} className="h-6 w-6" />
         <div className="flex-1 min-w-0">
-          <h3 className={`font-semibold text-gray-900 text-sm group-hover:text-${color}-600 transition-colors truncate`}>
+          <h3
+            className={`font-semibold text-[rgb(var(--ec-page-text))] text-sm group-hover:text-${color}-600 dark:group-hover:text-${color}-400 transition-colors truncate`}
+          >
             {spec.name || spec.filename}
           </h3>
-          <p className="text-xs text-gray-500">{getSpecLabel(spec.type)}</p>
+          <p className="text-xs text-[rgb(var(--ec-page-text-muted))]">{getSpecLabel(spec.type)}</p>
         </div>
       </a>
     );
@@ -140,19 +154,21 @@ const CollapsibleMessageSection = memo(
     const hasContent = messages.length > 0;
 
     return (
-      <div className="bg-white border border-gray-200 rounded-xl shadow-sm overflow-hidden">
+      <div className="bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] border border-[rgb(var(--ec-page-border))] rounded-xl shadow-sm overflow-hidden">
         <div
           onClick={() => setIsCollapsed(!isCollapsed)}
-          className={`flex items-center justify-between px-5 py-4 cursor-pointer hover:bg-gray-50 transition-colors ${!isCollapsed && hasContent ? 'border-b border-gray-200' : ''}`}
+          className={`flex items-center justify-between px-5 py-4 cursor-pointer hover:bg-[rgb(var(--ec-content-hover))] transition-colors ${!isCollapsed && hasContent ? 'border-b border-[rgb(var(--ec-page-border))]' : ''}`}
         >
           <div className="flex items-center gap-3">
-            <div className={`flex items-center justify-center w-8 h-8 bg-${color}-100 rounded-lg`}>
-              <Icon className={`h-4 w-4 text-${color}-600`} />
+            <div className={`flex items-center justify-center w-8 h-8 bg-${color}-100 dark:bg-${color}-500/20 rounded-lg`}>
+              <Icon className={`h-4 w-4 text-${color}-600 dark:text-${color}-400`} />
             </div>
-            <h2 className="text-base font-bold text-gray-900">{title}</h2>
-            <span className="text-sm text-gray-500 bg-gray-100 px-2 py-0.5 rounded-full font-medium">{messages.length}</span>
+            <h2 className="text-base font-bold text-[rgb(var(--ec-page-text))]">{title}</h2>
+            <span className="text-sm text-[rgb(var(--ec-page-text-muted))] bg-[rgb(var(--ec-content-hover))] px-2 py-0.5 rounded-full font-medium">
+              {messages.length}
+            </span>
           </div>
-          <div className="text-gray-400">
+          <div className="text-[rgb(var(--ec-icon-color))]">
             {isCollapsed ? <ChevronDownIcon className="h-5 w-5" /> : <ChevronUpIcon className="h-5 w-5" />}
           </div>
         </div>
@@ -166,7 +182,7 @@ const CollapsibleMessageSection = memo(
               </div>
             ) : (
               <div className="text-center py-4">
-                <p className="text-sm text-gray-400">{emptyText}</p>
+                <p className="text-sm text-[rgb(var(--ec-icon-color))]">{emptyText}</p>
               </div>
             )}
           </div>
@@ -182,19 +198,21 @@ const CollapsibleContainerSection = memo(
     const [isCollapsed, setIsCollapsed] = useState(false);
 
     return (
-      <div className="bg-white border border-gray-200 rounded-xl shadow-sm overflow-hidden">
+      <div className="bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] border border-[rgb(var(--ec-page-border))] rounded-xl shadow-sm overflow-hidden">
         <div
           onClick={() => setIsCollapsed(!isCollapsed)}
-          className={`flex items-center justify-between px-5 py-4 cursor-pointer hover:bg-gray-50 transition-colors ${!isCollapsed ? 'border-b border-gray-200' : ''}`}
+          className={`flex items-center justify-between px-5 py-4 cursor-pointer hover:bg-[rgb(var(--ec-content-hover))] transition-colors ${!isCollapsed ? 'border-b border-[rgb(var(--ec-page-border))]' : ''}`}
         >
           <div className="flex items-center gap-3">
-            <div className={`flex items-center justify-center w-8 h-8 bg-${color}-100 rounded-lg`}>
-              <CircleStackIcon className={`h-4 w-4 text-${color}-600`} />
+            <div className={`flex items-center justify-center w-8 h-8 bg-${color}-100 dark:bg-${color}-500/20 rounded-lg`}>
+              <CircleStackIcon className={`h-4 w-4 text-${color}-600 dark:text-${color}-400`} />
             </div>
-            <h2 className="text-base font-bold text-gray-900">{title}</h2>
-            <span className="text-sm text-gray-500 bg-gray-100 px-2 py-0.5 rounded-full font-medium">{containers.length}</span>
+            <h2 className="text-base font-bold text-[rgb(var(--ec-page-text))]">{title}</h2>
+            <span className="text-sm text-[rgb(var(--ec-page-text-muted))] bg-[rgb(var(--ec-content-hover))] px-2 py-0.5 rounded-full font-medium">
+              {containers.length}
+            </span>
           </div>
-          <div className="text-gray-400">
+          <div className="text-[rgb(var(--ec-icon-color))]">
             {isCollapsed ? <ChevronDownIcon className="h-5 w-5" /> : <ChevronUpIcon className="h-5 w-5" />}
           </div>
         </div>
@@ -221,26 +239,28 @@ export default function MessageGridV2({ service, embeded = false, specifications
   return (
     <div className="w-full">
       {/* Service Header - Doc style */}
-      <div className="border-b border-gray-200 md:pb-4">
+      <div className="border-b border-[rgb(var(--ec-page-border))] md:pb-4">
         <div className="flex items-start justify-between">
           <div>
-            <h2 className="text-2xl md:text-4xl font-bold text-black">{service.data.name}</h2>
-            {service.data.summary && <p className="text-lg pt-2 text-gray-500 font-light">{service.data.summary}</p>}
+            <h2 className="text-2xl md:text-4xl font-bold text-[rgb(var(--ec-page-text))]">{service.data.name}</h2>
+            {service.data.summary && (
+              <p className="text-lg pt-2 text-[rgb(var(--ec-page-text-muted))] font-light">{service.data.summary}</p>
+            )}
           </div>
           <div className="flex items-center gap-2 flex-shrink-0">
             <a
               href={buildUrl(`/docs/services/${service.data.id}/${service.data.version}`)}
-              className="inline-flex items-center gap-1.5 px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-200 rounded-lg hover:bg-gray-50 hover:border-gray-300 transition-all"
+              className="inline-flex items-center gap-1.5 px-3 py-2 text-sm 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-lg hover:bg-[rgb(var(--ec-content-hover))] hover:border-[rgb(var(--ec-page-text-muted))] transition-all"
             >
               View docs
-              <ArrowTopRightOnSquareIcon className="h-4 w-4 text-gray-400" />
+              <ArrowTopRightOnSquareIcon className="h-4 w-4 text-[rgb(var(--ec-icon-color))]" />
             </a>
             <a
               href={buildUrl(`/visualiser/services/${service.data.id}/${service.data.version}`)}
-              className="inline-flex items-center gap-1.5 px-3 py-2 text-sm font-medium text-white bg-gray-800 rounded-lg hover:bg-gray-900 transition-all"
+              className="inline-flex items-center gap-1.5 px-3 py-2 text-sm font-medium text-white bg-zinc-800 dark:bg-zinc-700 rounded-lg hover:bg-zinc-900 dark:hover:bg-zinc-600 transition-all"
             >
               Visualizer
-              <ArrowTopRightOnSquareIcon className="h-4 w-4 text-gray-400" />
+              <ArrowTopRightOnSquareIcon className="h-4 w-4 text-zinc-400" />
             </a>
           </div>
         </div>
@@ -252,8 +272,8 @@ export default function MessageGridV2({ service, embeded = false, specifications
         {hasSpecs && (
           <div>
             <div className="flex items-center gap-2 mb-4">
-              <h3 className="text-lg font-semibold text-gray-900">Specifications</h3>
-              <span className="text-sm text-gray-500 bg-gray-100 px-2.5 py-0.5 rounded-full font-medium">
+              <h3 className="text-lg font-semibold text-[rgb(var(--ec-page-text))]">Specifications</h3>
+              <span className="text-sm text-[rgb(var(--ec-page-text-muted))] bg-[rgb(var(--ec-content-hover))] px-2.5 py-0.5 rounded-full font-medium">
                 {specifications.length}
               </span>
             </div>
@@ -274,9 +294,9 @@ export default function MessageGridV2({ service, embeded = false, specifications
         {hasMessages && (
           <div>
             <div className="flex items-center gap-2 mb-4">
-              <BoltIcon className="h-5 w-5 text-orange-500" />
-              <h3 className="text-lg font-semibold text-gray-900">Messages</h3>
-              <span className="text-sm text-gray-500 bg-gray-100 px-2.5 py-0.5 rounded-full font-medium">
+              <BoltIcon className="h-5 w-5 text-orange-500 dark:text-orange-400" />
+              <h3 className="text-lg font-semibold text-[rgb(var(--ec-page-text))]">Messages</h3>
+              <span className="text-sm text-[rgb(var(--ec-page-text-muted))] bg-[rgb(var(--ec-content-hover))] px-2.5 py-0.5 rounded-full font-medium">
                 {receives.length + sends.length}
               </span>
             </div>
@@ -305,9 +325,9 @@ export default function MessageGridV2({ service, embeded = false, specifications
         {hasContainers && (
           <div>
             <div className="flex items-center gap-2 mb-4">
-              <CircleStackIcon className="h-5 w-5 text-amber-500" />
-              <h3 className="text-lg font-semibold text-gray-900">Data Sources</h3>
-              <span className="text-sm text-gray-500 bg-gray-100 px-2.5 py-0.5 rounded-full font-medium">
+              <CircleStackIcon className="h-5 w-5 text-amber-500 dark:text-amber-400" />
+              <h3 className="text-lg font-semibold text-[rgb(var(--ec-page-text))]">Data Sources</h3>
+              <span className="text-sm text-[rgb(var(--ec-page-text-muted))] bg-[rgb(var(--ec-content-hover))] px-2.5 py-0.5 rounded-full font-medium">
                 {readsFrom.length + writesTo.length}
               </span>
             </div>
@@ -325,10 +345,10 @@ export default function MessageGridV2({ service, embeded = false, specifications
         {/* Empty State */}
         {!hasMessages && !hasContainers && !hasSpecs && (
           <div className="text-center py-12">
-            <div className="flex items-center justify-center w-16 h-16 mx-auto mb-4 bg-gray-100 rounded-2xl">
-              <ServerIcon className="h-8 w-8 text-gray-400" />
+            <div className="flex items-center justify-center w-16 h-16 mx-auto mb-4 bg-[rgb(var(--ec-content-hover))] rounded-2xl">
+              <ServerIcon className="h-8 w-8 text-[rgb(var(--ec-icon-color))]" />
             </div>
-            <p className="text-gray-500">
+            <p className="text-[rgb(var(--ec-page-text-muted))]">
               This service has no message flows, container relationships, or specifications defined.
             </p>
           </div>

package/eventcatalog/src/components/Header.astro

@@ -7,6 +7,7 @@ import { getSession } from 'auth-astro/server';
 import { isAuthEnabled, isSSR } from '@utils/feature';
 import { EnvironmentDropdown } from './EnvironmentDropdown';
 import ChatPanelButton from './ChatPanel/ChatPanelButton';
+import ThemeToggle from './ThemeToggle';
 
 let session = null;
 if (isAuthEnabled()) {
@@ -24,7 +25,7 @@ const repositoryUrl = catalog?.repositoryUrl || 'https://github.com/event-catalo
 
 <nav
   id="eventcatalog-header"
-  class="fixed top-0 left-0 right-0 h-header bg-white/95 border-b border-gray-200 py-3 font-bold text-xl backdrop-blur-md z-10"
+  class="fixed top-0 left-0 right-0 h-header bg-[rgb(var(--ec-header-bg))] border-b border-[rgb(var(--ec-header-border))] py-3 font-bold text-xl z-10 text-[rgb(var(--ec-header-text))]"
 >
   <div class="px-4 sm:px-4 lg:px-4">
     <div class="flex justify-between items-center">
@@ -57,6 +58,7 @@ const repositoryUrl = catalog?.repositoryUrl || 'https://github.com/event-catalo
               {catalog.environments && catalog.environments.length > 0 && (
                 <EnvironmentDropdown environments={catalog.environments} client:load />
               )}
+              <ThemeToggle client:load />
               <div class="relative">
                 <button
                   id="profile-menu-button"
@@ -87,15 +89,17 @@ const repositoryUrl = catalog?.repositoryUrl || 'https://github.com/event-catalo
                 </button>
                 <div
                   id="profile-dropdown"
-                  class="hidden absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-md py-1 z-50 border-2 border-gray-200 overflow-hidden"
+                  class="hidden absolute right-0 mt-2 w-48 bg-[rgb(var(--ec-dropdown-bg))] rounded-lg shadow-md py-1 z-50 border-2 border-[rgb(var(--ec-dropdown-border))] overflow-hidden"
                 >
-                  <div class="px-4 py-2 text-sm text-gray-700 border-b border-gray-200">
+                  <div class="px-4 py-2 text-sm text-[rgb(var(--ec-dropdown-text))] border-b border-[rgb(var(--ec-dropdown-border))]">
                     <div class="font-semibold">{session.user?.name || 'User'}</div>
-                    {session.user?.email && <div class="text-gray-500 text-xs mt-0.5">{session.user.email}</div>}
+                    {session.user?.email && (
+                      <div class="text-[rgb(var(--ec-icon-color))] text-xs mt-0.5">{session.user.email}</div>
+                    )}
                   </div>
                   <button
                     id="signout-btn"
-                    class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 transition-colors font-medium"
+                    class="block w-full text-left px-4 py-2 text-sm text-[rgb(var(--ec-dropdown-text))] hover:bg-[rgb(var(--ec-dropdown-hover))] transition-colors font-medium"
                   >
                     Sign out
                   </button>
@@ -111,17 +115,18 @@ const repositoryUrl = catalog?.repositoryUrl || 'https://github.com/event-catalo
                 {isAuthEnabled() && (
                   <button
                     id="okta-signin-btn"
-                    class="bg-gray-900 hover:bg-gray-800 text-white text-sm font-medium px-4 py-2 rounded-lg transition-all shadow-sm hover:shadow focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"
+                    class="bg-[rgb(var(--ec-button-bg))] hover:bg-[rgb(var(--ec-button-bg-hover))] text-[rgb(var(--ec-button-text))] text-sm font-medium px-4 py-2 rounded-lg transition-all shadow-sm hover:shadow focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"
                   >
                     Sign In
                   </button>
                 )}
+                <ThemeToggle client:load />
                 {showEventCatalogBranding() && (
                   <ul class="flex space-x-4">
                     <li>
                       <a
                         href="https://discord.com/invite/3rjaZMmrAm"
-                        class="block p-1.5 rounded-lg hover:bg-gray-100 transition-colors"
+                        class="block p-1.5 rounded-lg hover:bg-[rgb(var(--ec-dropdown-hover))] transition-colors"
                         aria-label="Join our Discord community"
                       >
                         <img
@@ -135,7 +140,7 @@ const repositoryUrl = catalog?.repositoryUrl || 'https://github.com/event-catalo
                     <li>
                       <a
                         href="https://github.com/event-catalog/eventcatalog"
-                        class="block p-1.5 rounded-lg hover:bg-gray-100 transition-colors"
+                        class="block p-1.5 rounded-lg hover:bg-[rgb(var(--ec-dropdown-hover))] transition-colors"
                         aria-label="View EventCatalog on GitHub"
                       >
                         <img
@@ -153,7 +158,7 @@ const repositoryUrl = catalog?.repositoryUrl || 'https://github.com/event-catalo
                     <li>
                       <a
                         href={repositoryUrl}
-                        class="block p-1.5 rounded-lg hover:bg-gray-100 transition-colors focus:outline-none"
+                        class="block p-1.5 rounded-lg hover:bg-[rgb(var(--ec-dropdown-hover))] transition-colors focus:outline-none"
                         aria-label="View repository on GitHub"
                       >
                         <img
@@ -176,7 +181,7 @@ const repositoryUrl = catalog?.repositoryUrl || 'https://github.com/event-catalo
         <button
           id="menu-toggle"
           type="button"
-          class="text-gray-500 hover:text-gray-600 focus:outline-none focus:text-gray-600"
+          class="text-[rgb(var(--ec-icon-color))] hover:text-[rgb(var(--ec-icon-hover))] focus:outline-none focus:text-[rgb(var(--ec-icon-hover))]"
           aria-label="Toggle menu"
         >
           <svg viewBox="0 0 24 24" class="h-6 w-6 fill-current">

package/eventcatalog/src/components/Lists/OwnersList.tsx

@@ -1,6 +1,7 @@
 import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/react';
 import { ChevronDownIcon } from '@heroicons/react/20/solid';
 import { UserGroupIcon, UserIcon } from '@heroicons/react/24/outline';
+import './PillListFlat.styles.css';
 
 interface Props {
   title: string;
@@ -17,30 +18,36 @@ interface Props {
 const OwnersList = ({ title, owners, emptyMessage }: Props) => {
   return (
     <div>
-      <div className="mx-auto w-full max-w-lg divide-y divide-white/5 rounded-xl bg-white/5">
+      <div className="mx-auto w-full max-w-lg divide-y divide-[rgb(var(--ec-page-border))] rounded-xl">
         <Disclosure as="div" className="" defaultOpen={owners.length <= 5}>
           <DisclosureButton className="group flex w-full items-center justify-start space-x-4">
-            <span className="text-sm text-black font-semibold group-data-[hover]:text-black/80 capitalize"> {title} </span>
-            <ChevronDownIcon className="size-5 fill-black/60 group-data-[hover]:fill-black/50 group-data-[open]:rotate-180" />
+            <span className="text-sm text-[rgb(var(--ec-page-text))] font-semibold group-data-[hover]:opacity-80 capitalize">
+              {' '}
+              {title}{' '}
+            </span>
+            <ChevronDownIcon className="size-5 fill-[rgb(var(--ec-icon-color))] group-data-[hover]:opacity-80 group-data-[open]:rotate-180" />
           </DisclosureButton>
-          <DisclosurePanel className="mt-2 text-sm/5 text-black/50">
+          <DisclosurePanel className="mt-2 text-sm/5 text-[rgb(var(--ec-page-text-muted))]">
             <ul role="list" className="space-y-2">
               {owners.map((item) => {
                 return (
                   <li
-                    className="has-tooltip rounded-md text-gray-600 group px-1 w-full hover:bg-gradient-to-l hover:from-purple-500 hover:to-purple-700 hover:text-white hover:font-normal  "
+                    className="owner-item has-tooltip rounded-md text-[rgb(var(--ec-page-text-muted))] group px-1 w-full hover:text-white hover:font-normal"
                     key={item.href}
                   >
                     <a className={`flex items-center space-x-2`} href={item.href}>
                       {item.type === 'users' && (
-                        <UserIcon className="h-4 w-4 text-gray-800 group-hover:text-white" strokeWidth={1} />
+                        <UserIcon className="h-4 w-4 text-[rgb(var(--ec-page-text))] group-hover:text-white" strokeWidth={1} />
                       )}
                       {item.type === 'teams' && (
-                        <UserGroupIcon className="h-4 w-4 text-gray-800 group-hover:text-white" strokeWidth={1} />
+                        <UserGroupIcon
+                          className="h-4 w-4 text-[rgb(var(--ec-page-text))] group-hover:text-white"
+                          strokeWidth={1}
+                        />
                       )}
                       <span className="font-light text-sm truncate">{item.label}</span>
                       {item.label.length > 24 && (
-                        <span className="tooltip rounded relative shadow-lg p-1 font-normal text-xs bg-white  text-black ml-[30px] mt-12">
+                        <span className="tooltip rounded relative shadow-lg p-1 font-normal text-xs bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] text-[rgb(var(--ec-page-text))] border border-[rgb(var(--ec-page-border))] ml-[30px] mt-12">
                           {item.label}
                         </span>
                       )}
@@ -50,14 +57,14 @@ const OwnersList = ({ title, owners, emptyMessage }: Props) => {
               })}
               {owners.length === 0 && (
                 <li className="inline mr-2 leading-6 text-sm">
-                  <span className="text-gray-500">{emptyMessage}</span>
+                  <span className="text-[rgb(var(--ec-page-text-muted))]">{emptyMessage}</span>
                 </li>
               )}
             </ul>
           </DisclosurePanel>
         </Disclosure>
       </div>
-      <div className="border-b border-gray-100 my-4"></div>
+      <div className="border-b border-[rgb(var(--ec-page-border))] my-4"></div>
     </div>
   );
 };

package/eventcatalog/src/components/Lists/PillListFlat.styles.css

@@ -5,4 +5,16 @@
   .has-tooltip:hover .tooltip {
     visibility: visible;
     z-index: 100;
+  }
+
+  .pill-item:hover {
+    background: linear-gradient(to left, rgb(var(--ec-accent-gradient-from)), rgb(var(--ec-accent-gradient-to)));
+    color: white;
+    font-weight: normal;
+  }
+
+  .owner-item:hover {
+    background: linear-gradient(to left, rgb(var(--ec-accent-gradient-from)), rgb(var(--ec-accent-gradient-to)));
+    color: white;
+    font-weight: normal;
   }

package/eventcatalog/src/components/Lists/PillListFlat.tsx

@@ -66,10 +66,7 @@ const PillList = ({ title, pills, emptyMessage, color = 'gray', limit = 10, ...p
     const PillIcon = item.icon ? (icons as any)[item.icon] : null;
 
     return (
-      <li
-        className=" has-tooltip rounded-md text-gray-600 group px-1 w-full hover:bg-gradient-to-l hover:from-purple-500 hover:to-purple-700 hover:text-white hover:font-normal  "
-        key={item.href}
-      >
+      <li className="pill-item has-tooltip rounded-md text-[rgb(var(--ec-page-text-muted))] group px-1 w-full" key={item.href}>
         <a className={`leading-3`} href={href} target={item.target ?? '_self'}>
           <span className="space-x-2 flex items-center">
             {Icon && !PillIcon && <Icon className="h-4 w-4 shrink-0" />}
@@ -78,7 +75,7 @@ const PillList = ({ title, pills, emptyMessage, color = 'gray', limit = 10, ...p
               {item.label} {item.tag && <>({item.tag})</>}
             </span>
             {item.label.length > 24 && (
-              <span className="tooltip rounded relative shadow-lg p-1 font-normal text-xs bg-white  text-black ml-[30px] mt-12">
+              <span className="tooltip rounded relative shadow-lg p-1 font-normal text-xs bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] text-[rgb(var(--ec-page-text))] border border-[rgb(var(--ec-page-border))] ml-[30px] mt-12">
                 {item.label} {item.tag && <>({item.tag})</>}
               </span>
             )}
@@ -91,13 +88,16 @@ const PillList = ({ title, pills, emptyMessage, color = 'gray', limit = 10, ...p
 
   return (
     <div className="">
-      <div className="mx-auto w-full max-w-lg divide-y divide-white/5 rounded-xl bg-white/5">
+      <div className="mx-auto w-full max-w-lg divide-y divide-[rgb(var(--ec-page-border))] rounded-xl">
         <Disclosure as="div" className="" defaultOpen={pills.length <= limit}>
           <DisclosureButton className="group flex w-full items-center justify-start space-x-4">
-            <span className="text-sm text-black font-semibold group-data-[hover]:text-black/80 capitalize"> {title} </span>
-            <ChevronDownIcon className="size-5 ml-2 fill-black/60 group-data-[hover]:fill-black/50 group-data-[open]:rotate-180" />
+            <span className="text-sm text-[rgb(var(--ec-page-text))] font-semibold group-data-[hover]:opacity-80 capitalize">
+              {' '}
+              {title}{' '}
+            </span>
+            <ChevronDownIcon className="size-5 ml-2 fill-[rgb(var(--ec-icon-color))] group-data-[hover]:opacity-80 group-data-[open]:rotate-180" />
           </DisclosureButton>
-          <DisclosurePanel className="mt-2 text-sm/5 text-black/50">
+          <DisclosurePanel className="mt-2 text-sm/5 text-[rgb(var(--ec-page-text-muted))]">
             <div className="space-y-2">
               {groupedPills.ungrouped.length > 0 && (
                 <ul role="list" className="space-y-2">
@@ -115,10 +115,10 @@ const PillList = ({ title, pills, emptyMessage, color = 'gray', limit = 10, ...p
                           e.stopPropagation();
                           toggleSubgroup(subgroupName);
                         }}
-                        className="p-1 hover:bg-gray-100 rounded-md"
+                        className="p-1 hover:bg-[rgb(var(--ec-content-hover))] rounded-md"
                       >
                         <div className={`transition-transform duration-150 ${isCollapsed ? '' : 'rotate-180'}`}>
-                          <ChevronDownIcon className="h-3 w-3 text-gray-500" />
+                          <ChevronDownIcon className="h-3 w-3 text-[rgb(var(--ec-icon-color))]" />
                         </div>
                       </button>
                       <button
@@ -126,7 +126,7 @@ const PillList = ({ title, pills, emptyMessage, color = 'gray', limit = 10, ...p
                           e.stopPropagation();
                           toggleSubgroup(subgroupName);
                         }}
-                        className="flex-grow flex items-center justify-between px-2 py-0.5 text-xs font-bold rounded-md text-gray-900 uppercase"
+                        className="flex-grow flex items-center justify-between px-2 py-0.5 text-xs font-bold rounded-md text-[rgb(var(--ec-page-text))] uppercase"
                       >
                         {subgroupName} ({subgroupPills.length})
                       </button>
@@ -134,7 +134,7 @@ const PillList = ({ title, pills, emptyMessage, color = 'gray', limit = 10, ...p
                     <div
                       className={`overflow-hidden transition-[height] duration-150 ease-out ${isCollapsed ? 'h-0' : 'h-auto'}`}
                     >
-                      <ul role="list" className="space-y-2 border-l border-gray-200/80 ml-[9px] pl-4 pt-2">
+                      <ul role="list" className="space-y-2 border-l border-[rgb(var(--ec-page-border))] ml-[9px] pl-4 pt-2">
                         {subgroupPills.map(renderPillItem)}
                       </ul>
                     </div>
@@ -144,14 +144,14 @@ const PillList = ({ title, pills, emptyMessage, color = 'gray', limit = 10, ...p
 
               {pills.length === 0 && emptyMessage && (
                 <div className="inline mr-2 leading-tight text-xs">
-                  <span className="text-gray-400">{emptyMessage}</span>
+                  <span className="text-[rgb(var(--ec-icon-color))]">{emptyMessage}</span>
                 </div>
               )}
             </div>
           </DisclosurePanel>
         </Disclosure>
       </div>
-      <div className="border-b border-gray-100 my-4"></div>
+      <div className="border-b border-[rgb(var(--ec-page-border))] my-4"></div>
     </div>
   );
 };

package/eventcatalog/src/components/Lists/VersionList.astro

@@ -15,7 +15,9 @@ const currentPath = Astro.url.pathname;
 ---
 
 <div class="space-y-2 pb-4">
-  <span class="text-xs text-black font-semibold group-data-[hover]:text-black/80 capitalize">
+  <span
+    class="text-xs text-[rgb(var(--ec-page-text))] font-semibold group-data-[hover]:text-[rgb(var(--ec-page-text))]/80 capitalize"
+  >
     {title || `Versions (${collectionItem.data.versions?.length})`}
   </span>
   <ul role="list" class="space-y-2">
@@ -23,14 +25,16 @@ const currentPath = Astro.url.pathname;
       versions.map((version) => {
         const isCurrent = currentPath.includes(version);
         return (
-          <li class="rounded-md px-1 group w-full hover:bg-gradient-to-l  hover:from-purple-500 hover:to-purple-700 hover:text-white hover:font-normal  ">
+          <li class="version-item rounded-md px-1 group w-full hover:text-white hover:font-normal">
             <a
               class={`flex items-center space-x-2 cursor-pointer`}
               href={buildUrl(`/docs/${collectionItem.collection}/${collectionItem.data.id}/${version}`)}
             >
               {/* {Icon && <Icon class={`h-4 w-4`} />} */}
-              <HistoryIcon className="h-4 w-4 text-gray-800 group-hover:text-white" strokeWidth={1} />
-              <span class={`font-light text-xs ${isCurrent ? 'underline ' : ''}`}>
+              <HistoryIcon className="h-4 w-4 text-[rgb(var(--ec-page-text-muted))] group-hover:text-white" strokeWidth={1} />
+              <span
+                class={`font-light text-xs text-[rgb(var(--ec-page-text))] group-hover:text-white ${isCurrent ? 'underline ' : ''}`}
+              >
                 {version === collectionItem.data.latestVersion ? `v${version} (latest)` : `v${version}`}
               </span>
             </a>
@@ -39,9 +43,15 @@ const currentPath = Astro.url.pathname;
       })
     }
   </ul>
-  <div class="border-b border-gray-100 pt-2"></div>
+  <div class="border-b border-[rgb(var(--ec-page-border))] pt-2"></div>
 </div>
 
+<style>
+  .version-item:hover {
+    background: linear-gradient(to left, rgb(var(--ec-accent-gradient-from)), rgb(var(--ec-accent-gradient-to)));
+  }
+</style>
+
 <script>
   document.getElementById('version')?.addEventListener('change', (e: any) => {
     if (!e.target) return;

package/eventcatalog/src/components/MDX/Accordion/Accordion.tsx

@@ -12,7 +12,7 @@ declare global {
 
 export default function Example({ title, children }: any) {
   return (
-    <div className="border border-gray-200 rounded-md px-4 shadow-sm py-2 accordion">
+    <div className="border border-[rgb(var(--ec-page-border))] rounded-md px-4 shadow-sm py-2 accordion bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))]">
       <Disclosure as="div" key={title} className="">
         {({ open }) => {
           useEffect(() => {
@@ -30,7 +30,7 @@ export default function Example({ title, children }: any) {
 
           return (
             <div>
-              <DisclosureButton className="flex w-full items-start justify-between text-left text-gray-900">
+              <DisclosureButton className="flex w-full items-start justify-between text-left text-[rgb(var(--ec-page-text))]">
                 <span className="text-base font-semibold leading-7">{title}</span>
                 <span className="ml-6 flex h-7 items-center">
                   {open ? (
@@ -41,7 +41,7 @@ export default function Example({ title, children }: any) {
                 </span>
               </DisclosureButton>
               <DisclosurePanel as="dd" className="pr-12 py-4 prose prose-sm max-w-none">
-                <div className="text-base leading-7 text-gray-600">{children}</div>
+                <div className="text-base leading-7 text-[rgb(var(--ec-page-text-muted))]">{children}</div>
               </DisclosurePanel>
             </div>
           );