✨ Allow appearance switcher to be placed in menus

layouts/partials/footer.html

@@ -1,4 +1,3 @@
-{{ $searchCount := 0 }}
 <footer class="py-10 print:hidden">
   {{/* Footer menu */}}
   {{ if .Site.Menus.footer }}
@@ -9,10 +8,10 @@
             class="mb-1 group ltr:text-right rtl:text-left sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"
           >
             {{ if eq .Params.action "search" }}
-              {{ $searchCount = add $searchCount 1 }}
+              {{ $.Scratch.Add "searchCount" 1 }}
               {{ if $.Site.Params.enableSearch | default false }}
                 <button
-                  id="search-button-f{{ $searchCount }}"
+                  id="search-button-{{ $.Scratch.Get "searchCount" }}"
                   title="{{ .Title | default (i18n "search.open_button_title") }}"
                 >
                   {{ with .Params.icon }}
@@ -29,6 +28,26 @@
                   {{ end }}
                 </button>
               {{ end }}
+            {{ else if eq .Params.action "appearance" }}
+              {{ $.Scratch.Add "switchCount" 1 }}
+              <button
+                id="appearance-switcher-{{ $.Scratch.Get "switchCount" }}"
+                type="button"
+                aria-label="appearance switcher"
+              >
+                <span
+                  class="inline transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600 dark:hidden"
+                  title="{{ i18n "footer.dark_appearance" }}"
+                >
+                  {{ partial "icon.html" "moon" }}
+                </span>
+                <span
+                  class="hidden transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600 dark:inline"
+                  title="{{ i18n "footer.light_appearance" }}"
+                >
+                  {{ partial "icon.html" "sun" }}
+                </span>
+              </button>
             {{ else }}
               <a
                 href="{{ .URL }}"
@@ -78,14 +97,14 @@
         </p>
       {{ end }}
     </div>
-    {{/* Appearance switch */}}
+    {{/* Appearance switcher */}}
     {{ if .Site.Params.footer.showAppearanceSwitcher | default false }}
       <div
         class="{{ if .Site.Params.footer.showScrollToTop | default true -}}
           ltr:mr-14 rtl:ml-14
         {{- end }} cursor-pointer text-sm text-neutral-700 hover:text-primary-600 dark:text-neutral dark:hover:text-primary-400"
       >
-        <button id="appearance-switcher" type="button" aria-label="appearance switcher">
+        <button id="appearance-switcher-0" type="button" aria-label="appearance switcher">
           <div
             class="flex items-center justify-center w-12 h-12 dark:hidden"
             title="{{ i18n "footer.dark_appearance" }}"