This is an automated email from the ASF dual-hosted git repository.
jscheffl pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/airflow.git
The following commit(s) were added to refs/heads/main by this push:
new 260953edca Clean up dark mode (#40466)
260953edca is described below
commit 260953edca92237e8df4d9d6ba9e4ad25e68f79b
Author: Brent Bovenzi <[email protected]>
AuthorDate: Thu Jun 27 17:08:06 2024 -0400
Clean up dark mode (#40466)
---
airflow/www/static/css/bootstrap-theme.css | 9 ++++++---
airflow/www/static/js/toggle_theme.js | 2 +-
airflow/www/templates/appbuilder/navbar.html | 2 +-
3 files changed, 8 insertions(+), 5 deletions(-)
diff --git a/airflow/www/static/css/bootstrap-theme.css
b/airflow/www/static/css/bootstrap-theme.css
index 89133959c4..921d795b96 100644
--- a/airflow/www/static/css/bootstrap-theme.css
+++ b/airflow/www/static/css/bootstrap-theme.css
@@ -39,15 +39,18 @@ html {
html[data-color-scheme="dark"] {
filter: invert(100%) hue-rotate(180deg);
}
+
+/* Default icons to not display until the data-color-scheme has been set */
+#dark_icon,
+#light_icon {
+ display: none;
+}
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;
}
diff --git a/airflow/www/static/js/toggle_theme.js
b/airflow/www/static/js/toggle_theme.js
index 292c499544..7cbe88dcbe 100644
--- a/airflow/www/static/js/toggle_theme.js
+++ b/airflow/www/static/js/toggle_theme.js
@@ -31,7 +31,7 @@ const updateTheme = (isDark) => {
};
const initTheme = () => {
const isDark = getJsonFromStorage(STORAGE_THEME_KEY);
- if (isDark !== null) updateTheme(isDark);
+ updateTheme(isDark);
};
const toggleTheme = () => {
const isDark = getJsonFromStorage(STORAGE_THEME_KEY);
diff --git a/airflow/www/templates/appbuilder/navbar.html
b/airflow/www/templates/appbuilder/navbar.html
index ed8e75045f..141d778d23 100644
--- a/airflow/www/templates/appbuilder/navbar.html
+++ b/airflow/www/templates/appbuilder/navbar.html
@@ -51,7 +51,7 @@
</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 title="Toggle Dark Mode (experimental)" aria-label="Toggle Dark
Mode (experimental)" style="padding: 20px; cursor: pointer"
id="themeToggleButton">
<div id="dark_icon">
<i class="fa-regular fa-moon fa-lg" id="themeToggleButton"></i>
</div>
