From a0593a2df79e51c95a0f2f50ba910ccb787e252d Mon Sep 17 00:00:00 2001
From: Anthony Stirling <77850077+Frooodle@users.noreply.github.com>
Date: Sun, 20 Jul 2025 08:25:37 +0100
Subject: [PATCH] Fix tooltip for theme toggle

---
 .../main/resources/messages_en_GB.properties  |  1 +
 .../src/main/resources/static/js/darkmode.js  | 19 +++++++++++++++++++
 .../resources/templates/fragments/navbar.html |  4 ++--
 3 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/app/core/src/main/resources/messages_en_GB.properties b/app/core/src/main/resources/messages_en_GB.properties
index f78e80b65..dfb4657d9 100644
--- a/app/core/src/main/resources/messages_en_GB.properties
+++ b/app/core/src/main/resources/messages_en_GB.properties
@@ -347,6 +347,7 @@ analytics.settings=You can change the settings for analytics in the config/setti
 navbar.favorite=Favorites
 navbar.recent=New and recently updated
 navbar.darkmode=Dark Mode
+navbar.lightmode=Light Mode
 navbar.language=Languages
 navbar.settings=Settings
 navbar.allTools=Tools
diff --git a/app/core/src/main/resources/static/js/darkmode.js b/app/core/src/main/resources/static/js/darkmode.js
index abfe737c9..f3dd9a902 100644
--- a/app/core/src/main/resources/static/js/darkmode.js
+++ b/app/core/src/main/resources/static/js/darkmode.js
@@ -6,6 +6,8 @@ var elements = {
   darkModeStyles: null,
   rainbowModeStyles: null,
   darkModeIcon: null,
+  darkModeToggle: null,
+  darkModeText: null,
   searchBar: null,
   formControls: null,
   navIcons: null,
@@ -17,6 +19,8 @@ function getElements() {
   elements.darkModeStyles = document.getElementById("dark-mode-styles");
   elements.rainbowModeStyles = document.getElementById("rainbow-mode-styles");
   elements.darkModeIcon = document.getElementById("dark-mode-icon");
+  elements.darkModeToggle = document.getElementById("dark-mode-toggle");
+  elements.darkModeText = document.getElementById("dark-mode-text");
   elements.searchBar = document.getElementById("searchBar");
   elements.formControls = document.querySelectorAll(".form-control");
   elements.navDropdownMenus = document.querySelectorAll(".dropdown-menu");
@@ -41,6 +45,11 @@ function setMode(mode) {
     if (elements && elements.darkModeIcon) {
       elements.darkModeIcon.textContent = "dark_mode";
     }
+    if (elements && elements.darkModeToggle && elements.darkModeText) {
+      elements.darkModeToggle.title = elements.darkModeToggle.dataset.lightTitle;
+      elements.darkModeText.textContent = elements.darkModeText.dataset.lightText;
+      elements.darkModeText.setAttribute("data-text", elements.darkModeText.dataset.lightText);
+    }
     var tables = document.querySelectorAll(".table");
     tables.forEach((table) => {
       table.classList.add("table-dark");
@@ -49,6 +58,11 @@ function setMode(mode) {
     if (elements && elements.darkModeIcon) {
       elements.darkModeIcon.textContent = "light_mode";
     }
+    if (elements && elements.darkModeToggle && elements.darkModeText) {
+      elements.darkModeToggle.title = elements.darkModeToggle.dataset.darkTitle;
+      elements.darkModeText.textContent = elements.darkModeText.dataset.darkText;
+      elements.darkModeText.setAttribute("data-text", elements.darkModeText.dataset.darkText);
+    }
     var tables = document.querySelectorAll(".table-dark");
     tables.forEach((table) => {
       table.classList.remove("table-dark");
@@ -57,6 +71,11 @@ function setMode(mode) {
     if (elements && elements.darkModeIcon) {
       elements.darkModeIcon.textContent = "looks";
     }
+    if (elements && elements.darkModeToggle && elements.darkModeText) {
+      elements.darkModeToggle.title = elements.darkModeToggle.dataset.darkTitle;
+      elements.darkModeText.textContent = elements.darkModeText.dataset.darkText;
+      elements.darkModeText.setAttribute("data-text", elements.darkModeText.dataset.darkText);
+    }
   }
 }
 
diff --git a/app/core/src/main/resources/templates/fragments/navbar.html b/app/core/src/main/resources/templates/fragments/navbar.html
index 773810a5a..a33305e7a 100644
--- a/app/core/src/main/resources/templates/fragments/navbar.html
+++ b/app/core/src/main/resources/templates/fragments/navbar.html
@@ -127,12 +127,12 @@
             </div>
           </li>
           <li class="nav-item">
-            <a class="nav-link" id="dark-mode-toggle" href="#" th:title="#{navbar.darkmode}">
+            <a class="nav-link" id="dark-mode-toggle" href="#" th:title="#{navbar.darkmode}" data-dark-title="#{navbar.darkmode}" data-light-title="#{navbar.lightmode}">
               <span class="material-symbols-rounded" id="dark-mode-icon">
                 dark_mode
               </span>
               <span class="icon-text icon-hide" id="dark-mode-text" th:data-text="#{navbar.darkmode}"
-                th:text="#{navbar.darkmode}"></span>
+                th:text="#{navbar.darkmode}" data-dark-text="#{navbar.darkmode}" data-light-text="#{navbar.lightmode}"></span>
             </a>
           </li>
           <li class="nav-item dropdown">