From c0524a0021aeeffc3ac6a3cc98d54cc6f1035b09 Mon Sep 17 00:00:00 2001
From: PixelRobots <22979170+PixelRobots@users.noreply.github.com>
Date: Sun, 6 Oct 2024 14:14:21 +0100
Subject: [PATCH 01/13] Add dark mode button to header

Signed-off-by: PixelRobots <22979170+PixelRobots@users.noreply.github.com>
---
 docs/_includes/header.html | 12 ++++++++++++
 1 file changed, 12 insertions(+)
 create mode 100644 docs/_includes/header.html

diff --git a/docs/_includes/header.html b/docs/_includes/header.html
new file mode 100644
index 0000000..c062f0e
--- /dev/null
+++ b/docs/_includes/header.html
@@ -0,0 +1,12 @@
+<nav class="navbar">
+    <ul>
+      {{ site.nav_external_links | join: '' | markdownify }}
+      {{ site.aux_links | join: '' | markdownify }}
+      
+      <!-- Insert the dark mode button here -->
+      <li>
+        <button class="btn js-toggle-dark-mode" style="color: #11a9bb; padding: 5px;">☾ dark</button>
+      </li>
+    </ul>
+  </nav>
+  
\ No newline at end of file

From d51505e843bbae2d1eaf0ba537e6b30a2cbc583f Mon Sep 17 00:00:00 2001
From: PixelRobots <22979170+PixelRobots@users.noreply.github.com>
Date: Sun, 6 Oct 2024 14:16:59 +0100
Subject: [PATCH 02/13] Add dark mode button to header

Signed-off-by: PixelRobots <22979170+PixelRobots@users.noreply.github.com>
---
 docs/_includes/{header.html => header_custom.html} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename docs/_includes/{header.html => header_custom.html} (100%)

diff --git a/docs/_includes/header.html b/docs/_includes/header_custom.html
similarity index 100%
rename from docs/_includes/header.html
rename to docs/_includes/header_custom.html

From 98810ee72ff1ac9ba8df50aec679f450e8e2bcd9 Mon Sep 17 00:00:00 2001
From: PixelRobots <22979170+PixelRobots@users.noreply.github.com>
Date: Sun, 6 Oct 2024 14:19:27 +0100
Subject: [PATCH 03/13] Add dark mode toggle button to header

Signed-off-by: PixelRobots <22979170+PixelRobots@users.noreply.github.com>
---
 docs/_includes/header_custom.html | 42 ++++++++++++++++++++++---------
 1 file changed, 30 insertions(+), 12 deletions(-)

diff --git a/docs/_includes/header_custom.html b/docs/_includes/header_custom.html
index c062f0e..c06f212 100644
--- a/docs/_includes/header_custom.html
+++ b/docs/_includes/header_custom.html
@@ -1,12 +1,30 @@
-<nav class="navbar">
-    <ul>
-      {{ site.nav_external_links | join: '' | markdownify }}
-      {{ site.aux_links | join: '' | markdownify }}
-      
-      <!-- Insert the dark mode button here -->
-      <li>
-        <button class="btn js-toggle-dark-mode" style="color: #11a9bb; padding: 5px;">☾ dark</button>
-      </li>
-    </ul>
-  </nav>
-  
\ No newline at end of file
+<!-- Custom Header Content -->
+<button class="btn js-toggle-dark-mode" style="color: #11a9bb; padding: 5px; margin-left: 15px;">☾ dark</button>
+
+<script>
+    const btnToggle = document.querySelector('.js-toggle-dark-mode');
+
+    if (localStorage.getItem('theme') === 'dark') {
+        jtd.setTheme('dark');
+        btnToggle.textContent = '☼ light';
+    } else {
+        jtd.setTheme('light');
+        btnToggle.textContent = '☾ dark';
+    }
+</script>
+
+<script>
+    const toggleDarkMode = document.querySelector('.js-toggle-dark-mode');
+
+    jtd.addEvent(toggleDarkMode, 'click', function () {
+        if (jtd.getTheme() === 'dark') {
+            jtd.setTheme('light');
+            toggleDarkMode.textContent = '☾ dark';
+            localStorage.setItem('theme', 'light');
+        } else {
+            jtd.setTheme('dark');
+            toggleDarkMode.textContent = '☼ light';
+            localStorage.setItem('theme', 'dark');
+        }
+    });
+</script>

From b0dba76249a392a3fe85856dba0b010f72554c23 Mon Sep 17 00:00:00 2001
From: PixelRobots <22979170+PixelRobots@users.noreply.github.com>
Date: Sun, 6 Oct 2024 14:22:21 +0100
Subject: [PATCH 04/13] Refactor dark mode toggle button styling

Signed-off-by: PixelRobots <22979170+PixelRobots@users.noreply.github.com>
---
 docs/_includes/header_custom.html | 14 +++++++-------
 docs/_sass/custom/custom.scss     | 13 ++++++++++++-
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/docs/_includes/header_custom.html b/docs/_includes/header_custom.html
index c06f212..36082d7 100644
--- a/docs/_includes/header_custom.html
+++ b/docs/_includes/header_custom.html
@@ -2,8 +2,10 @@
 <button class="btn js-toggle-dark-mode" style="color: #11a9bb; padding: 5px; margin-left: 15px;">☾ dark</button>
 
 <script>
+document.addEventListener("DOMContentLoaded", function() {
     const btnToggle = document.querySelector('.js-toggle-dark-mode');
 
+    // Set initial theme based on localStorage
     if (localStorage.getItem('theme') === 'dark') {
         jtd.setTheme('dark');
         btnToggle.textContent = '☼ light';
@@ -11,20 +13,18 @@
         jtd.setTheme('light');
         btnToggle.textContent = '☾ dark';
     }
-</script>
-
-<script>
-    const toggleDarkMode = document.querySelector('.js-toggle-dark-mode');
 
-    jtd.addEvent(toggleDarkMode, 'click', function () {
+    // Add click event listener for toggling theme
+    btnToggle.addEventListener('click', function () {
         if (jtd.getTheme() === 'dark') {
             jtd.setTheme('light');
-            toggleDarkMode.textContent = '☾ dark';
+            btnToggle.textContent = '☾ dark';
             localStorage.setItem('theme', 'light');
         } else {
             jtd.setTheme('dark');
-            toggleDarkMode.textContent = '☼ light';
+            btnToggle.textContent = '☼ light';
             localStorage.setItem('theme', 'dark');
         }
     });
+});
 </script>
diff --git a/docs/_sass/custom/custom.scss b/docs/_sass/custom/custom.scss
index 08c618f..f0cf7a1 100644
--- a/docs/_sass/custom/custom.scss
+++ b/docs/_sass/custom/custom.scss
@@ -58,4 +58,15 @@ button.js-toggle-dark-mode {
     outline: 2px solid #007b9a; /* Darker outline when actively clicked */
     background-color: rgba(17, 169, 187, 0.3); /* Darker background when clicked */
     color: #007b9a; /* Darker text when clicked */
-  }
\ No newline at end of file
+  }
+
+  .js-toggle-dark-mode {
+    background: none;
+    border: none;
+    cursor: pointer;
+    font-size: 16px; /* Adjust font size */
+    padding: 5px 10px; /* Reduce padding */
+    margin-left: 15px; /* Space between button and other elements */
+    color: #11a9bb;
+    vertical-align: middle; /* Align button with text */
+}
\ No newline at end of file

From 49173860b3ab785ad5b8af4440c206a9499294b6 Mon Sep 17 00:00:00 2001
From: PixelRobots <22979170+PixelRobots@users.noreply.github.com>
Date: Sun, 6 Oct 2024 14:49:12 +0100
Subject: [PATCH 05/13] Refactor dark mode toggle button styling and add dark
 mode toggle button to header

Signed-off-by: PixelRobots <22979170+PixelRobots@users.noreply.github.com>
---
 docs/_includes/header_custom.html | 47 +++++++++++++++++--------------
 1 file changed, 26 insertions(+), 21 deletions(-)

diff --git a/docs/_includes/header_custom.html b/docs/_includes/header_custom.html
index 36082d7..e53cbbf 100644
--- a/docs/_includes/header_custom.html
+++ b/docs/_includes/header_custom.html
@@ -1,30 +1,35 @@
 <!-- Custom Header Content -->
-<button class="btn js-toggle-dark-mode" style="color: #11a9bb; padding: 5px; margin-left: 15px;">☾ dark</button>
+<button class="btn js-toggle-dark-mode-header" style="color: #11a9bb; padding: 5px; margin-left: 15px;">☾ dark</button>
 
 <script>
 document.addEventListener("DOMContentLoaded", function() {
-    const btnToggle = document.querySelector('.js-toggle-dark-mode');
+    const headerBtnToggle = document.querySelector('.js-toggle-dark-mode-header');
 
-    // Set initial theme based on localStorage
-    if (localStorage.getItem('theme') === 'dark') {
-        jtd.setTheme('dark');
-        btnToggle.textContent = '☼ light';
-    } else {
-        jtd.setTheme('light');
-        btnToggle.textContent = '☾ dark';
-    }
-
-    // Add click event listener for toggling theme
-    btnToggle.addEventListener('click', function () {
-        if (jtd.getTheme() === 'dark') {
-            jtd.setTheme('light');
-            btnToggle.textContent = '☾ dark';
-            localStorage.setItem('theme', 'light');
-        } else {
+    // Ensure the button is found before trying to set its behavior
+    if (headerBtnToggle) {
+        // Set initial theme based on localStorage
+        if (localStorage.getItem('theme') === 'dark') {
             jtd.setTheme('dark');
-            btnToggle.textContent = '☼ light';
-            localStorage.setItem('theme', 'dark');
+            headerBtnToggle.textContent = '☼ light';
+        } else {
+            jtd.setTheme('light');
+            headerBtnToggle.textContent = '☾ dark';
         }
-    });
+
+        // Add click event listener for toggling theme
+        headerBtnToggle.addEventListener('click', function () {
+            if (jtd.getTheme() === 'dark') {
+                jtd.setTheme('light');
+                headerBtnToggle.textContent = '☾ dark';
+                localStorage.setItem('theme', 'light');
+            } else {
+                jtd.setTheme('dark');
+                headerBtnToggle.textContent = '☼ light';
+                localStorage.setItem('theme', 'dark');
+            }
+        });
+    } else {
+        console.error("Header dark mode button not found.");
+    }
 });
 </script>

From 92c2d5a1ecfc49217c5997ba3c205a035d9a61f8 Mon Sep 17 00:00:00 2001
From: PixelRobots <22979170+PixelRobots@users.noreply.github.com>
Date: Sun, 6 Oct 2024 14:51:40 +0100
Subject: [PATCH 06/13] Refactor dark mode toggle button styling and add dark
 mode toggle button to header

Signed-off-by: PixelRobots <22979170+PixelRobots@users.noreply.github.com>
---
 docs/_includes/head_custom.html   | 27 +++++++++++++++++++++++++
 docs/_includes/header_custom.html | 33 -------------------------------
 2 files changed, 27 insertions(+), 33 deletions(-)
 create mode 100644 docs/_includes/head_custom.html

diff --git a/docs/_includes/head_custom.html b/docs/_includes/head_custom.html
new file mode 100644
index 0000000..a1c9877
--- /dev/null
+++ b/docs/_includes/head_custom.html
@@ -0,0 +1,27 @@
+<script>
+    document.addEventListener("DOMContentLoaded", function() {
+        const headerBtnToggle = document.querySelector('.js-toggle-dark-mode-header');
+    
+        function updateTheme(theme) {
+            if (headerBtnToggle) {
+                headerBtnToggle.textContent = theme === 'dark' ? '☼ light' : '☾ dark';
+            }
+        }
+    
+        // Set initial theme based on localStorage
+        const currentTheme = localStorage.getItem('theme') === 'dark' ? 'dark' : 'light';
+        jtd.setTheme(currentTheme);
+        updateTheme(currentTheme);
+    
+        // Add click event listener for toggling theme
+        if (headerBtnToggle) {
+            headerBtnToggle.addEventListener('click', function() {
+                const newTheme = jtd.getTheme() === 'dark' ? 'light' : 'dark';
+                jtd.setTheme(newTheme);
+                updateTheme(newTheme);
+                localStorage.setItem('theme', newTheme);
+            });
+        }
+    });
+    </script>
+    
\ No newline at end of file
diff --git a/docs/_includes/header_custom.html b/docs/_includes/header_custom.html
index e53cbbf..c8d708c 100644
--- a/docs/_includes/header_custom.html
+++ b/docs/_includes/header_custom.html
@@ -1,35 +1,2 @@
 <!-- Custom Header Content -->
 <button class="btn js-toggle-dark-mode-header" style="color: #11a9bb; padding: 5px; margin-left: 15px;">☾ dark</button>
-
-<script>
-document.addEventListener("DOMContentLoaded", function() {
-    const headerBtnToggle = document.querySelector('.js-toggle-dark-mode-header');
-
-    // Ensure the button is found before trying to set its behavior
-    if (headerBtnToggle) {
-        // Set initial theme based on localStorage
-        if (localStorage.getItem('theme') === 'dark') {
-            jtd.setTheme('dark');
-            headerBtnToggle.textContent = '☼ light';
-        } else {
-            jtd.setTheme('light');
-            headerBtnToggle.textContent = '☾ dark';
-        }
-
-        // Add click event listener for toggling theme
-        headerBtnToggle.addEventListener('click', function () {
-            if (jtd.getTheme() === 'dark') {
-                jtd.setTheme('light');
-                headerBtnToggle.textContent = '☾ dark';
-                localStorage.setItem('theme', 'light');
-            } else {
-                jtd.setTheme('dark');
-                headerBtnToggle.textContent = '☼ light';
-                localStorage.setItem('theme', 'dark');
-            }
-        });
-    } else {
-        console.error("Header dark mode button not found.");
-    }
-});
-</script>

From 9b62934bce2b242a240dae34b65854b6ab1aeea1 Mon Sep 17 00:00:00 2001
From: PixelRobots <22979170+PixelRobots@users.noreply.github.com>
Date: Sun, 6 Oct 2024 14:58:36 +0100
Subject: [PATCH 07/13] Refactor dark mode toggle button styling and remove
 duplicate button in header

Signed-off-by: PixelRobots <22979170+PixelRobots@users.noreply.github.com>
---
 docs/_includes/head_custom.html       | 27 ---------------------------
 docs/_includes/header_custom.html     |  2 --
 docs/_includes/nav_footer_custom.html |  2 +-
 3 files changed, 1 insertion(+), 30 deletions(-)
 delete mode 100644 docs/_includes/head_custom.html
 delete mode 100644 docs/_includes/header_custom.html

diff --git a/docs/_includes/head_custom.html b/docs/_includes/head_custom.html
deleted file mode 100644
index a1c9877..0000000
--- a/docs/_includes/head_custom.html
+++ /dev/null
@@ -1,27 +0,0 @@
-<script>
-    document.addEventListener("DOMContentLoaded", function() {
-        const headerBtnToggle = document.querySelector('.js-toggle-dark-mode-header');
-    
-        function updateTheme(theme) {
-            if (headerBtnToggle) {
-                headerBtnToggle.textContent = theme === 'dark' ? '☼ light' : '☾ dark';
-            }
-        }
-    
-        // Set initial theme based on localStorage
-        const currentTheme = localStorage.getItem('theme') === 'dark' ? 'dark' : 'light';
-        jtd.setTheme(currentTheme);
-        updateTheme(currentTheme);
-    
-        // Add click event listener for toggling theme
-        if (headerBtnToggle) {
-            headerBtnToggle.addEventListener('click', function() {
-                const newTheme = jtd.getTheme() === 'dark' ? 'light' : 'dark';
-                jtd.setTheme(newTheme);
-                updateTheme(newTheme);
-                localStorage.setItem('theme', newTheme);
-            });
-        }
-    });
-    </script>
-    
\ No newline at end of file
diff --git a/docs/_includes/header_custom.html b/docs/_includes/header_custom.html
deleted file mode 100644
index c8d708c..0000000
--- a/docs/_includes/header_custom.html
+++ /dev/null
@@ -1,2 +0,0 @@
-<!-- Custom Header Content -->
-<button class="btn js-toggle-dark-mode-header" style="color: #11a9bb; padding: 5px; margin-left: 15px;">☾ dark</button>
diff --git a/docs/_includes/nav_footer_custom.html b/docs/_includes/nav_footer_custom.html
index 39f3dc7..f3728da 100644
--- a/docs/_includes/nav_footer_custom.html
+++ b/docs/_includes/nav_footer_custom.html
@@ -1,4 +1,4 @@
-<button class="btn js-toggle-dark-mode" style="position: fixed; bottom: 20px; left: 20px; padding: 10px; color: #11a9bb">☾ dark</button>
+<button class="btn js-toggle-dark-mode" color: #11a9bb">☾ dark</button>
 
 <script>
     const btnToggle = document.querySelector('.js-toggle-dark-mode');

From 189bdabd939ff44f9dfc19e46c55ab13f16c828a Mon Sep 17 00:00:00 2001
From: PixelRobots <22979170+PixelRobots@users.noreply.github.com>
Date: Sun, 6 Oct 2024 15:02:42 +0100
Subject: [PATCH 08/13] Refactor dark mode toggle button styling and add
 padding and remove border in nav_footer_custom.html

Signed-off-by: PixelRobots <22979170+PixelRobots@users.noreply.github.com>
---
 docs/_includes/nav_footer_custom.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/_includes/nav_footer_custom.html b/docs/_includes/nav_footer_custom.html
index f3728da..2e12a95 100644
--- a/docs/_includes/nav_footer_custom.html
+++ b/docs/_includes/nav_footer_custom.html
@@ -1,4 +1,4 @@
-<button class="btn js-toggle-dark-mode" color: #11a9bb">☾ dark</button>
+<button class="btn js-toggle-dark-mode" style="color: #11a9bb; padding: 5px; border: none; background: none;">☾ dark</button>
 
 <script>
     const btnToggle = document.querySelector('.js-toggle-dark-mode');

From cb24bfaf5fd32b308441ab2c963ef7f2351b3f4c Mon Sep 17 00:00:00 2001
From: PixelRobots <22979170+PixelRobots@users.noreply.github.com>
Date: Sun, 6 Oct 2024 15:04:12 +0100
Subject: [PATCH 09/13] Refactor PR bot welcome message to include a new line
 before the team name

Signed-off-by: PixelRobots <22979170+PixelRobots@users.noreply.github.com>
---
 .github/workflows/pr-bot-welcome.yaml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/pr-bot-welcome.yaml b/.github/workflows/pr-bot-welcome.yaml
index 2a83930..325ef57 100644
--- a/.github/workflows/pr-bot-welcome.yaml
+++ b/.github/workflows/pr-bot-welcome.yaml
@@ -24,5 +24,5 @@ jobs:
               owner: context.repo.owner,
               repo: context.repo.repo,
               issue_number: ${{ github.event.number }},
-              body: 'Thank you for your contribution! 🙏 We will review your PR as soon as possible.\n The KubeTidy team'
+              body: 'Thank you for your contribution! 🙏 We will review your PR as soon as possible.\n\n ## The KubeTidy team'
             });
\ No newline at end of file

From fe05bafc0b3cc93369927624dfa84dbaa8c45238 Mon Sep 17 00:00:00 2001
From: PixelRobots <22979170+PixelRobots@users.noreply.github.com>
Date: Sun, 6 Oct 2024 15:07:28 +0100
Subject: [PATCH 10/13] Refactor dark mode toggle button styling and remove
 duplicate button in header

Signed-off-by: PixelRobots <22979170+PixelRobots@users.noreply.github.com>
---
 docs/_includes/nav_footer_custom.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/_includes/nav_footer_custom.html b/docs/_includes/nav_footer_custom.html
index 2e12a95..d3b7b65 100644
--- a/docs/_includes/nav_footer_custom.html
+++ b/docs/_includes/nav_footer_custom.html
@@ -26,4 +26,4 @@
             localStorage.setItem('theme', 'dark');
         }
     });
-</script>
+</script>
\ No newline at end of file

From 14eba0856e28db4e9663717d82a5b57dd52c27a7 Mon Sep 17 00:00:00 2001
From: PixelRobots <22979170+PixelRobots@users.noreply.github.com>
Date: Sun, 6 Oct 2024 15:11:31 +0100
Subject: [PATCH 11/13] Refactor dark mode toggle button styling and add
 padding and fix position in nav_footer_custom.html

Signed-off-by: PixelRobots <22979170+PixelRobots@users.noreply.github.com>
---
 docs/_includes/nav_footer_custom.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/_includes/nav_footer_custom.html b/docs/_includes/nav_footer_custom.html
index d3b7b65..39f3dc7 100644
--- a/docs/_includes/nav_footer_custom.html
+++ b/docs/_includes/nav_footer_custom.html
@@ -1,4 +1,4 @@
-<button class="btn js-toggle-dark-mode" style="color: #11a9bb; padding: 5px; border: none; background: none;">☾ dark</button>
+<button class="btn js-toggle-dark-mode" style="position: fixed; bottom: 20px; left: 20px; padding: 10px; color: #11a9bb">☾ dark</button>
 
 <script>
     const btnToggle = document.querySelector('.js-toggle-dark-mode');
@@ -26,4 +26,4 @@
             localStorage.setItem('theme', 'dark');
         }
     });
-</script>
\ No newline at end of file
+</script>

From a478081fc542c3f1ed5c4d4a57dc6c99d476cd4a Mon Sep 17 00:00:00 2001
From: PixelRobots <22979170+PixelRobots@users.noreply.github.com>
Date: Sun, 6 Oct 2024 15:25:20 +0100
Subject: [PATCH 12/13] Refactor dark mode toggle button styling and adjust
 position in nav_footer_custom.html

Signed-off-by: PixelRobots <22979170+PixelRobots@users.noreply.github.com>
---
 docs/_includes/nav_footer_custom.html | 50 ++++++++++++++++++++++-----
 docs/_sass/custom/custom.scss         | 24 ++++++++-----
 2 files changed, 57 insertions(+), 17 deletions(-)

diff --git a/docs/_includes/nav_footer_custom.html b/docs/_includes/nav_footer_custom.html
index 39f3dc7..5a11f40 100644
--- a/docs/_includes/nav_footer_custom.html
+++ b/docs/_includes/nav_footer_custom.html
@@ -1,8 +1,28 @@
-<button class="btn js-toggle-dark-mode" style="position: fixed; bottom: 20px; left: 20px; padding: 10px; color: #11a9bb">☾ dark</button>
+<button class="btn js-toggle-dark-mode" style="position: fixed; bottom: 20px; left: 15%; padding: 10px; color: #11a9bb">☾ dark</button>
+
+<style>
+/* Default for desktop */
+.btn.js-toggle-dark-mode {
+    position: fixed;
+    bottom: 20px;
+    left: 15%;
+    padding: 10px;
+    color: #11a9bb;
+}
+
+/* For mobile devices */
+@media (max-width: 768px) {
+    .btn.js-toggle-dark-mode {
+        bottom: 10px;
+        left: 5%;
+    }
+}
+</style>
 
 <script>
     const btnToggle = document.querySelector('.js-toggle-dark-mode');
 
+    // Set theme based on localStorage
     if (localStorage.getItem('theme') === 'dark') {
         jtd.setTheme('dark');
         btnToggle.textContent = '☼ light';
@@ -10,20 +30,34 @@
         jtd.setTheme('light');
         btnToggle.textContent = '☾ dark';
     }
-</script>
 
-<script>
-    const toggleDarkMode = document.querySelector('.js-toggle-dark-mode');
-
-    jtd.addEvent(toggleDarkMode, 'click', function () {
+    // Add event listener to toggle dark mode
+    jtd.addEvent(btnToggle, 'click', function () {
         if (jtd.getTheme() === 'dark') {
             jtd.setTheme('light');
-            toggleDarkMode.textContent = '☾ dark';
+            btnToggle.textContent = '☾ dark';
             localStorage.setItem('theme', 'light');
         } else {
             jtd.setTheme('dark');
-            toggleDarkMode.textContent = '☼ light';
+            btnToggle.textContent = '☼ light';
             localStorage.setItem('theme', 'dark');
         }
     });
+
+    // Hide on scroll functionality
+    let lastScrollTop = 0;
+
+    window.addEventListener('scroll', function() {
+        let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+
+        if (scrollTop > lastScrollTop) {
+            // User is scrolling down
+            btnToggle.style.display = 'none';
+        } else {
+            // User is scrolling up
+            btnToggle.style.display = 'block';
+        }
+
+        lastScrollTop = scrollTop <= 0 ? 0 : scrollTop; // For mobile or negative scroll (bounce)
+    });
 </script>
diff --git a/docs/_sass/custom/custom.scss b/docs/_sass/custom/custom.scss
index f0cf7a1..3b1159d 100644
--- a/docs/_sass/custom/custom.scss
+++ b/docs/_sass/custom/custom.scss
@@ -60,13 +60,19 @@ button.js-toggle-dark-mode {
     color: #007b9a; /* Darker text when clicked */
   }
 
-  .js-toggle-dark-mode {
-    background: none;
-    border: none;
-    cursor: pointer;
-    font-size: 16px; /* Adjust font size */
-    padding: 5px 10px; /* Reduce padding */
-    margin-left: 15px; /* Space between button and other elements */
+/* Default for desktop */
+.btn.js-toggle-dark-mode {
+    position: fixed;
+    bottom: 20px;
+    left: 15%;
+    padding: 10px;
     color: #11a9bb;
-    vertical-align: middle; /* Align button with text */
-}
\ No newline at end of file
+}
+
+/* For mobile devices */
+@media (max-width: 768px) {
+    .btn.js-toggle-dark-mode {
+        bottom: 10px;
+        left: 5%;
+    }
+}

From 7f594484665b9e10ae78ecd82ef0d6ef7595c02e Mon Sep 17 00:00:00 2001
From: PixelRobots <22979170+PixelRobots@users.noreply.github.com>
Date: Sun, 6 Oct 2024 15:27:55 +0100
Subject: [PATCH 13/13] Refactor dark mode toggle button styling and adjust
 position in nav_footer_custom.html

Signed-off-by: PixelRobots <22979170+PixelRobots@users.noreply.github.com>
---
 docs/_includes/nav_footer_custom.html | 21 +--------------------
 docs/_sass/custom/custom.scss         | 17 -----------------
 2 files changed, 1 insertion(+), 37 deletions(-)

diff --git a/docs/_includes/nav_footer_custom.html b/docs/_includes/nav_footer_custom.html
index 5a11f40..d7cf79b 100644
--- a/docs/_includes/nav_footer_custom.html
+++ b/docs/_includes/nav_footer_custom.html
@@ -1,23 +1,4 @@
-<button class="btn js-toggle-dark-mode" style="position: fixed; bottom: 20px; left: 15%; padding: 10px; color: #11a9bb">☾ dark</button>
-
-<style>
-/* Default for desktop */
-.btn.js-toggle-dark-mode {
-    position: fixed;
-    bottom: 20px;
-    left: 15%;
-    padding: 10px;
-    color: #11a9bb;
-}
-
-/* For mobile devices */
-@media (max-width: 768px) {
-    .btn.js-toggle-dark-mode {
-        bottom: 10px;
-        left: 5%;
-    }
-}
-</style>
+<button class="btn js-toggle-dark-mode" style="position: fixed; bottom: 20px; left: 20px; padding: 10px; color: #11a9bb">☾ dark</button>
 
 <script>
     const btnToggle = document.querySelector('.js-toggle-dark-mode');
diff --git a/docs/_sass/custom/custom.scss b/docs/_sass/custom/custom.scss
index 3b1159d..387ecb8 100644
--- a/docs/_sass/custom/custom.scss
+++ b/docs/_sass/custom/custom.scss
@@ -59,20 +59,3 @@ button.js-toggle-dark-mode {
     background-color: rgba(17, 169, 187, 0.3); /* Darker background when clicked */
     color: #007b9a; /* Darker text when clicked */
   }
-
-/* Default for desktop */
-.btn.js-toggle-dark-mode {
-    position: fixed;
-    bottom: 20px;
-    left: 15%;
-    padding: 10px;
-    color: #11a9bb;
-}
-
-/* For mobile devices */
-@media (max-width: 768px) {
-    .btn.js-toggle-dark-mode {
-        bottom: 10px;
-        left: 5%;
-    }
-}