PR Feedback: h/t Dan & Hunter

src/components/ThemeSwitcher.tsx

@@ -1,4 +1,3 @@
-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";
@@ -11,7 +10,6 @@ export default function ThemeSwitcher({
   className?: string;
 }) {
   const { theme, preference, setPreference } = useTheme();
-  const [isFocused, setIsFocused] = useState(false);
 
   const themeIcons = {
     light: <Sun className="size-5" />,
@@ -26,30 +24,19 @@ 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"
-  };
+  const [firstCharOfPreference="", ...restOfPreference] = preference;
 
   return (
     <button
       type="button"
       className={cn(
-        "transition-all duration-300 scale-100 cursor-pointer m-6 p-2",
+        "transition-all duration-300 scale-100 cursor-pointer m-6 p-2 focus:*:data-label:opacity-100",
         className,
       )}
       onClick={toggleTheme}
-      onFocus={() => setIsFocused(true)}
-      onBlur={() => setIsFocused(false)}
-      aria-description={'Current theme'}
+      aria-description={'Change current theme'}
     >
-      <span style={labelStyle}>{preference}</span>
+      <span data-label className="transition-all block absolute w-full mb-auto mt-auto ml-0 mr-0 text-xs left-0 -top-5 opacity-0 rounded-lg">{firstCharOfPreference.toLocaleUpperCase() + restOfPreference.join("")}</span>
       {themeIcons[preference]}
     </button>
   );