🐛 Fix appearance switcher title when switching

Fixes #235
jpanther · Aug 18, 2022 · ffaca3f · ffaca3f
1 parent dbe7527
commit ffaca3f
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 12 deletions.
diff --git a/CHANGELOG.md b/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

diff --git a/assets/css/compiled/main.css b/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 {
-  display: inline;
+.dark .dark\:flex {
+  display: flex;
 }
 
 .dark .dark\:hidden {

diff --git a/layouts/partials/footer.html b/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
-          id="appearance-switcher"
-          class="w-12 h-12 "
-          type="button"
-          title="{{ i18n "footer.dark_appearance" }}"
-        >
-          <span class="inline dark:hidden">{{ partial "icon.html" "moon" }}</span>
-          <span class="hidden dark:inline">{{ partial "icon.html" "sun" }}</span>
+        <button id="appearance-switcher" type="button">
+          <div
+            class="flex items-center justify-center w-12 h-12 dark:hidden"
+            title="{{ i18n "footer.dark_appearance" }}"
+          >
+            {{ partial "icon.html" "moon" }}
+          </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 }}