Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

ADD prototype version dark mode for Airflow UI #39355

Open
wants to merge 18 commits into
base: main
Choose a base branch
from
+81 −1
Open

ADD prototype version dark mode for Airflow UI #39355

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
c47482b
ADD prototype version dark mode for Airflow UI
May 2, 2024
eadcd23
fix flickering when refresh page
May 9, 2024
fce5c71
Merge branch 'main' into secy_branch
YounHS May 9, 2024
43a2d96
clean up commented code
May 11, 2024
58767ae
indent fix tab to 2 indent
May 11, 2024
cfb8bb8
Merge branch 'main' into secy_branch
YounHS May 11, 2024
87098ec
add comment for linter
May 11, 2024
ab1f041
Merge branch 'main' into secy_branch
YounHS May 11, 2024
5b1c374
fix to simple code, but to require refactoring in the future
YounHS May 12, 2024
87eee0e
Merge branch 'main' into secy_branch
YounHS May 12, 2024
8d7f34d
flickering fix optimization
May 12, 2024
edbbd2b
Merge branch 'main' into secy_branch
YounHS May 12, 2024
6654e98
Merge branch 'main' into secy_branch
YounHS May 13, 2024
a479a4b
Merge branch 'main' into secy_branch
YounHS May 15, 2024
b9c0b33
lint fix
May 16, 2024
732896d
fix lint
May 21, 2024
95924eb
final lint error fix
May 21, 2024
3ed864d
dark/light mode icon toggle
Jun 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
6 changes: 6 additions & 0 deletions airflow/www/static/css/bootstrap-theme.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
33 changes: 33 additions & 0 deletions airflow/www/static/js/toggle_theme.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
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();
7 changes: 7 additions & 0 deletions airflow/www/templates/appbuilder/navbar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,13 @@
{% include 'appbuilder/navbar_menu.html' %}
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active">
YounHS marked this conversation as resolved.
Show resolved Hide resolved
<div style="padding: 20px; cursor: pointer" id="themeToggleButton">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's add a title and aria-label saying something like "Toggle dark mode (experimental)"

<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">
YounHS marked this conversation as resolved.
Show resolved Hide resolved
<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>
Expand Down
11 changes: 10 additions & 1 deletion airflow/www/views.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -719,8 +719,17 @@ 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(AirflowBaseView):
YounHS marked this conversation as resolved.
Show resolved Hide resolved
claass Airflow(CustomAirflow):
"""Main Airflow application."""

@expose("/health")
Expand Down