@eventcatalog/core 3.0.0 → 3.1.0

package/eventcatalog/src/components/Tables/columns/UserTableColumns.tsx

@@ -25,13 +25,13 @@ export const columns = (tableConfiguration: TableConfiguration) => [
       const user = info.row.original;
       return (
         <a href={buildUrl(`/docs/${user.collection}/${user.data.id}`)} className="group inline-flex items-center">
-          <span className="inline-flex items-center rounded-md border border-gray-200 bg-white hover:border-purple-300 hover:bg-purple-50 transition-colors">
-            <span className="flex items-center justify-center w-6 h-6 bg-purple-500 rounded-l-md">
+          <span className="inline-flex items-center rounded-md border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] hover:border-[rgb(var(--ec-accent))] hover:bg-[rgb(var(--ec-accent-subtle))] transition-colors">
+            <span className="flex items-center justify-center w-6 h-6 bg-[rgb(var(--ec-accent))] rounded-l-md">
               <User className="h-3 w-3 text-white" />
             </span>
-            <span className="px-2 py-1 text-xs text-gray-700 group-hover:text-gray-900">
+            <span className="px-2 py-1 text-xs text-[rgb(var(--ec-page-text))] group-hover:text-[rgb(var(--ec-page-text))]">
               {user.data.name}
-              {user.data.role && <span className="text-gray-400 ml-1">({user.data.role})</span>}
+              {user.data.role && <span className="text-[rgb(var(--ec-icon-color))] ml-1">({user.data.role})</span>}
             </span>
           </span>
         </a>
@@ -65,7 +65,7 @@ export const columns = (tableConfiguration: TableConfiguration) => [
 
         if (messages?.length === 0 || !messages)
           return (
-            <span className="inline-flex items-center px-2 py-1 text-xs text-gray-400 bg-gray-50 rounded-md border border-gray-100">
+            <span className="inline-flex items-center px-2 py-1 text-xs text-[rgb(var(--ec-icon-color))] bg-[rgb(var(--ec-content-hover))] rounded-md border border-[rgb(var(--ec-page-border))]">
               No messages
             </span>
           );
@@ -84,21 +84,24 @@ export const columns = (tableConfiguration: TableConfiguration) => [
                   className="group inline-flex items-center"
                 >
                   <span
-                    className={`inline-flex items-center rounded-md border border-gray-200 bg-white hover:border-${color}-300 hover:bg-${color}-50 transition-colors`}
+                    className={`inline-flex items-center rounded-md border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] hover:border-${color}-400 dark:hover:border-${color}-500 hover:bg-${color}-50 dark:hover:bg-${color}-500/10 transition-colors`}
                   >
                     <span className={`flex items-center justify-center w-6 h-6 bg-${color}-500 rounded-l-md`}>
                       <Icon className="h-3 w-3 text-white" />
                     </span>
-                    <span className="px-2 py-1 text-xs text-gray-700 group-hover:text-gray-900">
+                    <span className="px-2 py-1 text-xs text-[rgb(var(--ec-page-text))] group-hover:text-[rgb(var(--ec-page-text))]">
                       {message.data.name}
-                      <span className="text-gray-400 ml-1">v{message.data.version}</span>
+                      <span className="text-[rgb(var(--ec-icon-color))] ml-1">v{message.data.version}</span>
                     </span>
                   </span>
                 </a>
               );
             })}
             {hiddenCount > 0 && (
-              <button onClick={() => setIsExpanded(!isExpanded)} className="text-xs text-gray-500 hover:text-gray-700 text-left">
+              <button
+                onClick={() => setIsExpanded(!isExpanded)}
+                className="text-xs text-[rgb(var(--ec-icon-color))] hover:text-[rgb(var(--ec-page-text))] text-left"
+              >
                 {isExpanded ? 'Show less' : `+${hiddenCount} more`}
               </button>
             )}
@@ -121,7 +124,7 @@ export const columns = (tableConfiguration: TableConfiguration) => [
 
       if (services?.length === 0 || !services)
         return (
-          <span className="inline-flex items-center px-2 py-1 text-xs text-gray-400 bg-gray-50 rounded-md border border-gray-100">
+          <span className="inline-flex items-center px-2 py-1 text-xs text-[rgb(var(--ec-icon-color))] bg-[rgb(var(--ec-content-hover))] rounded-md border border-[rgb(var(--ec-page-border))]">
             No services
           </span>
         );
@@ -137,19 +140,22 @@ export const columns = (tableConfiguration: TableConfiguration) => [
               href={buildUrl(`/docs/${service.collection}/${service.data.id}/${service.data.version}`)}
               className="group inline-flex items-center"
             >
-              <span className="inline-flex items-center rounded-md border border-gray-200 bg-white hover:border-pink-300 hover:bg-pink-50 transition-colors">
+              <span className="inline-flex items-center rounded-md border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] hover:border-pink-400 dark:hover:border-pink-500 hover:bg-pink-50 dark:hover:bg-pink-500/10 transition-colors">
                 <span className="flex items-center justify-center w-6 h-6 bg-pink-500 rounded-l-md">
                   <ServerIcon className="h-3 w-3 text-white" />
                 </span>
-                <span className="px-2 py-1 text-xs text-gray-700 group-hover:text-gray-900">
+                <span className="px-2 py-1 text-xs text-[rgb(var(--ec-page-text))] group-hover:text-[rgb(var(--ec-page-text))]">
                   {service.data.name}
-                  <span className="text-gray-400 ml-1">v{service.data.version}</span>
+                  <span className="text-[rgb(var(--ec-icon-color))] ml-1">v{service.data.version}</span>
                 </span>
               </span>
             </a>
           ))}
           {hiddenCount > 0 && (
-            <button onClick={() => setIsExpanded(!isExpanded)} className="text-xs text-gray-500 hover:text-gray-700 text-left">
+            <button
+              onClick={() => setIsExpanded(!isExpanded)}
+              className="text-xs text-[rgb(var(--ec-icon-color))] hover:text-[rgb(var(--ec-page-text))] text-left"
+            >
               {isExpanded ? 'Show less' : `+${hiddenCount} more`}
             </button>
           )}
@@ -174,7 +180,7 @@ export const columns = (tableConfiguration: TableConfiguration) => [
 
       if (teams?.length === 0 || !teams)
         return (
-          <span className="inline-flex items-center px-2 py-1 text-xs text-gray-400 bg-gray-50 rounded-md border border-gray-100">
+          <span className="inline-flex items-center px-2 py-1 text-xs text-[rgb(var(--ec-icon-color))] bg-[rgb(var(--ec-content-hover))] rounded-md border border-[rgb(var(--ec-page-border))]">
             No teams
           </span>
         );
@@ -190,16 +196,21 @@ export const columns = (tableConfiguration: TableConfiguration) => [
               href={buildUrl(`/docs/teams/${team.data.id}`)}
               className="group inline-flex items-center"
             >
-              <span className="inline-flex items-center rounded-md border border-gray-200 bg-white hover:border-pink-300 hover:bg-pink-50 transition-colors">
+              <span className="inline-flex items-center rounded-md border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] hover:border-pink-400 dark:hover:border-pink-500 hover:bg-pink-50 dark:hover:bg-pink-500/10 transition-colors">
                 <span className="flex items-center justify-center w-6 h-6 bg-pink-500 rounded-l-md">
                   <Users className="h-3 w-3 text-white" />
                 </span>
-                <span className="px-2 py-1 text-xs text-gray-700 group-hover:text-gray-900">{team.data.name}</span>
+                <span className="px-2 py-1 text-xs text-[rgb(var(--ec-page-text))] group-hover:text-[rgb(var(--ec-page-text))]">
+                  {team.data.name}
+                </span>
               </span>
             </a>
           ))}
           {hiddenCount > 0 && (
-            <button onClick={() => setIsExpanded(!isExpanded)} className="text-xs text-gray-500 hover:text-gray-700 text-left">
+            <button
+              onClick={() => setIsExpanded(!isExpanded)}
+              className="text-xs text-[rgb(var(--ec-icon-color))] hover:text-[rgb(var(--ec-page-text))] text-left"
+            >
               {isExpanded ? 'Show less' : `+${hiddenCount} more`}
             </button>
           )}
@@ -216,7 +227,7 @@ export const columns = (tableConfiguration: TableConfiguration) => [
       const item = info.row.original;
       return (
         <a
-          className="inline-flex items-center px-2.5 py-1 text-xs font-medium text-gray-600 bg-gray-50 border border-gray-200 rounded-md hover:bg-gray-100 hover:text-gray-900 transition-colors whitespace-nowrap"
+          className="inline-flex items-center px-2.5 py-1 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 hover:bg-[rgb(var(--ec-content-hover))] hover:text-[rgb(var(--ec-page-text))] transition-colors whitespace-nowrap"
           href={buildUrl(`/docs/${item.collection}/${item.data.id}`)}
         >
           View profile

package/eventcatalog/src/components/ThemeToggle.tsx

@@ -0,0 +1,18 @@
+import { useStore } from '@nanostores/react';
+import { Moon, Sun } from 'lucide-react';
+import { themeStore, toggleTheme } from '@stores/theme-store';
+
+export default function ThemeToggle() {
+  const theme = useStore(themeStore);
+
+  return (
+    <button
+      onClick={toggleTheme}
+      className="p-2 rounded-md text-[rgb(var(--ec-icon-color))] hover:text-[rgb(var(--ec-icon-hover))] hover:bg-[rgb(var(--ec-dropdown-hover))] transition-colors"
+      aria-label={`Switch to ${theme === 'light' ? 'dark' : 'light'} mode`}
+      title={`Switch to ${theme === 'light' ? 'dark' : 'light'} mode`}
+    >
+      {theme === 'light' ? <Moon className="w-5 h-5" /> : <Sun className="w-5 h-5" />}
+    </button>
+  );
+}

package/eventcatalog/src/enterprise/custom-documentation/components/CustomDocsNav/components/NestedItem.tsx

@@ -28,7 +28,7 @@ const NestedItem: React.FC<NestedItemProps> = ({
       <div className="py-1">
         <div className="flex items-center">
           <button
-            className="p-1 hover:bg-gray-100 rounded-md flex-shrink-0"
+            className="p-1 hover:bg-[rgb(var(--ec-content-hover))] rounded-md flex-shrink-0"
             onClick={(e) => {
               e.stopPropagation();
               toggleGroupCollapse(`nested-${itemId}`);
@@ -43,14 +43,14 @@ const NestedItem: React.FC<NestedItemProps> = ({
                 stroke="currentColor"
                 aria-hidden="true"
                 data-slot="icon"
-                className="h-3 w-3 text-gray-500"
+                className="h-3 w-3 text-[rgb(var(--ec-icon-color))]"
               >
                 <path strokeLinecap="round" strokeLinejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"></path>
               </svg>
             </div>
           </button>
           <button
-            className="flex items-center px-2 py-1 text-xs font-medium text-gray-700 rounded-md hover:bg-purple-50 min-w-0 flex-1"
+            className="flex items-center px-2 py-1 text-xs font-medium text-[rgb(var(--ec-page-text-muted))] rounded-md hover:bg-[rgb(var(--ec-content-hover))] min-w-0 flex-1"
             onClick={(e) => {
               e.stopPropagation();
               toggleGroupCollapse(`nested-${itemId}`);
@@ -59,7 +59,11 @@ const NestedItem: React.FC<NestedItemProps> = ({
             <span className="truncate">{item.label}</span>
             {item.badge && item?.badge?.text && (
               <span
-                className={`text-${item.badge.color || 'purple'}-600 ml-2 text-[10px] font-medium bg-${item.badge.color || 'purple'}-50 px-2 py-0.5 rounded uppercase`}
+                className={
+                  item.badge.color
+                    ? `text-${item.badge.color}-600 dark:text-${item.badge.color}-400 ml-2 text-[10px] font-medium bg-${item.badge.color}-50 dark:bg-${item.badge.color}-500/20 px-2 py-0.5 rounded uppercase`
+                    : `text-[rgb(var(--ec-accent))] ml-2 text-[10px] font-medium bg-[rgb(var(--ec-accent-subtle))] px-2 py-0.5 rounded uppercase`
+                }
               >
                 {item.badge.text}
               </span>
@@ -72,7 +76,7 @@ const NestedItem: React.FC<NestedItemProps> = ({
             collapsedGroups[`nested-${itemId}`] ? 'h-0' : 'h-auto'
           }`}
         >
-          <div className="space-y-0.5 border-gray-200/80 border-l pl-4 ml-[9px] mt-1">
+          <div className="space-y-0.5 border-[rgb(var(--ec-page-border))] border-l pl-4 ml-[9px] mt-1">
             {item.items.map((nestedItem: SidebarItem, nestedIndex: number) => (
               <NestedItem
                 key={`nested-${itemId}-${nestedIndex}`}
@@ -121,7 +125,7 @@ const NestedItem: React.FC<NestedItemProps> = ({
     <a
       href={itemPath}
       {...(attrs || {})}
-      className={`flex items-center px-2 py-1.5 text-xs ${isActive ? 'bg-purple-100 text-purple-900 font-medium' : 'text-gray-600 hover:bg-purple-100'} rounded-md`}
+      className={`flex items-center px-2 py-1.5 text-xs ${isActive ? 'bg-[rgb(var(--ec-accent-subtle))] text-[rgb(var(--ec-page-text))] font-semibold' : 'text-[rgb(var(--ec-page-text-muted))] hover:bg-[rgb(var(--ec-content-hover))]'} rounded-md`}
       data-active={isActive}
       target={isExternalLink ? '_blank' : undefined}
     >
@@ -131,7 +135,11 @@ const NestedItem: React.FC<NestedItemProps> = ({
       </span>
       {item.badge && item?.badge?.text && (
         <span
-          className={`text-${item.badge.color || 'purple'}-600 ml-2 text-[10px] font-medium bg-${item.badge.color || 'purple'}-50 px-2 py-0.5 rounded uppercase`}
+          className={
+            item.badge.color
+              ? `text-${item.badge.color}-600 dark:text-${item.badge.color}-400 ml-2 text-[10px] font-medium bg-${item.badge.color}-50 dark:bg-${item.badge.color}-500/20 px-2 py-0.5 rounded uppercase`
+              : `text-[rgb(var(--ec-accent))] ml-2 text-[10px] font-medium bg-[rgb(var(--ec-accent-subtle))] px-2 py-0.5 rounded uppercase`
+          }
         >
           {item.badge.text}
         </span>

package/eventcatalog/src/enterprise/custom-documentation/components/CustomDocsNav/components/NoResultsFound.tsx

@@ -6,8 +6,8 @@ interface NoResultsFoundProps {
 
 const NoResultsFound: React.FC<NoResultsFoundProps> = ({ searchTerm }) => (
   <div className="px-4 py-6 text-center">
-    <div className="text-gray-400 text-sm mb-2">No results found for "{searchTerm}"</div>
-    <div className="text-gray-400 text-xs">
+    <div className="text-[rgb(var(--ec-page-text-muted))] text-sm mb-2">No results found for "{searchTerm}"</div>
+    <div className="text-[rgb(var(--ec-page-text-muted))] text-xs">
       Try:
       <ul className="mt-2 space-y-1 text-left list-disc pl-4">
         <li>Checking for typos</li>

package/eventcatalog/src/enterprise/custom-documentation/components/CustomDocsNav/index.tsx

@@ -197,31 +197,31 @@ const CustomDocsNav: React.FC<CustomDocsNavProps> = ({ sidebarItems }) => {
   const hasNoResults = debouncedSearchTerm && filteredSidebarItems.length === 0;
 
   return (
-    <nav ref={navRef} className="h-full text-gray-800 pt-4 overflow-y-auto">
-      <div className="mb-2 px-3 bg-white z-10">
+    <nav ref={navRef} className="h-full text-[rgb(var(--ec-page-text))] pt-4 overflow-y-auto">
+      <div className="mb-2 px-3 bg-[rgb(var(--ec-page-bg))] z-10">
         <div className="flex gap-2">
           <input
             type="text"
             value={searchTerm}
             onChange={handleSearchChange}
             placeholder="Quick search..."
-            className="flex-1 p-2 px-2 text-sm rounded-md border border-gray-200 h-[30px]"
+            className="flex-1 p-2 px-2 text-sm rounded-md border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-input-bg))] text-[rgb(var(--ec-input-text))] placeholder:text-[rgb(var(--ec-input-placeholder))] h-[30px]"
           />
           <button
             onClick={toggleExpandCollapse}
             title={isExpanded ? 'Collapse All' : 'Expand All'}
-            className="px-2 py-1 bg-gray-100 hover:bg-gray-200 rounded-md border border-gray-200 h-[30px] flex items-center justify-center"
+            className="px-2 py-1 bg-[rgb(var(--ec-content-hover))] hover:bg-[rgb(var(--ec-content-active))] rounded-md border border-[rgb(var(--ec-page-border))] h-[30px] flex items-center justify-center"
           >
             {isExpanded ? (
-              <ChevronDoubleUpIcon className="h-4 w-4 text-gray-600" />
+              <ChevronDoubleUpIcon className="h-4 w-4 text-[rgb(var(--ec-icon-color))]" />
             ) : (
-              <ChevronDoubleDownIcon className="h-4 w-4 text-gray-600" />
+              <ChevronDoubleDownIcon className="h-4 w-4 text-[rgb(var(--ec-icon-color))]" />
             )}
           </button>
         </div>
       </div>
 
-      <div className="space-y-2 divide-y divide-gray-100/40 pb-4">
+      <div className="space-y-2 divide-y divide-[rgb(var(--ec-page-border))] pb-4">
         {hasNoResults ? (
           <NoResultsFound searchTerm={debouncedSearchTerm} />
         ) : (
@@ -231,7 +231,7 @@ const CustomDocsNav: React.FC<CustomDocsNavProps> = ({ sidebarItems }) => {
                 {section.items ? (
                   <div className="flex items-center">
                     <button
-                      className="p-1 hover:bg-gray-100 rounded-md flex-shrink-0"
+                      className="p-1 hover:bg-[rgb(var(--ec-content-hover))] rounded-md flex-shrink-0"
                       onClick={(e) => {
                         e.stopPropagation();
                         toggleGroupCollapse(`section-${index}`);
@@ -248,14 +248,14 @@ const CustomDocsNav: React.FC<CustomDocsNavProps> = ({ sidebarItems }) => {
                           stroke="currentColor"
                           aria-hidden="true"
                           data-slot="icon"
-                          className="h-3 w-3 text-gray-500"
+                          className="h-3 w-3 text-[rgb(var(--ec-icon-color))]"
                         >
                           <path strokeLinecap="round" strokeLinejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"></path>
                         </svg>
                       </div>
                     </button>
                     <button
-                      className="flex items-center justify-between px-2 py-0.5 text-xs font-bold rounded-md hover:bg-purple-50 min-w-0 flex-1"
+                      className="flex items-center justify-between px-2 py-0.5 text-xs font-bold rounded-md hover:bg-[rgb(var(--ec-content-hover))] min-w-0 flex-1"
                       onClick={(e) => {
                         e.stopPropagation();
                         toggleGroupCollapse(`section-${index}`);
@@ -264,7 +264,11 @@ const CustomDocsNav: React.FC<CustomDocsNavProps> = ({ sidebarItems }) => {
                       <span className="truncate">{section.label}</span>
                       {section.badge && section?.badge?.text && (
                         <span
-                          className={`text-${section.badge.color || 'purple'}-600 ml-2 text-[10px] font-medium bg-${section.badge.color || 'purple'}-50 px-2 py-0.5 rounded uppercase`}
+                          className={
+                            section.badge.color
+                              ? `text-${section.badge.color}-600 dark:text-${section.badge.color}-400 ml-2 text-[10px] font-medium bg-${section.badge.color}-50 dark:bg-${section.badge.color}-500/20 px-2 py-0.5 rounded uppercase`
+                              : `text-[rgb(var(--ec-accent))] ml-2 text-[10px] font-medium bg-[rgb(var(--ec-accent-subtle))] px-2 py-0.5 rounded uppercase`
+                          }
                         >
                           {section.badge.text}
                         </span>
@@ -275,7 +279,7 @@ const CustomDocsNav: React.FC<CustomDocsNavProps> = ({ sidebarItems }) => {
                   <div className="flex items-center">
                     <span className="flex-grow flex items-center justify-between px-2 py-0.5 text-xs font-bold rounded-md">
                       <span className="truncate">{section.label}</span>
-                      <span className="text-purple-600 ml-2 text-[10px] font-medium bg-purple-50 px-2 py-0.5 rounded uppercase">
+                      <span className="text-[rgb(var(--ec-accent))] ml-2 text-[10px] font-medium bg-[rgb(var(--ec-accent-subtle))] px-2 py-0.5 rounded uppercase">
                         Section
                       </span>
                     </span>
@@ -288,7 +292,7 @@ const CustomDocsNav: React.FC<CustomDocsNavProps> = ({ sidebarItems }) => {
                       collapsedGroups[`section-${index}`] ? 'h-0' : 'h-auto'
                     }`}
                   >
-                    <div className="space-y-0.5 border-gray-200/80 border-l pl-4 ml-[9px] mt-1">
+                    <div className="space-y-0.5 border-[rgb(var(--ec-page-border))] border-l pl-4 ml-[9px] mt-1">
                       {section.items.map((item: SidebarItem, itemIndex: number) => (
                         <NestedItem
                           key={`item-${index}-${itemIndex}`}
@@ -309,8 +313,8 @@ const CustomDocsNav: React.FC<CustomDocsNavProps> = ({ sidebarItems }) => {
                     href={buildUrl(`/docs/custom/${section.slug}`)}
                     className={`flex items-center px-2 py-1.5 text-xs ${
                       currentPath.endsWith(`/${section.slug}`)
-                        ? 'bg-purple-100 text-purple-900 font-medium'
-                        : 'text-gray-600 hover:bg-purple-100'
+                        ? 'bg-[rgb(var(--ec-accent-subtle))] text-[rgb(var(--ec-page-text))] font-semibold'
+                        : 'text-[rgb(var(--ec-page-text-muted))] hover:bg-[rgb(var(--ec-content-hover))]'
                     } rounded-md ml-6`}
                     data-active={currentPath.endsWith(`/${section.slug}`)}
                   >

package/eventcatalog/src/enterprise/custom-documentation/pages/docs/custom/index.astro

@@ -83,7 +83,9 @@ const badges = doc?.badges || [];
 <VerticalSideBarLayout title={doc.title || 'Documentation'} showNestedSideBar={false}>
   <div class="flex w-full" data-pagefind-body data-pagefind-meta={`title:${doc.title}`}>
     <!-- Left Sidebar Navigation -->
-    <aside class="sidebar-transition overflow-y-auto bg-white border-r border-gray-100 w-80 fixed top-16 bottom-0 z-10">
+    <aside
+      class="sidebar-transition overflow-y-auto bg-[rgb(var(--ec-page-bg))] border-r border-[rgb(var(--ec-page-border))] w-80 fixed top-16 bottom-0 z-10"
+    >
       <CustomDocsNav />
     </aside>
 
@@ -92,10 +94,10 @@ const badges = doc?.badges || [];
       class="sidebar-transition w-full max-h-content ml-[22em] md:ml-[21em] lg:mr-2 2xl:mr-2 2xl:ml-[22em] pr-2 overflow-y-auto"
     >
       <div class="max-w-none mx-auto px-4 py-10">
-        <div class="border-b border-gray-200 flex justify-between items-start md:pb-6">
+        <div class="border-b border-[rgb(var(--ec-page-border))] flex justify-between items-start md:pb-6">
           <div>
-            <h2 id="doc-page-header" class="text-2xl md:text-4xl font-bold text-black">{doc.title}</h2>
-            <p class="text-lg pt-2 text-gray-500 font-light">{doc.summary}</p>
+            <h2 id="doc-page-header" class="text-2xl md:text-4xl font-bold text-[rgb(var(--ec-page-text))]">{doc.title}</h2>
+            <p class="text-lg pt-2 text-[rgb(var(--ec-page-text-muted))] font-light">{doc.summary}</p>
             {
               badges && (
                 <div class="flex flex-wrap pt-4">
@@ -148,16 +150,18 @@ const badges = doc?.badges || [];
         }
 
         <!-- Previous / Next Navigation -->
-        <div class="py-8 border-t border-gray-200 mt-8">
+        <div class="py-8 border-t border-[rgb(var(--ec-page-border))] mt-8">
           <div class="flex flex-col sm:flex-row justify-between w-full gap-4">
             {
               prev && (
                 <a
                   href={buildUrl(`/docs/custom/${prev.slug}`)}
-                  class="group flex flex-col border border-gray-200 rounded-lg p-4 hover:border-gray-300 hover:bg-gray-50 transition-colors w-full sm:w-1/2"
+                  class="group flex flex-col border border-[rgb(var(--ec-page-border))] rounded-lg p-4 hover:border-[rgb(var(--ec-content-text-muted))] hover:bg-[rgb(var(--ec-content-hover))] transition-colors w-full sm:w-1/2"
                 >
-                  <span class="text-sm text-gray-500 mb-1">Previous</span>
-                  <span class="font-medium group-hover:text-primary-600 transition-colors">{prev.label}</span>
+                  <span class="text-sm text-[rgb(var(--ec-page-text-muted))] mb-1">Previous</span>
+                  <span class="font-medium text-[rgb(var(--ec-page-text))] group-hover:text-primary-600 transition-colors">
+                    {prev.label}
+                  </span>
                 </a>
               )
             }
@@ -168,10 +172,12 @@ const badges = doc?.badges || [];
               next && (
                 <a
                   href={buildUrl(`/docs/custom/${next.slug}`)}
-                  class="group flex flex-col items-end text-right border border-gray-200 rounded-lg p-4 hover:border-gray-300 hover:bg-gray-50 transition-colors w-full sm:w-1/2"
+                  class="group flex flex-col items-end text-right border border-[rgb(var(--ec-page-border))] rounded-lg p-4 hover:border-[rgb(var(--ec-content-text-muted))] hover:bg-[rgb(var(--ec-content-hover))] transition-colors w-full sm:w-1/2"
                 >
-                  <span class="text-sm text-gray-500 mb-1">Next</span>
-                  <span class="font-medium group-hover:text-primary-600 transition-colors">{next.label}</span>
+                  <span class="text-sm text-[rgb(var(--ec-page-text-muted))] mb-1">Next</span>
+                  <span class="font-medium text-[rgb(var(--ec-page-text))] group-hover:text-primary-600 transition-colors">
+                    {next.label}
+                  </span>
                 </a>
               )
             }
@@ -182,7 +188,7 @@ const badges = doc?.badges || [];
 
     <!-- Right Sidebar TOC -->
     <aside
-      class="hidden lg:block sticky top-0 pb-10 w-80 overflow-y-auto border-l border-gray-100 bg-white p-6 flex-shrink-0 py-2"
+      class="hidden lg:block sticky top-0 pb-10 w-80 overflow-y-auto border-l border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-page-bg))] p-6 flex-shrink-0 py-2"
     >
       <div class="py-4">
         <div>
@@ -197,7 +203,7 @@ const badges = doc?.badges || [];
             )
           }
         </div>
-        <h3 class="text-sm text-black font-semibold group-data-[hover]:text-black/80 capitalize flex items-center gap-2">
+        <h3 class="text-sm text-[rgb(var(--ec-page-text))] font-semibold capitalize flex items-center gap-2">
           <AlignLeftIcon className="w-4 h-4" />
           On this page
         </h3>
@@ -210,7 +216,7 @@ const badges = doc?.badges || [];
               return (
                 <a
                   href={`#${heading.slug}`}
-                  class={`block text-[12px] py-0.5 ${heading.depth === 1 ? 'font-light' : ''} text-gray-400 hover:text-primary-600`}
+                  class={`block text-[12px] py-0.5 ${heading.depth === 1 ? 'font-light' : ''} text-[rgb(var(--ec-page-text-muted))] hover:text-primary-600`}
                   style={`padding-left: ${(heading.depth - 1) * 8}px`}
                 >
                   {heading.text}
@@ -235,6 +241,11 @@ const badges = doc?.badges || [];
     margin: 0;
     /* width: 100px !important; */
   }
+
+  /* TOC active state - uses accent CSS variable */
+  .toc-active-text {
+    color: rgb(var(--ec-accent));
+  }
 </style>
 
 <script define:vars={{ props, config }}>
@@ -262,14 +273,14 @@ const badges = doc?.badges || [];
       function highlightTocItem(id: string) {
         // Remove active class from all links
         document.querySelectorAll('.active-toc-item').forEach((link) => {
-          link.classList.remove('active-toc-item', 'text-purple-600', 'font-light');
+          link.classList.remove('active-toc-item', 'toc-active-text', 'font-light');
           link.classList.add('text-gray-400');
         });
 
         // Add active class to current link
         const tocLink = document.querySelector(`nav a[href="#${id}"]`);
         if (tocLink) {
-          tocLink.classList.add('active-toc-item', 'text-purple-600', 'font-light');
+          tocLink.classList.add('active-toc-item', 'toc-active-text', 'font-light');
           tocLink.classList.remove('text-gray-400');
 
           // Scroll the highlighted item into view with a small delay to ensure DOM updates first
@@ -389,6 +400,27 @@ const badges = doc?.badges || [];
       }
     }
 
+    // Detect current theme from data-theme attribute
+    const isDarkMode = document.documentElement.getAttribute('data-theme') === 'dark';
+    const currentTheme = isDarkMode ? 'dark' : 'default';
+
+    // Custom theme variables for better readability in dark mode
+    const darkThemeVariables = {
+      // Sequence diagram - improve text contrast
+      signalColor: '#f0f6fc',
+      signalTextColor: '#f0f6fc',
+      actorTextColor: '#0d1117',
+      actorBkg: '#f0f6fc',
+      actorBorder: '#484f58',
+      actorLineColor: '#6b7280',
+      // General text colors
+      primaryTextColor: '#f0f6fc',
+      secondaryTextColor: '#c9d1d9',
+      tertiaryTextColor: '#f0f6fc',
+      // Line colors
+      lineColor: '#6b7280',
+    };
+
     mermaid.initialize({
       // fontSize: 2,
       flowchart: {
@@ -399,7 +431,8 @@ const badges = doc?.badges || [];
       startOnLoad: false,
       fontFamily: 'var(--sans-font)',
       // @ts-ignore This works, but TS expects a enum for some reason
-      theme: 'light',
+      theme: currentTheme,
+      themeVariables: isDarkMode ? darkThemeVariables : undefined,
       architecture: {
         useMaxWidth: true,
       },

package/eventcatalog/src/layouts/DirectoryLayout.astro

@@ -49,10 +49,10 @@ const tabs = [
 ---
 
 <VerticalSideBarLayout title={`Explore | ${title}`} showNestedSideBar={false}>
-  <main class="ml-0">
+  <main class="ml-0 bg-[rgb(var(--ec-page-bg))]">
     <div id="discover-collection-tabs">
       <div class="hidden sm:block">
-        <div class="border-b border-gray-200">
+        <div class="border-b border-[rgb(var(--ec-page-border))]">
           <nav class="flex space-x-8 -mb-0.5 pl-6" aria-label="Tabs">
             {
               tabs
@@ -60,11 +60,16 @@ const tabs = [
                 .map((tab) => (
                   <a
                     href={tab.href}
-                    class={` text-black  group inline-flex items-center py-4 px-1 text-sm font-light ${tab.isActive ? `border-${tab.activeColor}-500 border-b-[2px] text-${tab.activeColor}-500` : 'opacity-80'} ${!tab.enabled ? 'disabled' : ''}`}
+                    class:list={[
+                      'group inline-flex items-center py-4 px-1 text-sm font-light text-[rgb(var(--ec-page-text))]',
+                      tab.isActive && 'border-b-[2px] border-[rgb(var(--ec-accent))] text-[rgb(var(--ec-accent))]',
+                      !tab.isActive && 'opacity-70 hover:opacity-100',
+                      !tab.enabled && 'disabled',
+                    ]}
                     aria-current="page"
                   >
                     <tab.icon
-                      className={`w-6 h-6 -ml-0.5 mr-2  ${tab.isActive ? `text-${tab.activeColor}-500` : 'text-gray-500'}`}
+                      className={`w-6 h-6 -ml-0.5 mr-2 ${tab.isActive ? 'text-[rgb(var(--ec-accent))]' : 'text-[rgb(var(--ec-icon-color))]'}`}
                     />
                     <span>{tab.label}</span>
                   </a>
@@ -80,8 +85,8 @@ const tabs = [
       <div>
         <div class="sm:flex sm:items-end py-4 pb-4" id="discover-title">
           <div class="sm:flex-auto space-y-2">
-            <h1 class="text-4xl font-semibold text-gray-900 capitalize">{title}</h1>
-            <p class="text-md text-gray-700">{subtitle}</p>
+            <h1 class="text-4xl font-semibold text-[rgb(var(--ec-page-text))] capitalize">{title}</h1>
+            <p class="text-md text-[rgb(var(--ec-page-text-muted))]">{subtitle}</p>
           </div>
         </div>
         <div class="mt-4 flow-root">

package/eventcatalog/src/layouts/DiscoverLayout.astro

@@ -107,10 +107,10 @@ const tabs = [
 ---
 
 <VerticalSideBarLayout title={`Explore | ${title}`} showNestedSideBar={false}>
-  <main class="ml-0">
+  <main class="ml-0 bg-[rgb(var(--ec-page-bg))] min-h-content">
     <div id="discover-collection-tabs">
       <div class="hidden sm:block">
-        <div class="border-b border-gray-200">
+        <div class="border-b border-[rgb(var(--ec-page-border))]">
           <nav class="flex space-x-8 -mb-0.5 pl-6" aria-label="Tabs">
             {
               tabs
@@ -118,11 +118,16 @@ const tabs = [
                 .map((tab) => (
                   <a
                     href={tab.href}
-                    class={` text-black  group inline-flex items-center py-4 px-1 text-sm font-light ${tab.isActive ? `border-${tab.activeColor}-500 border-b-[2px] text-${tab.activeColor}-500` : 'opacity-80'} ${!tab.enabled ? 'disabled' : ''}`}
+                    class:list={[
+                      'group inline-flex items-center py-4 px-1 text-sm font-light text-[rgb(var(--ec-page-text))]',
+                      tab.isActive && 'border-b-[2px] border-[rgb(var(--ec-accent))] text-[rgb(var(--ec-accent))]',
+                      !tab.isActive && 'opacity-70 hover:opacity-100',
+                      !tab.enabled && 'disabled',
+                    ]}
                     aria-current="page"
                   >
                     <tab.icon
-                      className={`w-6 h-6 -ml-0.5 mr-2  ${tab.isActive ? `text-${tab.activeColor}-500` : 'text-gray-500'}`}
+                      className={`w-6 h-6 -ml-0.5 mr-2 ${tab.isActive ? 'text-[rgb(var(--ec-accent))]' : 'text-[rgb(var(--ec-icon-color))]'}`}
                     />
                     <span>{tab.label}</span>
                   </a>
@@ -138,14 +143,14 @@ const tabs = [
       <div>
         <div class="sm:flex sm:items-end py-4 pb-4" id="discover-title">
           <div class="sm:flex-auto space-y-2">
-            <h1 class="text-4xl font-semibold text-gray-900 capitalize">{title}</h1>
-            <p class="text-md text-gray-700">{subtitle}</p>
+            <h1 class="text-4xl font-semibold text-[rgb(var(--ec-page-text))] capitalize">{title}</h1>
+            <p class="text-md text-[rgb(var(--ec-page-text-muted))]">{subtitle}</p>
           </div>
           <div class="flex gap-4">
-            <div class="p-4 border border-gray-200 rounded-md">
+            <div class="p-4 border border-[rgb(var(--ec-page-border))] rounded-md bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))]">
               <Checkbox id={checkboxLatestId} name={checkboxLatestId} label="Show latest version only" checked />
             </div>
-            <div class="p-4 border border-gray-200 rounded-md">
+            <div class="p-4 border border-[rgb(var(--ec-page-border))] rounded-md bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))]">
               <Checkbox id={checkboxDraftsId} name={checkboxDraftsId} label="Show drafts only" />
             </div>
           </div>