From ffaca3f5ce6f3cce4b8a8702ec7241ad535d07fc Mon Sep 17 00:00:00 2001
From: James Panther <4462786+jpanther@users.noreply.github.com>
Date: Thu, 18 Aug 2022 16:13:30 +1000
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fix=20appearance=20switcher=20ti?=
 =?UTF-8?q?tle=20when=20switching?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixes #235
---
 CHANGELOG.md                 |  1 +
 assets/css/compiled/main.css |  4 ++--
 layouts/partials/footer.html | 25 +++++++++++++++----------
 3 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 09ccbb7f..56e60b75 100644
--- 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
index e55aff6a..583ee988 100644
--- 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
index 2103e34a..dbf2e703 100644
--- 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 }}