Add dark mode support to Airflow documentation site

Upgrade Docsy theme from v0.2.0 to v0.12.0 and implement Bootstrap 5 dark mode.

Core Changes:
- Enable showLightDarkModeMenu in config.toml
- Add theme toggle component to navbar (light/dark/auto modes)
- Store user preference in localStorage
- Respect prefers-color-scheme media query

Styling Implementation:
- Use Bootstrap 5 CSS variables (--bs-body-color, --bs-secondary-bg, etc.) for all UI elements
- Style navbar, header, sidebar, tables, admonitions, and forms for dark mode
- Add Pygments-generated GitHub Dark theme for code syntax highlighting in Sphinx docs
- Adapt confetti animation to dynamically set background based on theme
- Ensure proper semantic colors for all admonition types (note, warning, error, hint, etc.)

Technical Details:
- Added $td-sidebar-tree-root-color variable (required by Docsy v0.2.0+)
- Added $font-awesome-font-name variable (required by Docsy v0.6.0+)
- Added .-bg-orange utility class (required by Docsy v0.6.0+)
- Created pygments/_dark.scss (generated via: pygmentize -S github-dark)
- Use hooks/body-end.html for webpack scripts (proper Docsy pattern)
- Add dark mode support to Sphinx theme (header.html, layout.html)
- Update .gitignore to exclude site/public/ directory

Fixed Issues:
- Confetti animation now visible with transparent header background
- Sidebar links readable in dark mode (increased contrast)
- All admonition types (including seealso) properly colored
- Logo text white in dark mode
- Navbar and header backgrounds adapt to theme

Architecture:
- Removed baseof.html override, use Docsy hooks instead
- Follow Docsy best practices for customization
- Use CSS variables for maintainability

Testing:
- Verified dark mode toggle works on all pages
- Confirmed confetti animation adapts to theme changes
- Tested all admonition types in light and dark modes
- Verified code syntax highlighting in Sphinx documentation

Author: kaxil

landing-pages/.gitignore

@@ -3,3 +3,4 @@ dist/
 site/data/webpack.json
 resources/
 site/static/_gen/
+site/public/

landing-pages/site/assets/scss/_colors.scss

@@ -33,7 +33,7 @@ $colors: (
         greyish-brown: #51504f
 );
 
-// Background color utility class for Docsy theme compatibility
+// Background color utility class required by Docsy v0.6.0+ theme
 .-bg-orange {
-  background-color: #FFA630; // Using $secondary color
+  background-color: #FFA630; // Using $secondary color value
 }

landing-pages/site/assets/scss/_header.scss

@@ -22,6 +22,8 @@
   position: relative;
   margin: 123px -20px 0;
   min-height: calc(100vh - 123px);
+  // background-color is handled by the canvas animation which draws white/dark background
+  transition: background-color 0.3s ease;
 }
 
 #header-canvas {
@@ -119,3 +121,22 @@
     }
   }
 }
+
+// Dark mode styles
+[data-bs-theme="dark"] {
+  #header {
+    // background-color handled by canvas animation
+  }
+
+  #header-canvas {
+    .text-area {
+      &--header {
+        color: rgba(255, 255, 255, 0.95);
+      }
+
+      &--subheader {
+        color: rgba(255, 255, 255, 0.75);
+      }
+    }
+  }
+}

landing-pages/site/assets/scss/_navbar.scss

@@ -28,6 +28,7 @@
   border-bottom: solid 1px map-get($colors, very-light-pink);
   z-index: 32;
   padding: 30px 60px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
 
   &__menu-container {
     flex-grow: 1;
@@ -50,6 +51,7 @@
     margin-right: 30px;
     position: relative;
     width: fit-content;
+    transition: color 0.3s ease;
 
     &::before, &::after {
       content: "";
@@ -74,6 +76,43 @@
   &--box-shadow {
     box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .12);
   }
+
+  // Theme toggle styling
+  &__theme-toggle {
+    display: inline-flex;
+    align-items: center;
+    position: relative;
+
+    .btn {
+      padding: 0.25rem 0.5rem;
+      font-size: 0.875rem;
+      border: none;
+      background: none;
+
+      svg {
+        width: 1rem;
+        height: 1rem;
+      }
+    }
+
+    .dropdown-menu {
+      font-size: 0.8125rem;
+      min-width: 7rem;
+      padding: 0.25rem 0;
+      left: 0 !important;
+      right: auto !important;
+
+      .dropdown-item {
+        padding: 0.375rem 0.75rem;
+        font-size: 0.8125rem;
+
+        svg {
+          width: 0.875rem;
+          height: 0.875rem;
+        }
+      }
+    }
+  }
 }
 
 @media (max-width: $tablet) {
@@ -154,3 +193,31 @@
     }
   }
 }
+
+// Dark mode styles
+[data-bs-theme="dark"] {
+  .navbar {
+    background-color: #1a1a1a;
+    border-bottom-color: #333;
+
+    &__text-link {
+      color: rgba(255, 255, 255, 0.85);
+
+      &:hover, &.active {
+        color: rgba(255, 255, 255, 1);
+      }
+    }
+
+    // Make logo text (Apache Airflow) white in dark mode
+    &__icon-container {
+      svg path[fill="#51504f"] {
+        fill: rgba(255, 255, 255, 0.95);
+      }
+    }
+
+    // Also handle mobile drawer background
+    &__drawer {
+      background-color: #1a1a1a;
+    }
+  }
+}

landing-pages/site/assets/scss/_rating.scss

@@ -31,18 +31,44 @@
   cursor: pointer;
   margin-right: 13px;
 
+  &:hover, &:hover ~ & {
+    svg {
+      path {
+        fill: #017cee;
+        stroke: none;
+      }
+    }
+  }
+
   svg {
     path {
       fill: none;
       stroke: #51504f;
     }
   }
+}
+
+// Dark mode styles
+[data-bs-theme="dark"] {
+  .rating-container {
+    p {
+      color: rgba(255, 255, 255, 0.85);
+    }
+  }
+
+  .rate-star {
+    &:hover, &:hover ~ & {
+      svg {
+        path {
+          fill: #68d2fe;
+          stroke: none;
+        }
+      }
+    }
 
-  &:hover, &:hover ~ & {
     svg {
       path {
-        fill: #017cee;
-        stroke: none;
+        stroke: rgba(255, 255, 255, 0.75);
       }
     }
   }

landing-pages/site/assets/scss/_roadmap.scss

@@ -288,3 +288,8 @@
     }
   }
 }
+
+// Dark mode styles for roadmap page
+[data-bs-theme="dark"] .roadmap .td-sidebar {
+  background-color: #2d2d2d !important;
+}