ADD prototype version dark mode for Airflow UI (apache#39355)

* ADD prototype version dark mode for Airflow UI

* fix flickering when refresh page

* clean up commented code

* indent fix tab to 2 indent

* add comment for linter

* fix to simple code, but to require refactoring in the future

* flickering fix optimization

* lint fix

* fix lint

* final lint error fix

* dark/light mode icon toggle

* add experimental element & auto detect to localstorage + user actions

* fix eventListener logic

* fix lint error

---------

Co-authored-by: hsyoun <hsyoun@sj.co.kr>
Co-authored-by: Jens Scheffler <95105677+jscheffl@users.noreply.github.com>

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

@@ -36,6 +36,24 @@ html {
   -ms-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;
 }
+html[data-color-scheme="dark"] {
+  filter: invert(100%) hue-rotate(180deg);
+}
+html[data-color-scheme="dark"] #dark_icon {
+  display: block;
+}
+html[data-color-scheme="dark"] #light_icon {
+  display: none;
+}
+html[data-color-scheme="light"] {
+  /* not do */
+}
+html[data-color-scheme="light"] #dark_icon {
+  display: none;
+}
+html[data-color-scheme="light"] #light_icon {
+  display: block;
+}
 body {
   margin: 0;
 }

airflow/www/static/js/toggle_theme.js

@@ -0,0 +1,46 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+/* global document, localStorage */
+
+const STORAGE_THEME_KEY = "darkTheme";
+const HTML_THEME_DATASET_KEY = "data-color-scheme";
+const HTML = document.documentElement;
+const TOGGLE_BUTTON_ID = "themeToggleButton";
+
+const getJsonFromStorage = (key) => JSON.parse(localStorage.getItem(key));
+const updateTheme = (isDark) => {
+  localStorage.setItem(STORAGE_THEME_KEY, isDark);
+  HTML.setAttribute(HTML_THEME_DATASET_KEY, isDark ? "dark" : "light");
+};
+const initTheme = () => {
+  const isDark = getJsonFromStorage(STORAGE_THEME_KEY);
+  if (isDark !== null) updateTheme(isDark);
+};
+const toggleTheme = () => {
+  const isDark = getJsonFromStorage(STORAGE_THEME_KEY);
+  updateTheme(!isDark);
+};
+document.addEventListener("DOMContentLoaded", () => {
+  const themeButton = document.getElementById(TOGGLE_BUTTON_ID);
+  themeButton.addEventListener("click", () => {
+    toggleTheme();
+  });
+});
+initTheme();

airflow/www/templates/airflow/main.html

@@ -29,6 +29,7 @@
 {% endblock %}
 
 {% block head_meta %}
+  <script src="/static/js/toggle_theme.js"></script>
   {{ super() }}
   {% if scheduler_job is defined and (scheduler_job and scheduler_job.is_alive()) %}
     <meta name="is_scheduler_running" content="True">
@@ -114,7 +115,6 @@
 
 {% block tail_js %}
   {{ super() }}
-
   <script>
     // below variables are used in main.js
     // keep as var, changing to const or let breaks other code

airflow/www/templates/appbuilder/navbar.html

@@ -50,6 +50,16 @@
         {% include 'appbuilder/navbar_menu.html' %}
       </ul>
       <ul class="nav navbar-nav navbar-right">
+        <li class="active">
+          <div title="Experimental Dark Mode" aria-label="Experimental Dark Mode" style="padding: 20px; cursor: pointer" id="themeToggleButton">
+            <div id="dark_icon">
+              <i class="fa-regular fa-moon fa-lg" id="themeToggleButton"></i>
+            </div>
+            <div id="light_icon">
+              <i class="fa-regular fa-sun fa-lg" id="themeToggleButton"></i>
+            </div>
+          </div>
+        </li>
         {% include 'appbuilder/navbar_right.html' %}
       </ul>
     </div>