site: move theme switch to footer

Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>

hugo_stats.json

@@ -41,6 +41,7 @@
       "Docker-Compose",
       "Docker-Desktop",
       "Docker-Hub",
+      "Docker-Scout-Dashboard",
       "Download",
       "Editor-or-IDE",
       "Entra-ID",
@@ -86,6 +87,7 @@
       "Node",
       "Non-compliant",
       "Okta",
+      "Okta-SAML",
       "Old-Dockerfile",
       "PHP",
       "PowerShell",
@@ -479,7 +481,6 @@
       "space-y-4",
       "sticky",
       "svg-container",
-      "svg-icon",
       "syntax-light",
       "systemd-networkd",
       "text-2xl",

layouts/partials/footer.html

@@ -62,10 +62,33 @@
           >Legal</a>
       </div>
     </div>
-    <div>
+    <div class="flex justify-between items-center">
       <button type="button" id="ot-sdk-btn" class="ot-sdk-show-settings">
         Cookies Settings
       </button>
+      <div class="flex items-center gap-2">
+        <span>Theme:</span>
+        <button
+          aria-label="Theme switch"
+          id="theme-switch"
+          class="rounded bg-blue-light px-4 py-1 text-white transition
+          hover:bg-blue-light-400 dark:bg-blue-dark-400
+          dark:hover:bg-blue-dark"
+          x-data="{ theme: localStorage.getItem('theme-preference') }"
+          x-init="$watch('theme', value => {
+                localStorage.setItem('theme-preference', value);
+                document.firstElementChild.className = value;
+              })"
+          @click="theme = (theme === 'dark' ? 'light' : 'dark')"
+        >
+          <span class="icon-svg icon-sm dark:hidden"
+            >Light {{ partialCached "icon" "light_mode" "light_mode" }}</span
+          >
+          <span class="icon-svg icon-sm hidden dark:block"
+            >Dark {{ partialCached "icon" "dark_mode" "dark_mode" }}</span
+          >
+        </button>
+      </div>
     </div>
   </div>
 </div>

layouts/partials/header.html

@@ -37,15 +37,6 @@
         <span>Ask&nbsp;AI</span>
         <img src="{{ (resources.Get "images/ai-stars.svg").Permalink }}" alt="AI Stars" />
       </button>
-      <button aria-label="Theme switch" id="theme-switch" class="svg-icon"
-        x-data="{ theme: localStorage.getItem('theme-preference') }" x-init="$watch('theme', value => {
-        localStorage.setItem('theme-preference', value);
-        document.firstElementChild.className = value;
-      })" @click="theme = (theme === 'dark' ? 'light' : 'dark')">
-        <span class="icon-svg dark:hidden">{{ partialCached "icon" "light_mode" "light_mode"}}</span>
-        <span class="icon-svg hidden dark:block">{{ partialCached "icon" "dark_mode" "dark_mode"}}</span>
-      </button>
     </div>
   </div>
-
 </header>