From 9daa276c2ee1d158733cac3ab5d38d368a28dd22 Mon Sep 17 00:00:00 2001
From: Daniel Flanagan <daniel@lyte.dev>
Date: Sun, 26 May 2024 10:46:28 -0500
Subject: [PATCH] Better align icons

---
 layouts/partials/align-toggle.html | 4 ++--
 layouts/partials/theme-toggle.html | 2 +-
 static/theme.mjs                   | 7 +++++++
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/layouts/partials/align-toggle.html b/layouts/partials/align-toggle.html
index eaa03c5..cb8ccca 100644
--- a/layouts/partials/align-toggle.html
+++ b/layouts/partials/align-toggle.html
@@ -1,6 +1,6 @@
 <svg class="hide-in-align-center" width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25H12" />
+  <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12H12m-8.25 5.25h16.5" />
 </svg>
 <svg class="hide-in-align-left" width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
+  <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M7.75 12 h8.5 m-12.25 5.25 h16.5" />
 </svg>
diff --git a/layouts/partials/theme-toggle.html b/layouts/partials/theme-toggle.html
index 9b86427..9b75064 100644
--- a/layouts/partials/theme-toggle.html
+++ b/layouts/partials/theme-toggle.html
@@ -5,5 +5,5 @@
   <path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z" />
 </svg>
 <svg class="only-in-system-theme" height="24" width="24" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />
+  <path stroke-linecap="round" stroke-linejoin="round" d="M9.53 16.122a3 3 0 0 0-5.78 1.128 2.25 2.25 0 0 1-2.4 2.245 4.5 4.5 0 0 0 8.4-2.245c0-.399-.078-.78-.22-1.128Zm0 0a15.998 15.998 0 0 0 3.388-1.62m-5.043-.025a15.994 15.994 0 0 1 1.622-3.395m3.42 3.42a15.995 15.995 0 0 0 4.764-4.648l3.876-5.814a1.151 1.151 0 0 0-1.597-1.597L14.146 6.32a15.996 15.996 0 0 0-4.649 4.763m3.42 3.42a6.776 6.776 0 0 0-3.42-3.42" />
 </svg>
diff --git a/static/theme.mjs b/static/theme.mjs
index 01d4514..1f4498d 100644
--- a/static/theme.mjs
+++ b/static/theme.mjs
@@ -54,6 +54,13 @@ export class Theme {
     document.body.classList.remove(`dark-theme`)
     document.body.classList.remove(`system-theme`)
     document.body.classList.add(`${this.#theme}-theme`)
+    const toggler = document.getElementById("theme-toggler")
+    toggler.setAttribute("title", this.toggleTitle)
+    toggler.setAttribute("aria-label", "toggle theme")
+  }
+
+  get toggleTitle() {
+    return `toggle theme (current theme: ${this.theme})`
   }
 
   get theme() {