@eventcatalog/core 3.0.0 → 3.2.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/ai/chat-api.ts

@@ -28,7 +28,10 @@ try {
   model = await providerConfiguration.default();
   modelConfiguration = providerConfiguration.configuration || defaultConfiguration;
   hasChatConfiguration = true;
-  extendedTools = providerConfiguration.tools || {};
+
+  if (isEventCatalogScaleEnabled()) {
+    extendedTools = providerConfiguration.tools || {};
+  }
 } catch (error) {
   console.error('[Chat] Error loading chat configuration', error);
   hasChatConfiguration = false;
@@ -111,12 +114,14 @@ When responding:
 5. Don't provide code examples unless specifically requested.
 6. When you refer to a resource in EventCatalog, try and create a link to the resource in the response
     - Example, if you return a message in the text, rather than than just the id or version you should return a markdown link to the resource e.g [MyEvent - 1.0.0](/docs/events/MyEvent/1.0.0)
-    - NEVER return "latest" in the markdown link, always use the specific version
+    - CRITICAL: NEVER use "latest" in any URL or link. Always use the actual semantic version number (e.g., 1.0.0, 2.1.3). The word "latest" is not a valid version and will result in broken links.
     - The link options are:
         - If you want to get the documentation for a resource use the /docs/ prefix (e.g /docs/{collection}/{id}/{version})
         - If you want to let the user know they can visualize a resource use the /visualiser/ prefix (e.g /visualiser/{collection}/{id}/{version})
         - If you want to let the user know they can see the architecture of a resource use the /architecture/ prefix (e.g /architecture/{collection}/{id}/{version})
+    - If you don't know the version, use the getResource tool to fetch the resource and get the actual version number before creating the link.
 7. When you return a schema, use code blocks to render the schema to the user too, for example if the schema is in JSON format use \`\`\`json and if the schema is in YAML format use \`\`\`yaml
+8. IMPORTANT: After answering each question, ALWAYS use the suggestFollowUpQuestions tool to suggest 2-3 relevant follow-up questions the user might want to ask next. These should be contextual to the conversation and help the user explore related topics.
 
 If you have additional context, use it to answer the question.`;
 
@@ -171,7 +176,7 @@ export const POST = async ({ request }: APIContext<{ question: string; messages:
     const result = await streamText({
       model,
       system: getBaseSystemPrompt(referrer ?? ''),
-      messages: convertToModelMessages(messages) as ModelMessage[],
+      messages: await convertToModelMessages(messages),
       temperature: modelConfiguration?.temperature ?? 0.7,
       stopWhen: stepCountIs(5),
       // maxTokens: 4000, // Increased to handle large tool results
@@ -320,6 +325,22 @@ export const POST = async ({ request }: APIContext<{ question: string; messages:
             return [];
           },
         }),
+        suggestFollowUpQuestions: tool({
+          description:
+            'Use this tool after answering a question to suggest 2-3 relevant follow-up questions the user might want to ask. These will be displayed as clickable suggestions.',
+          inputSchema: z.object({
+            questions: z
+              .array(z.string())
+              .min(1)
+              .max(3)
+              .describe('Array of 2-3 follow-up questions relevant to the conversation'),
+          }),
+          execute: async ({ questions }) => {
+            // This tool doesn't need to do anything - it just returns the questions
+            // which will be captured by the UI
+            return { suggestions: questions };
+          },
+        }),
         ...extendedTools,
       },
     });

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">