apache · YounHS · May 2, 2024 · May 9, 2024 · May 9, 2024 · May 11, 2024
@@ -35,6 +35,12 @@ html {
   font-family: sans-serif;
   -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='light'] {
+
 }
 body {
   margin: 0;

@@ -0,0 +1,54 @@
+/*!
+ * 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.
+ */
+
+/* document, localStorage, window */
+
+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) ?? window.matchMedia('(prefers-color-scheme: dark)').matches;
+    updateTheme(isDark);
+}
+;
+const toggleTheme = ()=>{
+    const isDark = getJsonFromStorage(STORAGE_THEME_KEY);
+    updateTheme(!isDark);
+}
+;
+window.addEventListener('click', (e)=>{
+    if (e.target.id !== TOGGLE_BUTTON_ID)
+        return;
+    toggleTheme();
+}
+);
+window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e)=>{
+    const isDark = e.matches;
+    updateTheme(isDark);
+}
+);
+initTheme();
@@ -50,6 +50,13 @@
         {% include 'appbuilder/navbar_menu.html' %}
       </ul>
       <ul class="nav navbar-nav navbar-right">
+        <li class="active">
+          <div style="padding: 20px; cursor: pointer" id="themeToggleButton">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-moon" viewBox="0 0 16 16" id="themeToggleButton">
+              <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>

diff --git a/airflow/www/views.py b/airflow/www/views.py
@@ -719,8 +719,16 @@ def render_template(self, *args, **kwargs):
             **kwargs,
         )
 
+class CustomAirflow(AirflowBaseView):
+    def render_template(self, *args, **kwargs):
+        rendered_template = super().render_template(*args, **kwargs)
+
+        script_tag = '<script src="/static/js/toggle_theme.js"></script>'
+
+        return rendered_template.replace("<head>", f"{script_tag}<head>")
+
 
-class Airflow(AirflowBaseView):
+class Airflow(CustomAirflow):
     """Main Airflow application."""
 
     @expose("/health")