From c707539938cf127c9b9bde3267aa7d5c34f2ed08 Mon Sep 17 00:00:00 2001
From: Francisco Javier Arceo <farceo@redhat.com>
Date: Wed, 8 Jul 2026 10:13:27 -0400
Subject: [PATCH] feat: Add dark mode support to website and blog

Adds a theme toggle (sun/moon icon) to the navigation bar with
localStorage persistence and prefers-color-scheme detection. Replaces
all hardcoded light-mode colors with CSS custom properties that adapt
under a [data-theme="dark"] selector. Includes flash-prevention via
an inline script that sets the theme before first paint.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Signed-off-by: Francisco Javier Arceo <farceo@redhat.com>
---
 infra/website/src/components/Navigation.astro | 80 +++++++++++++++---
 infra/website/src/layouts/BaseLayout.astro    | 12 ++-
 infra/website/src/layouts/BlogLayout.astro    | 15 +++-
 infra/website/src/pages/blog/[slug].astro     | 20 ++---
 infra/website/src/pages/blog/index.astro      |  8 +-
 infra/website/src/styles/global.css           | 81 ++++++++++++++-----
 6 files changed, 165 insertions(+), 51 deletions(-)

diff --git a/infra/website/src/components/Navigation.astro b/infra/website/src/components/Navigation.astro
index a5987bf6348..143fcbc047f 100644
--- a/infra/website/src/components/Navigation.astro
+++ b/infra/website/src/components/Navigation.astro
@@ -14,11 +14,29 @@
         <a href="https://slack.feast.dev/" class="nav-item">COMMUNITY</a>
       </div>
       
-      <button class="mobile-menu-button" id="mobile-menu-button">
-        <svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
-        </svg>
-      </button>
+      <div class="nav-right">
+        <button class="theme-toggle" id="theme-toggle" aria-label="Toggle dark mode">
+          <svg class="icon-sun" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <circle cx="12" cy="12" r="5"></circle>
+            <line x1="12" y1="1" x2="12" y2="3"></line>
+            <line x1="12" y1="21" x2="12" y2="23"></line>
+            <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
+            <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
+            <line x1="1" y1="12" x2="3" y2="12"></line>
+            <line x1="21" y1="12" x2="23" y2="12"></line>
+            <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
+            <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
+          </svg>
+          <svg class="icon-moon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
+          </svg>
+        </button>
+        <button class="mobile-menu-button" id="mobile-menu-button">
+          <svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
+          </svg>
+        </button>
+      </div>
     </div>
     
     <div class="mobile-menu" id="mobile-menu">
@@ -38,7 +56,7 @@
     top: 0;
     left: 0;
     right: 0;
-    background-color: white;
+    background-color: var(--color-nav-bg);
     z-index: 1000;
   }
 
@@ -80,6 +98,35 @@
     margin-left: 32px;
   }
 
+  .nav-right {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    padding-right: var(--content-padding);
+  }
+
+  .theme-toggle {
+    background: none;
+    border: none;
+    padding: 8px;
+    cursor: pointer;
+    color: var(--color-text);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0.7;
+    transition: opacity 0.2s ease;
+  }
+
+  .theme-toggle:hover {
+    opacity: 1;
+  }
+
+  .icon-sun { display: none; }
+  .icon-moon { display: block; }
+  :global([data-theme="dark"]) .icon-sun { display: block; }
+  :global([data-theme="dark"]) .icon-moon { display: none; }
+
   .mobile-menu-button {
     display: block;
     background: none;
@@ -87,7 +134,6 @@
     padding: 8px;
     cursor: pointer;
     color: var(--color-text);
-    margin-right: var(--content-padding);
   }
 
   @media (min-width: 1024px) {
@@ -95,7 +141,7 @@
       display: flex;
       align-items: center;
     }
-    
+
     .mobile-menu-button {
       display: none;
     }
@@ -104,9 +150,9 @@
   .mobile-menu {
     display: none;
     width: 100%;
-    background: white;
+    background: var(--color-nav-bg);
     padding: 16px 0;
-    border-top: 1px solid #eee;
+    border-top: 1px solid var(--color-border);
     position: absolute;
     top: 52px;
     left: 0;
@@ -122,17 +168,27 @@
   }
 
   .mobile-menu a:hover {
-    background-color: #f5f5f5;
+    background-color: var(--color-nav-hover);
   }
 </style>
 
 <script>
   const menuButton = document.getElementById('mobile-menu-button');
   const mobileMenu = document.getElementById('mobile-menu');
-  
+
   if (menuButton && mobileMenu) {
     menuButton.addEventListener('click', () => {
       mobileMenu.classList.toggle('active');
     });
   }
+
+  const themeToggle = document.getElementById('theme-toggle');
+  if (themeToggle) {
+    themeToggle.addEventListener('click', () => {
+      const current = document.documentElement.getAttribute('data-theme');
+      const next = current === 'dark' ? 'light' : 'dark';
+      document.documentElement.setAttribute('data-theme', next);
+      localStorage.setItem('theme', next);
+    });
+  }
 </script> 
\ No newline at end of file
diff --git a/infra/website/src/layouts/BaseLayout.astro b/infra/website/src/layouts/BaseLayout.astro
index 05d940005ba..96e30a6aee2 100644
--- a/infra/website/src/layouts/BaseLayout.astro
+++ b/infra/website/src/layouts/BaseLayout.astro
@@ -52,7 +52,17 @@ const {
     <link rel="icon" href="/images/feast_icon-black.png" sizes="192x192">
     <link rel="apple-touch-icon" href="/images/feast_icon-black.png">
   </head>
-  <body class="bg-white">
+  <script is:inline>
+    (function() {
+      const saved = localStorage.getItem('theme');
+      if (saved) {
+        document.documentElement.setAttribute('data-theme', saved);
+      } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+        document.documentElement.setAttribute('data-theme', 'dark');
+      }
+    })();
+  </script>
+  <body>
     <slot name="header" />
     <main>
       <slot />
diff --git a/infra/website/src/layouts/BlogLayout.astro b/infra/website/src/layouts/BlogLayout.astro
index c5f8379fc80..9fe68a9daa7 100644
--- a/infra/website/src/layouts/BlogLayout.astro
+++ b/infra/website/src/layouts/BlogLayout.astro
@@ -14,7 +14,7 @@ const { frontmatter } = Astro.props;
         <header class="mb-8">
           <h1 class="font-mono font-bold text-4xl mb-2">{frontmatter.title}</h1>
           {frontmatter.date && (
-            <time class="font-mono text-sm text-gray-500 block" datetime={frontmatter.date}>
+            <time class="blog-date" datetime={frontmatter.date}>
               {new Date(frontmatter.date).toLocaleDateString('en-US', {
                 year: 'numeric',
                 month: 'long',
@@ -34,6 +34,13 @@ const { frontmatter } = Astro.props;
 </BaseLayout>
 
 <style>
+  .blog-date {
+    font-family: var(--font-mono);
+    font-size: 0.875rem;
+    color: var(--color-text-secondary);
+    display: block;
+  }
+
   .blog-content {
     font-family: var(--font-sans);
   }
@@ -77,13 +84,13 @@ const { frontmatter } = Astro.props;
   
   .blog-content :global(code) {
     font-family: var(--font-mono);
-    background-color: #f5f5f5;
+    background-color: var(--color-surface);
     padding: 0.2em 0.4em;
     border-radius: 3px;
   }
-  
+
   .blog-content :global(pre) {
-    background-color: #f5f5f5;
+    background-color: var(--color-surface);
     padding: 1em;
     border-radius: 5px;
     overflow-x: auto;
diff --git a/infra/website/src/pages/blog/[slug].astro b/infra/website/src/pages/blog/[slug].astro
index a8ab3da8559..1030dfc7293 100644
--- a/infra/website/src/pages/blog/[slug].astro
+++ b/infra/website/src/pages/blog/[slug].astro
@@ -106,7 +106,7 @@ const socialImage = heroImage ? toAbsoluteUrl(heroImage) : undefined;
     max-width: 1024px;
     padding: 0 20px;
     word-break: break-word;
-    color: rgb(0, 0, 0);
+    color: var(--color-text);
     -webkit-font-smoothing: antialiased;
     text-rendering: optimizelegibility;
     font-feature-settings: "ss03";
@@ -116,7 +116,7 @@ const socialImage = heroImage ? toAbsoluteUrl(heroImage) : undefined;
     font-family: var(--font-sans);
     font-size: 20px;
     line-height: 1.5;
-    color: #666;
+    color: var(--color-text-secondary);
     margin: 0 auto 24px;
     max-width: 768px;
   }
@@ -124,7 +124,7 @@ const socialImage = heroImage ? toAbsoluteUrl(heroImage) : undefined;
   .blog-meta {
     font-family: var(--font-sans);
     font-size: 14px;
-    color: #666;
+    color: var(--color-text-secondary);
     display: flex;
     gap: 16px;
     justify-content: center;
@@ -197,7 +197,7 @@ const socialImage = heroImage ? toAbsoluteUrl(heroImage) : undefined;
 
   /* Code blocks */
   .blog-content :global(pre) {
-    background: #f6f8fa;
+    background: var(--color-surface);
     padding: 16px;
     border-radius: 4px;
     overflow-x: auto;
@@ -207,7 +207,7 @@ const socialImage = heroImage ? toAbsoluteUrl(heroImage) : undefined;
   .blog-content :global(code) {
     font-family: var(--font-mono);
     font-size: 14px;
-    background: #f6f8fa;
+    background: var(--color-surface);
     padding: 2px 4px;
     border-radius: 3px;
   }
@@ -259,7 +259,7 @@ const socialImage = heroImage ? toAbsoluteUrl(heroImage) : undefined;
 
   .blog-content :global(figcaption) {
     font-size: 14px;
-    color: #666;
+    color: var(--color-text-secondary);
     text-align: center;
     margin-top: 8px;
   }
@@ -278,9 +278,9 @@ const socialImage = heroImage ? toAbsoluteUrl(heroImage) : undefined;
   .blog-content :global(blockquote) {
     margin: 24px 0;
     padding-left: 16px;
-    border-left: 4px solid #ddd;
+    border-left: 4px solid var(--color-border);
     font-style: italic;
-    color: #555;
+    color: var(--color-text-secondary);
   }
 
   /* Tables */
@@ -293,12 +293,12 @@ const socialImage = heroImage ? toAbsoluteUrl(heroImage) : undefined;
   .blog-content :global(th),
   .blog-content :global(td) {
     padding: 12px;
-    border: 1px solid #ddd;
+    border: 1px solid var(--color-border);
     text-align: left;
   }
 
   .blog-content :global(th) {
-    background: #f6f8fa;
+    background: var(--color-surface);
     font-weight: 600;
   }
 
diff --git a/infra/website/src/pages/blog/index.astro b/infra/website/src/pages/blog/index.astro
index 0774efd8b27..edc52feba3d 100644
--- a/infra/website/src/pages/blog/index.astro
+++ b/infra/website/src/pages/blog/index.astro
@@ -78,7 +78,7 @@ const sortedPosts = posts.sort((a, b) => {
     max-width: 1024px;
     padding: 0 20px;
     word-break: break-word;
-    color: rgb(0, 0, 0);
+    color: var(--color-text);
     -webkit-font-smoothing: antialiased;
     text-rendering: optimizelegibility;
     font-feature-settings: "ss03";
@@ -88,7 +88,7 @@ const sortedPosts = posts.sort((a, b) => {
     font-family: var(--font-sans);
     font-size: 20px;
     line-height: 1.5;
-    color: #666;
+    color: var(--color-text-secondary);
     margin: 0 auto 24px;
     max-width: 768px;
   }
@@ -115,7 +115,7 @@ const sortedPosts = posts.sort((a, b) => {
   .post-date {
     font-family: var(--font-mono);
     font-size: 14px;
-    color: #666;
+    color: var(--color-text-secondary);
     white-space: nowrap;
   }
 
@@ -147,7 +147,7 @@ const sortedPosts = posts.sort((a, b) => {
   .post-authors {
     font-family: var(--font-sans);
     font-size: 14px;
-    color: #666;
+    color: var(--color-text-secondary);
   }
 
   @media (max-width: 768px) {
diff --git a/infra/website/src/styles/global.css b/infra/website/src/styles/global.css
index 95163f38941..d9916f6b66e 100644
--- a/infra/website/src/styles/global.css
+++ b/infra/website/src/styles/global.css
@@ -4,7 +4,9 @@
     --font-mono: "IBM Plex Mono", monospace;
     --font-sans: "IBM Plex Sans", sans-serif;
     --color-text: rgb(0, 0, 0);
+    --color-text-secondary: #666;
     --color-background: #ffffff;
+    --color-surface: #f5f5f5;
     --color-primary: #0068c9;
     --color-border: #e5e5e5;
     --spacing-sm: 16px;
@@ -14,6 +16,12 @@
     --border-color: rgb(214, 214, 214);
     --content-max-width: 1200px;
     --content-padding: 20px;
+    --color-nav-bg: #ffffff;
+    --color-nav-hover: #f5f5f5;
+    --color-button-hover: #333;
+    --color-code-bg: #000;
+    --color-code-text: #e6edf3;
+    --color-logo-filter: none;
     --shiki-color-text: #e6edf3;
     --shiki-color-background: #000000;
     --shiki-token-constant: #79c0ff;
@@ -27,6 +35,22 @@
     --shiki-token-link: #a5d6ff;
 }
 
+[data-theme="dark"] {
+    --color-text: rgb(230, 230, 230);
+    --color-text-secondary: #999;
+    --color-background: #0d0d0d;
+    --color-surface: #1a1a1a;
+    --color-primary: #4da3ff;
+    --color-border: #2a2a2a;
+    --border-color: #2a2a2a;
+    --color-nav-bg: #111111;
+    --color-nav-hover: #1a1a1a;
+    --color-button-hover: #ccc;
+    --color-code-bg: #111;
+    --color-code-text: #e6edf3;
+    --color-logo-filter: invert(1);
+}
+
 /* Common text rendering properties */
 body, .text-smooth {
     -webkit-font-smoothing: antialiased;
@@ -83,7 +107,7 @@ main::before {
     top: 0;
     left: 0;
     right: 0;
-    background-color: white;
+    background-color: var(--color-nav-bg);
     z-index: 1000;
 }
 
@@ -160,9 +184,9 @@ main::before {
 .mobile-menu {
     display: none;
     width: 100%;
-    background: white;
+    background: var(--color-nav-bg);
     padding: 16px 0;
-    border-top: 1px solid #eee;
+    border-top: 1px solid var(--color-border);
     position: absolute;
     top: 52px;
     left: 0;
@@ -178,7 +202,7 @@ main::before {
 }
 
 .mobile-menu a:hover {
-    background-color: #f5f5f5;
+    background-color: var(--color-nav-hover);
 }
 
 /* Hero section */
@@ -234,11 +258,11 @@ main::before {
 
 .button-primary {
     background-color: var(--color-text);
-    color: white;
+    color: var(--color-background);
 }
 
 .button-primary:hover {
-    background-color: #333;
+    background-color: var(--color-button-hover);
 }
 
 .hero-button {
@@ -324,12 +348,12 @@ main::before {
     font-family: var(--font-sans);
     font-size: 16px;
     line-height: 24px;
-    color: #333;
+    color: var(--color-text-secondary);
 }
 
 /* Code Example */
 .code-example {
-    background-color: #f5f5f5;
+    background-color: var(--color-surface);
     border-radius: 4px;
     padding: var(--spacing-md);
     margin-top: var(--spacing-lg);
@@ -357,7 +381,7 @@ main::before {
 .features-section {
     padding-top: 80px;
     margin-top: 40px;
-    border-top: 1px solid #f0f0f0;
+    border-top: 1px solid var(--color-border);
 }
 
 /* Add a visual indicator to encourage scrolling */
@@ -392,13 +416,13 @@ main::before {
 }
 
 .metric-area {
-    fill: #ccc;
-    opacity: 0.6;
+    fill: var(--color-text-secondary);
+    opacity: 0.4;
 }
 
 .metric-line {
     fill: none;
-    stroke: black;
+    stroke: var(--color-text);
     stroke-width: 1;
     opacity: 0.8;
 }
@@ -407,6 +431,7 @@ main::before {
     font-family: var(--font-mono);
     font-size: 12px;
     font-weight: 500;
+    fill: var(--color-text);
 }
 
 /* Metrics section */
@@ -452,7 +477,7 @@ main::before {
 .metric-label {
     font-family: var(--font-mono);
     font-size: 14px;
-    color: #666;
+    color: var(--color-text-secondary);
     text-transform: uppercase;
     letter-spacing: 0.02em;
 }
@@ -516,7 +541,7 @@ main::before {
     font-family: var(--font-sans);
     font-size: 14px;
     line-height: 20px;
-    color: #666;
+    color: var(--color-text-secondary);
     margin: 0;
 }
 
@@ -599,6 +624,22 @@ main::before {
     margin: 0 auto;
 }
 
+[data-theme="dark"] .integration-logo {
+    filter: grayscale(100%) contrast(1.2) invert(1);
+}
+
+[data-theme="dark"] .integration-logo:hover {
+    filter: grayscale(0%) contrast(1) brightness(1.2);
+}
+
+[data-theme="dark"] .company-logo {
+    filter: var(--color-logo-filter);
+}
+
+[data-theme="dark"] .logo img {
+    filter: var(--color-logo-filter);
+}
+
 /* Specific logo size adjustments */
 .integration-item img[alt="SingleStore"] {
     max-width: 130px;
@@ -619,7 +660,7 @@ main::before {
     font-size: 14px;
     font-weight: 600;
     text-align: center;
-    color: #666;
+    color: var(--color-text-secondary);
     opacity: 0.9;
     transition: opacity 0.2s ease;
     padding: 8px 0;
@@ -655,7 +696,7 @@ main::before {
 }
 
 .code-block {
-    background-color: #000;
+    background-color: var(--color-code-bg);
     overflow: hidden;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     margin: 0 auto;
@@ -752,7 +793,7 @@ main::before {
     font-size: 12px;
     font-weight: 400;
     text-transform: uppercase;
-    color: #666;
+    color: var(--color-text-secondary);
     margin-bottom: 12px;
 }
 
@@ -769,7 +810,7 @@ main::before {
     font-family: var(--font-sans);
     font-size: 14px;
     line-height: 20px;
-    color: #666;
+    color: var(--color-text-secondary);
 }
 
 /* CTA section */
@@ -815,7 +856,7 @@ main::before {
     font-family: var(--font-sans);
     font-size: 14px;
     line-height: 20px;
-    color: #666;
+    color: var(--color-text-secondary);
     margin: 0 auto 24px;
     max-width: 280px;
 }
@@ -840,7 +881,7 @@ main::before {
 
 .cta-button:hover {
     background: var(--color-text);
-    color: white;
+    color: var(--color-background);
 }
 
 /* Bordered container */