🐛 Fix appearance switcher title when switching

Fixes #235

CHANGELOG.md

@@ -20,6 +20,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### Fixed
 
+- Appearance switcher title doesn't update when switching appearance ([#235](https://github.com/jpanther/congo/issues/235))
 - Article updated date logic doesn't consider formatted date values ([#259](https://github.com/jpanther/congo/issues/259))
 
 ## [2.3.1] - 2022-07-30

assets/css/compiled/main.css

@@ -2894,8 +2894,8 @@ body:has(#menu-controller:checked) {
   background-color: rgba(var(--color-secondary-400), 1);
 }
 
-.dark .dark\:inline {
+.dark .dark\:flex {
-  display: inline;
+  display: flex;
 }
 
 .dark .dark\:hidden {

layouts/partials/footer.html

@@ -46,18 +46,23 @@
     {{/* Appearance switch */}}
     {{ if .Site.Params.footer.showAppearanceSwitcher | default false }}
       <div
-        class="text-sm cursor-pointer text-neutral-700 dark:text-neutral hover:text-primary-600 dark:hover:text-primary-400 {{ if .Site.Params.footer.showScrollToTop | default true -}}
+        class="{{ if .Site.Params.footer.showScrollToTop | default true -}}
           ltr:mr-14 rtl:ml-14
-        {{- end }}"
+        {{- end }} cursor-pointer text-sm text-neutral-700 hover:text-primary-600 dark:text-neutral dark:hover:text-primary-400"
       >
-        <button
+        <button id="appearance-switcher" type="button">
-          id="appearance-switcher"
+          <div
-          class="w-12 h-12 "
+            class="flex items-center justify-center w-12 h-12 dark:hidden"
-          type="button"
             title="{{ i18n "footer.dark_appearance" }}"
           >
-          <span class="inline dark:hidden">{{ partial "icon.html" "moon" }}</span>
+            {{ partial "icon.html" "moon" }}
-          <span class="hidden dark:inline">{{ partial "icon.html" "sun" }}</span>
+          </div>
+          <div
+            class="items-center justify-center hidden w-12 h-12 dark:flex"
+            title="{{ i18n "footer.light_appearance" }}"
+          >
+            {{ partial "icon.html" "sun" }}
+          </div>
         </button>
       </div>
     {{ end }}