From 003bf97151b0acc085903644c1b880eea2ca4eec Mon Sep 17 00:00:00 2001
From: Shahar Epstein <60007259+shahar1@users.noreply.github.com>
Date: Sat, 3 Jan 2026 17:15:28 +0200
Subject: [PATCH] Fix main button on prod and background on dev

---
 .../layouts/_partials/hooks/head-end.html     | 26 +++++++++++++++++++
 landing-pages/src/js/headerAnimation.js       | 15 +++++++++++
 2 files changed, 41 insertions(+)

diff --git a/landing-pages/site/layouts/_partials/hooks/head-end.html b/landing-pages/site/layouts/_partials/hooks/head-end.html
index ab2839eca49..f0c89d94922 100644
--- a/landing-pages/site/layouts/_partials/hooks/head-end.html
+++ b/landing-pages/site/layouts/_partials/hooks/head-end.html
@@ -19,6 +19,32 @@
 
 <meta name="description" content="{{ .Description | default $.Site.Params.description }}" />
 
+{{/* Early theme initialization to prevent FOUC and ensure animation gets correct theme */}}
+{{ if .Site.Params.ui.showLightDarkModeMenu -}}
+<script>
+(function() {
+  'use strict';
+  const themeKey = 'td-color-theme';
+  const getStoredTheme = () => localStorage.getItem(themeKey);
+  const getPreferredTheme = () => {
+    const storedTheme = getStoredTheme();
+    if (storedTheme) {
+      return storedTheme;
+    }
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  };
+  const setTheme = theme => {
+    if (theme === 'auto') {
+      document.documentElement.setAttribute('data-bs-theme', (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'));
+    } else {
+      document.documentElement.setAttribute('data-bs-theme', theme);
+    }
+  };
+  setTheme(getPreferredTheme());
+})();
+</script>
+{{ end -}}
+
 <!-- Matomo -->
 <script>
     var _paq = window._paq = window._paq || [];
diff --git a/landing-pages/src/js/headerAnimation.js b/landing-pages/src/js/headerAnimation.js
index 9b77f3a49db..9c13f5a459e 100644
--- a/landing-pages/src/js/headerAnimation.js
+++ b/landing-pages/src/js/headerAnimation.js
@@ -253,6 +253,21 @@ export function initHeaderAnimation() {
         });
       };
 
+      // Listen for theme changes and redraw
+      const observer = new MutationObserver((mutations) => {
+        mutations.forEach((mutation) => {
+          if (mutation.type === 'attributes' && mutation.attributeName === 'data-bs-theme') {
+            // Theme changed, sketch.draw() will be called automatically on next frame
+            // No need to do anything here as p5 continuously calls draw()
+          }
+        });
+      });
+      
+      observer.observe(document.documentElement, {
+        attributes: true,
+        attributeFilter: ['data-bs-theme']
+      });
+
       sketch.windowResized = debounce(() => {
         const positionInfo = canvas.getBoundingClientRect();
         const vw = positionInfo.width; // viewport width