ADD prototype version dark mode for Airflow UI

airflow/www/static/css/bootstrap-theme.css

@@ -36,6 +36,9 @@ html {
   -ms-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;
 }
+html.dark-mode{
+  filter: invert(100%)hue-rotate(180deg);
+}
 body {
   margin: 0;
 }
@@ -298,6 +301,9 @@ html {
   font-size: 12px;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
+html.dark-mode{
+  filter: invert(100%)hue-rotate(180deg);
+}
 body {
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 14px;

airflow/www/templates/appbuilder/navbar.html

@@ -50,8 +50,37 @@
         {% include 'appbuilder/navbar_menu.html' %}
       </ul>
       <ul class="nav navbar-nav navbar-right">
+	<li class="active">
+          <div style="padding: 20px; cursor: pointer" id="toggle_dark">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-moon" viewBox="0 0 16 16">
+              <path d="M6 .278a.77.77 0 0 1 .08.858 7.2 7.2 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277q.792-.001 1.533-.16a.79.79 0 0 1 .81.316.73.73 0 0 1-.031.893A8.35 8.35 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.75.75 0 0 1 6 .278M4.858 1.311A7.27 7.27 0 0 0 1.025 7.71c0 4.02 3.279 7.276 7.319 7.276a7.32 7.32 0 0 0 5.205-2.162q-.506.063-1.029.063c-4.61 0-8.343-3.714-8.343-8.29 0-1.167.242-2.278.681-3.286"></path>
+            </svg>
+          </div>
+        </li>
         {% include 'appbuilder/navbar_right.html' %}
       </ul>
     </div>
   </div>
+  <style>
+    html.dark-mode {
+      filter: invert(100%) hue-rotate(180deg);
+    }
+  </style>
+  <script>
+    const clickableDiv = document.getElementById('toggle_dark');
+
+    document.addEventListener('DOMContentLoaded', function () {
+      const darkMode = localStorage.getItem('darkMode');
+      if (darkMode === 'enabled') {
+        document.documentElement.classList.add('dark-mode');
+      }
+    });
+
+    clickableDiv.addEventListener('click', function () {
+      document.documentElement.classList.toggle('dark-mode');
+
+      const darkModeEnabled = document.documentElement.classList.contains('dark-mode');
+      localStorage.setItem('darkMode', darkModeEnabled ? 'enabled' : 'disabled');
+    });
+  </script>
 </div>