From f82bc660b0d231ac178033399169d9d618492eb3 Mon Sep 17 00:00:00 2001
From: bkimmel <brentkimmel@brentkimmel.com>
Date: Tue, 18 Mar 2025 00:06:38 -0400
Subject: [PATCH] add a label to theme icon

---
 src/components/ThemeSwitcher.tsx | 20 +++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/components/ThemeSwitcher.tsx b/src/components/ThemeSwitcher.tsx
index c662eda2..dc1eec4a 100644
--- a/src/components/ThemeSwitcher.tsx
+++ b/src/components/ThemeSwitcher.tsx
@@ -1,3 +1,4 @@
+import { useState } from "react";
 import { useTheme } from "../core/hooks/useTheme.ts";
 import { cn } from "../core/utils/cn.ts";
 import { Monitor, Moon, Sun } from "lucide-react";
@@ -10,6 +11,7 @@ export default function ThemeSwitcher({
   className?: string;
 }) {
   const { theme, preference, setPreference } = useTheme();
+  const [isFocused, setIsFocused] = useState(false);
 
   const themeIcons = {
     light: <Sun className="size-5" />,
@@ -24,6 +26,17 @@ export default function ThemeSwitcher({
     setPreference(nextPreference);
   };
 
+  const labelStyle = {
+    display: "block",
+    margin: "0 auto",
+    fontSize: ".65rem",
+    width: "100%",
+    position: "absolute",
+    top: isFocused ? "-2em" : "2em",
+    left: "0",
+    opacity: isFocused ? "100" : "0"
+  };
+
   return (
     <button
       type="button"
@@ -32,10 +45,11 @@ export default function ThemeSwitcher({
         className,
       )}
       onClick={toggleTheme}
-      aria-label={preference === "system"
-        ? `System theme (currently ${theme}). Click to change theme.`
-        : `Current theme: ${theme}. Click to change theme.`}
+      onFocus={() => setIsFocused(true)}
+      onBlur={() => setIsFocused(false)}
+      aria-description={'Current theme'}
     >
+      <span style={labelStyle}>{preference}</span>
       {themeIcons[preference]}
     </button>
   );