From 7faee8dd9265b35ea32dbd086753bfe7befed2d0 Mon Sep 17 00:00:00 2001
From: TeemoCell <github@teemocell.dev>
Date: Mon, 6 Oct 2025 13:38:10 +0200
Subject: [PATCH] Refactor dark mode toggle UI and placement

Replaces the custom dark mode toggle switch in the footer with a Font Awesome icon button in the navbar. Updates CSS to use icon-based toggle and adjusts JavaScript to set the icon state based on the current mode.
---
 custom/templates/DefaultRevamp/css/custom.css | 42 ++++---------------
 custom/templates/DefaultRevamp/footer.tpl     | 22 +++-------
 custom/templates/DefaultRevamp/navbar.tpl     |  1 +
 3 files changed, 16 insertions(+), 49 deletions(-)

diff --git a/custom/templates/DefaultRevamp/css/custom.css b/custom/templates/DefaultRevamp/css/custom.css
index 742e30c1cc..d5e7bfa958 100755
--- a/custom/templates/DefaultRevamp/css/custom.css
+++ b/custom/templates/DefaultRevamp/css/custom.css
@@ -1062,45 +1062,21 @@ select {
     display: inline-block;
 }
 
-.darkmode-toggle {
-    opacity: 0;
-    position: absolute;
-}
-
-.darkmode-toggle:checked+.darkmode-toggle-label .darkmode-ball {
-    transform: translateX(24px);
-}
-
-.darkmode-toggle-label {
-    background-color: #111;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    border-radius: 50px;
-    position: relative;
-    padding: 5px;
-    height: 26px;
-    width: 50px;
-    cursor: pointer;
-}
-
-.darkmode-ball {
-    background-color: #fff;
-    border-radius: 50%;
-    position: absolute;
-    top: 2px;
-    left: 2px;
-    height: 22px;
-    width: 22px;
-    transition: transform 0.2s linear;
+#toggle-dark-mode {
+    width: 33px;
+    height: 33px;
 }
 
-.fa-moon {
+#toggle-dark-mode[data-mode="dark"]::after {
+    content: "\f186";
     color: #f1c400;
+    font-family: "Font Awesome 5 Free";
 }
 
-.fa-sun {
+#toggle-dark-mode[data-mode="light"]::after {
+    content: "\f185";
     color: #f39c00;
+    font-family: "Font Awesome 5 Free";
 }
 
 /*
diff --git a/custom/templates/DefaultRevamp/footer.tpl b/custom/templates/DefaultRevamp/footer.tpl
index 58cf73ec68..c9a668e746 100755
--- a/custom/templates/DefaultRevamp/footer.tpl
+++ b/custom/templates/DefaultRevamp/footer.tpl
@@ -17,22 +17,6 @@
                     {if $PAGE_LOAD_TIME}
                     <span class="item" id="page_load"></span>
                     {/if}
-                    <span class="item" id="darkmode">
-                        <input type="checkbox" class="darkmode-toggle" id="darkmode-toggle" onclick="toggleDarkLightMode()">
-                        <label for="darkmode-toggle" class="darkmode-toggle-label">
-                            <i class="fas fa-moon"></i>
-                            <i class="fas fa-sun"></i>
-                            <div class="darkmode-ball"></div>
-                        </label>
-
-                        <script type="text/javascript">
-                            if (document.body.classList.contains('dark')) {
-                                document.getElementById("darkmode-toggle").checked = true;
-                            } else {
-                                document.getElementById("darkmode-toggle").checked = false;
-                            }
-                        </script>
-                    </span>
                     {if isset($AUTO_LANGUAGE)}
                         <a class="item" href="javascript:" onclick="toggleAutoLanguage()" id="auto-language"></a>
                     {/if}
@@ -109,6 +93,12 @@
         return false;
     }
 
+    if (document.body.classList.contains('dark')) {
+        document.getElementById("toggle-dark-mode").setAttribute("data-mode", "dark");
+    } else {
+        document.getElementById("toggle-dark-mode").setAttribute("data-mode", "light");
+    }
+
     {if isset($AUTO_LANGUAGE)}
         const autoLanguage = document.getElementById('auto-language');
         const autoLanguageValue = $.cookie('auto_language') ?? 'true';
diff --git a/custom/templates/DefaultRevamp/navbar.tpl b/custom/templates/DefaultRevamp/navbar.tpl
index 8f238ff016..1bffcdfd6d 100755
--- a/custom/templates/DefaultRevamp/navbar.tpl
+++ b/custom/templates/DefaultRevamp/navbar.tpl
@@ -97,6 +97,7 @@
                     {/if}
                     {/if}
                     {/foreach}
+                    <a class="ui small default icon button" id="toggle-dark-mode" data-mode="dark" onclick="toggleDarkLightMode()"></a>
                 </div>
             </div>
         </div>