From c47482be94ad6a93613475748e01f93dee0a36d5 Mon Sep 17 00:00:00 2001 From: hsyoun Date: Thu, 2 May 2024 09:50:49 +0900 Subject: [PATCH 01/14] ADD prototype version dark mode for Airflow UI --- airflow/www/static/css/bootstrap-theme.css | 6 ++++ airflow/www/templates/appbuilder/navbar.html | 29 ++++++++++++++++++++ 2 files changed, 35 insertions(+) diff --git a/airflow/www/static/css/bootstrap-theme.css b/airflow/www/static/css/bootstrap-theme.css index 371762d55857e..e9e052aebed35 100644 --- a/airflow/www/static/css/bootstrap-theme.css +++ b/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; diff --git a/airflow/www/templates/appbuilder/navbar.html b/airflow/www/templates/appbuilder/navbar.html index f3320c3c0004d..065c9f3c50068 100644 --- a/airflow/www/templates/appbuilder/navbar.html +++ b/airflow/www/templates/appbuilder/navbar.html @@ -50,8 +50,37 @@ {% include 'appbuilder/navbar_menu.html' %} + + From eadcd23b8a2e66cf2b4c8e0da06f6df6a1c04913 Mon Sep 17 00:00:00 2001 From: hsyoun Date: Thu, 9 May 2024 15:56:49 +0900 Subject: [PATCH 02/14] fix flickering when refresh page --- airflow/www/static/css/bootstrap-theme.css | 10 +++--- airflow/www/static/js/toggle_theme.js | 33 ++++++++++++++++++++ airflow/www/templates/appbuilder/navbar.html | 26 ++------------- airflow/www/views.py | 11 ++++++- 4 files changed, 50 insertions(+), 30 deletions(-) create mode 100644 airflow/www/static/js/toggle_theme.js diff --git a/airflow/www/static/css/bootstrap-theme.css b/airflow/www/static/css/bootstrap-theme.css index e9e052aebed35..51ae17b9ab559 100644 --- a/airflow/www/static/css/bootstrap-theme.css +++ b/airflow/www/static/css/bootstrap-theme.css @@ -36,8 +36,11 @@ html { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } -html.dark-mode{ - filter: invert(100%)hue-rotate(180deg); +html[data-color-scheme='dark'] { + filter:invert(100%)hue-rotate(180deg); +} +html[data-color-scheme='light'] { + } body { margin: 0; @@ -301,9 +304,6 @@ 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; diff --git a/airflow/www/static/js/toggle_theme.js b/airflow/www/static/js/toggle_theme.js new file mode 100644 index 0000000000000..150b8d25beca8 --- /dev/null +++ b/airflow/www/static/js/toggle_theme.js @@ -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(); diff --git a/airflow/www/templates/appbuilder/navbar.html b/airflow/www/templates/appbuilder/navbar.html index 065c9f3c50068..d749643041283 100644 --- a/airflow/www/templates/appbuilder/navbar.html +++ b/airflow/www/templates/appbuilder/navbar.html @@ -51,8 +51,8 @@ - - diff --git a/airflow/www/views.py b/airflow/www/views.py index 306926c163ae0..b7c5cdf4e06c5 100644 --- a/airflow/www/views.py +++ b/airflow/www/views.py @@ -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 = '' + + return rendered_template.replace("", f"{script_tag}") + -class Airflow(AirflowBaseView): +#class Airflow(AirflowBaseView): +claass Airflow(CustomAirflow): """Main Airflow application.""" @expose("/health") From 43a2d962189db3c672cc5079e59bcbe5fb901160 Mon Sep 17 00:00:00 2001 From: hightophades Date: Sat, 11 May 2024 16:37:04 +0900 Subject: [PATCH 03/14] clean up commented code --- airflow/www/views.py | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/airflow/www/views.py b/airflow/www/views.py index f104a6e35e3ee..c4e2ffb5b244a 100644 --- a/airflow/www/views.py +++ b/airflow/www/views.py @@ -728,8 +728,7 @@ def render_template(self, *args, **kwargs): return rendered_template.replace("", f"{script_tag}") -#class Airflow(AirflowBaseView): -claass Airflow(CustomAirflow): +class Airflow(CustomAirflow): """Main Airflow application.""" @expose("/health") From 58767aebac495d4df5989feb98ce0bb3b3f07715 Mon Sep 17 00:00:00 2001 From: hightophades Date: Sat, 11 May 2024 16:40:39 +0900 Subject: [PATCH 04/14] indent fix tab to 2 indent --- airflow/www/templates/appbuilder/navbar.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/airflow/www/templates/appbuilder/navbar.html b/airflow/www/templates/appbuilder/navbar.html index d749643041283..ec7d08cece318 100644 --- a/airflow/www/templates/appbuilder/navbar.html +++ b/airflow/www/templates/appbuilder/navbar.html @@ -50,7 +50,7 @@ {% include 'appbuilder/navbar_menu.html' %}
    -
  • +
  • From 87098ec67f16114b0152173f4a6575857eb8ed61 Mon Sep 17 00:00:00 2001 From: hightophades Date: Sat, 11 May 2024 21:43:04 +0900 Subject: [PATCH 05/14] add comment for linter --- airflow/www/static/js/toggle_theme.js | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/airflow/www/static/js/toggle_theme.js b/airflow/www/static/js/toggle_theme.js index 150b8d25beca8..36d806f59c89e 100644 --- a/airflow/www/static/js/toggle_theme.js +++ b/airflow/www/static/js/toggle_theme.js @@ -1,3 +1,24 @@ +/*! + * 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; From 5b1c37487fe14e288b733a5b351e4008aff5b8c3 Mon Sep 17 00:00:00 2001 From: YounHS Date: Sun, 12 May 2024 13:34:46 +0900 Subject: [PATCH 06/14] fix to simple code, but to require refactoring in the future --- airflow/www/static/js/toggle_theme.js | 2 +- airflow/www/templates/airflow/main.html | 2 +- airflow/www/views.py | 16 ++++------------ 3 files changed, 6 insertions(+), 14 deletions(-) diff --git a/airflow/www/static/js/toggle_theme.js b/airflow/www/static/js/toggle_theme.js index 36d806f59c89e..b85b701000344 100644 --- a/airflow/www/static/js/toggle_theme.js +++ b/airflow/www/static/js/toggle_theme.js @@ -17,7 +17,7 @@ * under the License. */ -/* document, localStorage, window */ +/* global document, localStorage, window */ const STORAGE_THEME_KEY = 'darkTheme'; const HTML_THEME_DATASET_KEY = 'data-color-scheme'; diff --git a/airflow/www/templates/airflow/main.html b/airflow/www/templates/airflow/main.html index 69daa701d2651..a5d4099320e59 100644 --- a/airflow/www/templates/airflow/main.html +++ b/airflow/www/templates/airflow/main.html @@ -30,6 +30,7 @@ {% block head_meta %} {{ super() }} + {% if scheduler_job is defined and (scheduler_job and scheduler_job.is_alive()) %} {% endif %} @@ -114,7 +115,6 @@ {% block tail_js %} {{ super() }} - ' - - return rendered_template.replace("", f"{script_tag}") - -class Airflow(CustomAirflow): +class Airflow(AirflowBaseView): """Main Airflow application.""" @expose("/health") @@ -955,13 +947,13 @@ def index(self): owner_links_dict = DagOwnerAttributes.get_all(session) if get_auth_manager().is_authorized_view(access_view=AccessView.IMPORT_ERRORS): - import_errors = select(ParseImportError).order_by(ParseImportError.id) + import_errors = select(ImportError).order_by(ImportError.id) can_read_all_dags = get_auth_manager().is_authorized_dag(method="GET") if not can_read_all_dags: # if the user doesn't have access to all DAGs, only display errors from visible DAGs import_errors = import_errors.where( - ParseImportError.filename.in_( + ImportError.filename.in_( select(DagModel.fileloc).distinct().where(DagModel.dag_id.in_(filter_dag_ids)) ) ) From 8d7f34d7e5b9583993ed46ce07ffcffd62e09426 Mon Sep 17 00:00:00 2001 From: hightophades Date: Mon, 13 May 2024 08:15:05 +0900 Subject: [PATCH 07/14] flickering fix optimization --- airflow/www/templates/airflow/main.html | 2 +- airflow/www/views.py | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/airflow/www/templates/airflow/main.html b/airflow/www/templates/airflow/main.html index a5d4099320e59..58383651b7d8a 100644 --- a/airflow/www/templates/airflow/main.html +++ b/airflow/www/templates/airflow/main.html @@ -29,8 +29,8 @@ {% endblock %} {% block head_meta %} + {{ super() }} - {% if scheduler_job is defined and (scheduler_job and scheduler_job.is_alive()) %} {% endif %} diff --git a/airflow/www/views.py b/airflow/www/views.py index 889808b24c4d3..131b25f20be9f 100644 --- a/airflow/www/views.py +++ b/airflow/www/views.py @@ -105,7 +105,7 @@ from airflow.models.dag import get_dataset_triggered_next_run_info from airflow.models.dagrun import RUN_ID_REGEX, DagRun, DagRunType from airflow.models.dataset import DagScheduleDatasetReference, DatasetDagRunQueue, DatasetEvent, DatasetModel -from airflow.models.errors import ImportError +from airflow.models.errors import ParseImportError from airflow.models.operator import needs_expansion from airflow.models.serialized_dag import SerializedDagModel from airflow.models.taskinstance import TaskInstance, TaskInstanceNote @@ -947,13 +947,13 @@ def index(self): owner_links_dict = DagOwnerAttributes.get_all(session) if get_auth_manager().is_authorized_view(access_view=AccessView.IMPORT_ERRORS): - import_errors = select(ImportError).order_by(ImportError.id) + import_errors = select(ParseImportError).order_by(ParseImportError.id) can_read_all_dags = get_auth_manager().is_authorized_dag(method="GET") if not can_read_all_dags: # if the user doesn't have access to all DAGs, only display errors from visible DAGs import_errors = import_errors.where( - ImportError.filename.in_( + ParseImportError.filename.in_( select(DagModel.fileloc).distinct().where(DagModel.dag_id.in_(filter_dag_ids)) ) ) From b9c0b33b0162db7e5dd0632c1924362cba4e7f7d Mon Sep 17 00:00:00 2001 From: hsyoun Date: Fri, 17 May 2024 08:59:53 +0900 Subject: [PATCH 08/14] lint fix --- airflow/www/static/css/bootstrap-theme.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/airflow/www/static/css/bootstrap-theme.css b/airflow/www/static/css/bootstrap-theme.css index 51ae17b9ab559..d1871a2d1e7fd 100644 --- a/airflow/www/static/css/bootstrap-theme.css +++ b/airflow/www/static/css/bootstrap-theme.css @@ -37,10 +37,10 @@ html { -webkit-text-size-adjust: 100%; } html[data-color-scheme='dark'] { - filter:invert(100%)hue-rotate(180deg); + filter:invert(100%) hue-rotate(180deg); } html[data-color-scheme='light'] { - + /* not do */ } body { margin: 0; From 732896d79b71cfb3842714d47f104548e091c295 Mon Sep 17 00:00:00 2001 From: hsyoun Date: Tue, 21 May 2024 14:06:54 +0900 Subject: [PATCH 09/14] fix lint --- airflow/www/static/css/bootstrap-theme.css | 6 +-- airflow/www/static/js/toggle_theme.js | 54 +++++++++++----------- 2 files changed, 29 insertions(+), 31 deletions(-) diff --git a/airflow/www/static/css/bootstrap-theme.css b/airflow/www/static/css/bootstrap-theme.css index d1871a2d1e7fd..186025753b0fb 100644 --- a/airflow/www/static/css/bootstrap-theme.css +++ b/airflow/www/static/css/bootstrap-theme.css @@ -36,10 +36,10 @@ 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"] { + filter: invert(100%) hue-rotate(180deg); } -html[data-color-scheme='light'] { +html[data-color-scheme="light"] { /* not do */ } body { diff --git a/airflow/www/static/js/toggle_theme.js b/airflow/www/static/js/toggle_theme.js index b85b701000344..d1d0f05cf8454 100644 --- a/airflow/www/static/js/toggle_theme.js +++ b/airflow/www/static/js/toggle_theme.js @@ -19,36 +19,34 @@ /* global document, localStorage, window */ -const STORAGE_THEME_KEY = 'darkTheme'; -const HTML_THEME_DATASET_KEY = 'data-color-scheme'; +const STORAGE_THEME_KEY = "darkTheme"; +const HTML_THEME_DATASET_KEY = "data-color-scheme"; const HTML = document.documentElement; -const TOGGLE_BUTTON_ID = 'themeToggleButton'; +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 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(); From 95924ebbd62eb92074fe35bf27d5005d4567bdad Mon Sep 17 00:00:00 2001 From: hsyoun Date: Wed, 22 May 2024 08:24:41 +0900 Subject: [PATCH 10/14] final lint error fix --- airflow/www/static/js/toggle_theme.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/airflow/www/static/js/toggle_theme.js b/airflow/www/static/js/toggle_theme.js index d1d0f05cf8454..5a52bfceb07ee 100644 --- a/airflow/www/static/js/toggle_theme.js +++ b/airflow/www/static/js/toggle_theme.js @@ -48,5 +48,5 @@ window .addEventListener("change", (e) => { const isDark = e.matches; updateTheme(isDark); -}); + }); initTheme(); From 3ed864d07c9fdf84ee8595f087250840bc83874d Mon Sep 17 00:00:00 2001 From: hsyoun Date: Wed, 5 Jun 2024 09:41:04 +0900 Subject: [PATCH 11/14] dark/light mode icon toggle --- airflow/www/static/css/bootstrap-theme.css | 12 ++++++++++++ airflow/www/templates/appbuilder/navbar.html | 9 ++++++--- 2 files changed, 18 insertions(+), 3 deletions(-) diff --git a/airflow/www/static/css/bootstrap-theme.css b/airflow/www/static/css/bootstrap-theme.css index 186025753b0fb..0bbfb3107e5cc 100644 --- a/airflow/www/static/css/bootstrap-theme.css +++ b/airflow/www/static/css/bootstrap-theme.css @@ -39,9 +39,21 @@ html { 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; } diff --git a/airflow/www/templates/appbuilder/navbar.html b/airflow/www/templates/appbuilder/navbar.html index ec7d08cece318..c1dff92d6183a 100644 --- a/airflow/www/templates/appbuilder/navbar.html +++ b/airflow/www/templates/appbuilder/navbar.html @@ -52,9 +52,12 @@
    • - - - +
      + +
      +
      + +
      • {% include 'appbuilder/navbar_right.html' %} From e3f6b5d1fd760153bb3cd2b9b03daf214dabc478 Mon Sep 17 00:00:00 2001 From: hsyoun Date: Thu, 20 Jun 2024 09:58:45 +0900 Subject: [PATCH 12/14] add experimental element & auto detect to localstorage + user actions --- airflow/www/static/js/toggle_theme.js | 12 ++---------- airflow/www/templates/appbuilder/navbar.html | 2 +- 2 files changed, 3 insertions(+), 11 deletions(-) diff --git a/airflow/www/static/js/toggle_theme.js b/airflow/www/static/js/toggle_theme.js index 5a52bfceb07ee..437bb020513f9 100644 --- a/airflow/www/static/js/toggle_theme.js +++ b/airflow/www/static/js/toggle_theme.js @@ -30,10 +30,8 @@ const updateTheme = (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 isDark = getJsonFromStorage(STORAGE_THEME_KEY); + if (isDark !== null) updateTheme(isDark); }; const toggleTheme = () => { const isDark = getJsonFromStorage(STORAGE_THEME_KEY); @@ -43,10 +41,4 @@ 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(); diff --git a/airflow/www/templates/appbuilder/navbar.html b/airflow/www/templates/appbuilder/navbar.html index c1dff92d6183a..ed8e75045f439 100644 --- a/airflow/www/templates/appbuilder/navbar.html +++ b/airflow/www/templates/appbuilder/navbar.html @@ -51,7 +51,7 @@
    • -
      +
      From b8956be49ff69ab46c332b8e25ef833083993788 Mon Sep 17 00:00:00 2001 From: hsyoun Date: Mon, 24 Jun 2024 09:43:57 +0900 Subject: [PATCH 13/14] fix eventListener logic --- airflow/www/static/js/toggle_theme.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/airflow/www/static/js/toggle_theme.js b/airflow/www/static/js/toggle_theme.js index 437bb020513f9..d20240efae99e 100644 --- a/airflow/www/static/js/toggle_theme.js +++ b/airflow/www/static/js/toggle_theme.js @@ -37,8 +37,10 @@ const toggleTheme = () => { const isDark = getJsonFromStorage(STORAGE_THEME_KEY); updateTheme(!isDark); }; -window.addEventListener("click", (e) => { - if (e.target.id !== TOGGLE_BUTTON_ID) return; - toggleTheme(); +document.addEventListener("DOMContentLoaded", () => { + const themeButton = document.getElementById("themeToggleButton"); + themeButton.addEventListener("click", () => { + toggleTheme(); + }); }); initTheme(); From 48ead9bf3b904922f8b5ef26af2cdf55be55ba5c Mon Sep 17 00:00:00 2001 From: hsyoun Date: Wed, 26 Jun 2024 07:55:47 +0900 Subject: [PATCH 14/14] fix lint error --- airflow/www/static/js/toggle_theme.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/airflow/www/static/js/toggle_theme.js b/airflow/www/static/js/toggle_theme.js index d20240efae99e..292c4995447c7 100644 --- a/airflow/www/static/js/toggle_theme.js +++ b/airflow/www/static/js/toggle_theme.js @@ -17,7 +17,7 @@ * under the License. */ -/* global document, localStorage, window */ +/* global document, localStorage */ const STORAGE_THEME_KEY = "darkTheme"; const HTML_THEME_DATASET_KEY = "data-color-scheme"; @@ -38,7 +38,7 @@ const toggleTheme = () => { updateTheme(!isDark); }; document.addEventListener("DOMContentLoaded", () => { - const themeButton = document.getElementById("themeToggleButton"); + const themeButton = document.getElementById(TOGGLE_BUTTON_ID); themeButton.addEventListener("click", () => { toggleTheme(); });