From 6fcb58df49062ec1a2fdf3275acd3d44d145b61d Mon Sep 17 00:00:00 2001
From: Ajay Ghanwat <ghanwat.ajay@workroot.in>
Date: Sun, 17 Aug 2025 09:14:53 +0530
Subject: [PATCH] Updated Theme Switcher

---
 src/components/ColorSwitcher.astro |   8 +-
 src/components/ThemeSwitcher.astro | 459 +++++++++++------------------
 src/pages/theme.astro              |   7 +-
 3 files changed, 177 insertions(+), 297 deletions(-)

diff --git a/src/components/ColorSwitcher.astro b/src/components/ColorSwitcher.astro
index 3c8c8fd..3296161 100644
--- a/src/components/ColorSwitcher.astro
+++ b/src/components/ColorSwitcher.astro
@@ -61,7 +61,7 @@ const item =
         aria-label={p.label}
       >
         <!-- Scope just this swatch to the palette so it inherits --primary -->
-        <span data-swatch-scope data-color={p.key}>
+        <span data-swatch-scope data-color={p.key} class="wr:flex wr:items-center wr:justify-center">
           <span
             class={["wr:inline-block wr:rounded-full wr:ring-2 wr:ring-offset-2 wr:ring-offset-background wr:transition-all wr:group-hover:ring-primary/50", dot].join(" ")}
             data-swatch
@@ -85,7 +85,7 @@ const item =
       >
         <span class="wr:inline-flex wr:items-center wr:gap-3">
           <!-- Trigger dot gets its own scoped palette -->
-          <span data-current-scope data-color={palettes[0].key}>
+          <span data-current-scope data-color={palettes[0].key} class="wr:flex wr:items-center wr:justify-center">
             <span class={["wr:inline-block wr:rounded-full wr:ring-2 wr:ring-offset-2 wr:ring-offset-background", dot].join(" ")} data-swatch />
           </span>
           <span data-current-label class="wr:text-sm wr:font-medium">{palettes[0].label}</span>
@@ -101,7 +101,7 @@ const item =
         aria-expanded="false"
         title="Brand color"
       >
-        <span data-current-scope data-color={palettes[0].key}>
+        <span data-current-scope data-color={palettes[0].key} class="wr:flex wr:items-center wr:justify-center">
           <span class={["wr:inline-block wr:rounded-full wr:ring-2 wr:ring-offset-2 wr:ring-offset-background", dot].join(" ")} data-swatch />
         </span>
       </button>
@@ -116,7 +116,7 @@ const item =
     >
       {palettes.map(p => (
         <button type="button" role="menuitemradio" aria-checked="false" class={item} data-palette={p.key}>
-          <span data-swatch-scope data-color={p.key}>
+          <span data-swatch-scope data-color={p.key} class="wr:flex wr:items-center wr:justify-center">
             <span class={["wr:inline-block wr:rounded-full wr:ring-2 wr:ring-offset-2 wr:ring-offset-background", dot].join(" ")} data-swatch />
           </span>
           <span class="wr:flex-1">{p.label}</span>
diff --git a/src/components/ThemeSwitcher.astro b/src/components/ThemeSwitcher.astro
index e3152bd..560425a 100644
--- a/src/components/ThemeSwitcher.astro
+++ b/src/components/ThemeSwitcher.astro
@@ -3,320 +3,201 @@ import type { HTMLAttributes } from "astro/types";
 import { Icon } from "astro-icon/components";
 
 interface Props extends HTMLAttributes<"div"> {
-    ui?: "icons" | "menu";
-    storageKey?: string;
-    rootSelector?: string;
-    label?: string;
-    compact?: boolean;
-    darkBgClass?: string[];
-    lightBgClass?: string[];
-    rootExtraClass?: string;
+  storageKey?: string;
+  rootSelector?: string;   // where to toggle theme, e.g. "html"
+  compact?: boolean;       // smaller trigger button
+  darkBgClass?: string[];    // non–pure-black dark background class
+  lightBgClass?: string[];   // light background class
+  rootExtraClass?: string; // always-on root class (optional)
+  showLabel?: boolean;     // show text next to icon in trigger
 }
 
 const {
-    ui = "menu",
-    storageKey = "wr-theme",
-    rootSelector = "html",
-    label = "",
-    compact = false,
-    darkBgClass = ["wr-theme-dark-soft"],
-    lightBgClass = ["wr-theme-light"],
-    rootExtraClass = "",
-    class: className,
-    ...rest
+  storageKey = "wr-theme",
+  rootSelector = "html",
+  compact = false,
+  darkBgClass = ["wr-theme-dark-soft"],
+  lightBgClass = ["wr-theme-light"],
+  rootExtraClass = "",
+  showLabel = false,
+  class: className,
+  ...rest
 }: Props = Astro.props;
 
-const btn =
-    "wr:inline-flex wr:items-center wr:gap-2 wr:rounded-xl wr:border wr:border-border wr:bg-background/80 wr:backdrop-blur-sm " +
-    "wr:text-foreground wr:h-10 wr:px-3 wr:text-sm wr:shadow-sm wr:transition wr:duration-200 wr:ease-out " +
-    "wr:hover:bg-muted/70 wr:focus-visible:outline-none wr:focus-visible:ring-2 wr:focus-visible:ring-primary/40 wr:focus-visible:ring-offset-2";
-
 const iconBtn =
-    "wr:inline-flex wr:items-center wr:justify-center wr:h-9 wr:w-9 wr:rounded-xl wr:border wr:border-border wr:bg-background/80 wr:backdrop-blur-sm " +
-    "wr:text-foreground wr:shadow-sm wr:transition wr:duration-200 wr:ease-out wr:hover:bg-muted/70 " +
-    "wr:focus-visible:outline-none wr:focus-visible:ring-2 wr:focus-visible:ring-primary/40 wr:focus-visible:ring-offset-2";
+  "wr:inline-flex wr:items-center wr:justify-center wr:h-9 wr:w-9 wr:rounded-xl wr:border wr:border-border wr:bg-background/80 wr:backdrop-blur-sm " +
+  "wr:text-foreground wr:shadow-sm wr:transition wr:duration-200 wr:ease-out wr:hover:bg-muted/70 " +
+  "wr:focus-visible:outline-none wr:focus-visible:ring-2 wr:focus-visible:ring-primary/40 wr:focus-visible:ring-offset-2 wr:ring-offset-background";
+
+const menuBtn =
+  "wr:inline-flex wr:items-center wr:gap-2 wr:rounded-xl wr:border wr:border-border wr:bg-background/80 wr:backdrop-blur-sm " +
+  "wr:text-foreground wr:h-10 wr:px-3 wr:text-sm wr:shadow-sm wr:transition wr:duration-200 wr:ease-out " +
+  "wr:hover:bg-muted/70 wr:focus-visible:outline-none wr:focus-visible:ring-2 wr:focus-visible:ring-primary/40 wr:focus-visible:ring-offset-2 wr:ring-offset-background";
 
 const item =
-    "wr:flex wr:items-center wr:gap-3 wr:w-full wr:px-3 wr:py-2.5 wr:rounded-lg wr:text-sm wr:hover:bg-muted/70 wr:transition wr:duration-150";
+  "wr:flex wr:items-center wr:gap-3 wr:w-full wr:px-3 wr:py-2.5 wr:rounded-lg wr:text-sm wr:hover:bg-muted/70 wr:transition wr:duration-150";
 
 const icon = "wr:size-4";
 const checkBase = "wr:size-4 wr:opacity-0 wr:scale-90 wr:transition";
+const containerId = `ts-${Math.random().toString(36).slice(2)}`;
 ---
 
-<div
-    class={["wr:flex wr:items-center wr:gap-3", className].join(" ")}
-    {...rest}
->
-    {label && <span class="wr:text-sm wr:text-muted-foreground">{label}</span>}
+<div id={containerId} class={["wr:relative", className].join(" ")} {...rest}>
+  <!-- Trigger: icon-only by default; set showLabel=true to include text -->
+  <button
+    type="button"
+    class={showLabel ? menuBtn : [iconBtn, compact && "wr:h-8 wr:w-8"].filter(Boolean).join(" ")}
+    data-menu-trigger
+    aria-haspopup="menu"
+    aria-expanded="false"
+    title="Theme"
+  >
+    <span class="wr:inline-flex wr:items-center wr:gap-2">
+      <span data-current-icon="light" class="wr:inline"><Icon name="mdi:weather-sunny" class={icon} /></span>
+      <span data-current-icon="dark" class="wr:hidden"><Icon name="mdi:weather-night" class={icon} /></span>
+      <span data-current-icon="system" class="wr:hidden"><Icon name="mdi:laptop" class={icon} /></span>
+      {showLabel && <span data-current-label class="wr:text-sm wr:font-medium">System</span>}
+    </span>
+    {showLabel && <Icon name="mdi:chevron-down" class="wr:size-4 wr:opacity-70" />}
+  </button>
 
-    {
-        ui === "icons" && (
-            <div class="wr:flex wr:items-center wr:gap-2" data-theme-switcher>
-                <button
-                    type="button"
-                    class={[iconBtn, compact && "wr:h-8 wr:w-8"]
-                        .filter(Boolean)
-                        .join(" ")}
-                    data-set-theme="light"
-                    title="Light"
-                    aria-label="Light"
-                >
-                    <Icon name="mdi:weather-sunny" class={icon} />
-                </button>
-                <button
-                    type="button"
-                    class={[iconBtn, compact && "wr:h-8 wr:w-8"]
-                        .filter(Boolean)
-                        .join(" ")}
-                    data-set-theme="dark"
-                    title="Dark"
-                    aria-label="Dark"
-                >
-                    <Icon name="mdi:weather-night" class={icon} />
-                </button>
-                <button
-                    type="button"
-                    class={[iconBtn, compact && "wr:h-8 wr:w-8"]
-                        .filter(Boolean)
-                        .join(" ")}
-                    data-set-theme="system"
-                    title="System"
-                    aria-label="System"
-                >
-                    <Icon name="mdi:laptop" class={icon} />
-                </button>
-            </div>
-        )
-    }
-
-    {
-        ui === "menu" && (
-            <div class="wr:relative" data-theme-switcher data-theme-menu>
-                <button
-                    type="button"
-                    class={[btn, "wr:min-w-[10.5rem] wr:justify-between"].join(
-                        " ",
-                    )}
-                    data-menu-trigger
-                    aria-haspopup="menu"
-                    aria-expanded="false"
-                >
-                    <span class="wr:inline-flex wr:items-center wr:gap-2">
-                        <span data-current-icon="light" class="wr:inline">
-                            <Icon name="mdi:weather-sunny" class={icon} />
-                        </span>
-                        <span data-current-icon="dark" class="wr:hidden">
-                            <Icon name="mdi:weather-night" class={icon} />
-                        </span>
-                        <span data-current-icon="system" class="wr:hidden">
-                            <Icon name="mdi:laptop" class={icon} />
-                        </span>
-                        <span
-                            data-current-label
-                            class="wr:text-sm wr:font-medium"
-                        >
-                            System
-                        </span>
-                    </span>
-                    <Icon
-                        name="mdi:chevron-down"
-                        class="wr:size-4 wr:opacity-70"
-                    />
-                </button>
-
-                <div
-                    class="wr:absolute wr:right-0 wr:z-50 wr:mt-2 wr:w-56 wr:rounded-2xl wr:border wr:border-border wr:bg-popover/90 wr:backdrop-blur-md wr:text-popover-foreground wr:shadow-lg wr:p-1.5 wr:hidden
-               wr:origin-top-right wr:scale-95 wr:opacity-0 wr:transition wr:duration-150 wr:ease-out"
-                    role="menu"
-                    aria-label="Theme"
-                    data-menu-panel
-                >
-                    <button
-                        type="button"
-                        role="menuitemradio"
-                        aria-checked="false"
-                        class={item}
-                        data-set-theme="light"
-                    >
-                        <Icon name="mdi:weather-sunny" class={icon} />
-                        <div class="wr:flex-1 wr:font-medium">Light</div>
-                        <Icon name="mdi:check" class={checkBase} data-check />
-                    </button>
-                    <button
-                        type="button"
-                        role="menuitemradio"
-                        aria-checked="false"
-                        class={item}
-                        data-set-theme="dark"
-                    >
-                        <Icon name="mdi:weather-night" class={icon} />
-                        <div class="wr:flex-1 wr:font-medium">Dark</div>
-                        <Icon name="mdi:check" class={checkBase} data-check />
-                    </button>
-                    <button
-                        type="button"
-                        role="menuitemradio"
-                        aria-checked="true"
-                        class={item}
-                        data-set-theme="system"
-                    >
-                        <Icon name="mdi:laptop" class={icon} />
-                        <div class="wr:flex-1 wr:font-medium">System</div>
-                        <Icon name="mdi:check" class={checkBase} data-check />
-                    </button>
-                </div>
-            </div>
-        )
-    }
+  <!-- Dropdown -->
+  <div
+    class="wr:absolute wr:right-0 wr:z-50 wr:mt-2 wr:w-56 wr:rounded-2xl wr:border wr:border-border wr:bg-popover/90 wr:backdrop-blur-md wr:text-popover-foreground wr:shadow-lg wr:p-1.5 wr:hidden
+           wr:origin-top-right wr:scale-95 wr:opacity-0 wr:transition wr:duration-150 wr:ease-out"
+    role="menu"
+    aria-label="Theme"
+    data-menu-panel
+  >
+    <button type="button" role="menuitemradio" aria-checked="false" class={item} data-set-theme="light">
+      <Icon name="mdi:weather-sunny" class={icon} />
+      <div class="wr:flex-1 wr:font-medium">Light</div>
+      <Icon name="mdi:check" class={checkBase} data-check />
+    </button>
+    <button type="button" role="menuitemradio" aria-checked="false" class={item} data-set-theme="dark">
+      <Icon name="mdi:weather-night" class={icon} />
+      <div class="wr:flex-1 wr:font-medium">Dark</div>
+      <Icon name="mdi:check" class={checkBase} data-check />
+    </button>
+    <button type="button" role="menuitemradio" aria-checked="true" class={item} data-set-theme="system">
+      <Icon name="mdi:laptop" class={icon} />
+      <div class="wr:flex-1 wr:font-medium">System</div>
+      <Icon name="mdi:check" class={checkBase} data-check />
+    </button>
+  </div>
 </div>
 
-<script
-    is:inline
-    define:vars={{
-        storageKey,
-        rootSelector,
-        darkBgClass,
-        lightBgClass,
-        rootExtraClass,
-    }}
->
-    (() => {
-        const root =
-            rootSelector === "html"
-                ? document.documentElement
-                : document.querySelector(rootSelector) ||
-                  document.documentElement;
+<script is:inline define:vars={{ containerId, storageKey, rootSelector, darkBgClass, lightBgClass, rootExtraClass }}>
+  (() => {
+    const host = document.getElementById(containerId);
+    if (!host) return;
 
-        const mql = window.matchMedia("(prefers-color-scheme: dark)");
-        let lastThemeClasses = [];
+    const root = rootSelector === "html"
+      ? document.documentElement
+      : document.querySelector(rootSelector) || document.documentElement;
 
-        function setRootClasses(list) {
-            lastThemeClasses.forEach((c) => c && root.classList.remove(c));
-            list.filter(Boolean).forEach((c) => root.classList.add(c));
-            lastThemeClasses = list.filter(Boolean);
-        }
+    const mql = window.matchMedia("(prefers-color-scheme: dark)");
+    let lastThemeClasses = [];
 
-        function reflectUI(mode) {
-            const wrap = document.querySelector("[data-theme-switcher]");
-            if (!wrap) return;
+    function setRootClasses(list) {
+      lastThemeClasses.forEach(c => c && root.classList.remove(c));
+      list.filter(Boolean).forEach(c => root.classList.add(c));
+      lastThemeClasses = list.filter(Boolean);
+    }
 
-            // icon buttons
-            wrap.querySelectorAll("[data-set-theme]").forEach((btn) => {
-                const active = btn.getAttribute("data-set-theme") === mode;
-                btn.classList.toggle("wr:bg-muted/70", active);
-            });
-
-            // menu radios + checks
-            const panel = wrap.querySelector("[data-menu-panel]");
-            if (panel) {
-                panel
-                    .querySelectorAll("[role='menuitemradio']")
-                    .forEach((item) => {
-                        const active =
-                            item.getAttribute("data-set-theme") === mode;
-                        item.setAttribute(
-                            "aria-checked",
-                            active ? "true" : "false",
-                        );
-                        item.classList.toggle("wr:bg-muted/60", active);
-                        // check icon visibility handled by CSS via [aria-checked="true"] [data-check]
-                    });
-
-                const trig = wrap.querySelector("[data-menu-trigger]");
-                if (trig) {
-                    const labelSpan = trig.querySelector(
-                        "[data-current-label]",
-                    );
-                    if (labelSpan)
-                        labelSpan.textContent =
-                            mode[0].toUpperCase() + mode.slice(1);
-                    trig.querySelectorAll("[data-current-icon]").forEach(
-                        (el) => {
-                            const is =
-                                el.getAttribute("data-current-icon") === mode;
-                            el.classList.toggle("wr:hidden", !is);
-                            el.classList.toggle("wr:inline", is);
-                        },
-                    );
-                }
-            }
-        }
-
-        function openMenu(wrap, open) {
-            const trigger = wrap.querySelector("[data-menu-trigger]");
-            const panel = wrap.querySelector("[data-menu-panel]");
-            trigger?.setAttribute("aria-expanded", open ? "true" : "false");
-            if (!panel) return;
-            if (open) {
-                panel.classList.remove("wr:hidden");
-                requestAnimationFrame(() => {
-                    panel.classList.remove("wr:scale-95", "wr:opacity-0");
-                    panel.classList.add("wr:scale-100", "wr:opacity-100");
-                });
-            } else {
-                panel.classList.add("wr:scale-95", "wr:opacity-0");
-                setTimeout(() => panel.classList.add("wr:hidden"), 150);
-            }
-        }
-
-        function apply(mode) {
-            const resolved =
-                mode === "system" ? (mql.matches ? "dark" : "light") : mode;
-            root.classList.toggle("dark", resolved === "dark");
-            root.setAttribute("data-theme", resolved);
-            document.documentElement.style.colorScheme = resolved;
-            setRootClasses([
-                rootExtraClass,
-                ...(resolved === "dark" ? darkBgClass : lightBgClass),
-            ]);
-            localStorage.setItem(storageKey, mode);
-            reflectUI(mode);
-        }
-
-        const saved = localStorage.getItem(storageKey) || "system";
-        apply(saved);
-
-        mql.addEventListener?.("change", () => {
-            if ((localStorage.getItem(storageKey) || "system") === "system")
-                apply("system");
+    function reflectUI(mode) {
+      // Trigger icon + optional label
+      const trig = host.querySelector("[data-menu-trigger]");
+      if (trig) {
+        const labelSpan = trig.querySelector("[data-current-label]");
+        if (labelSpan) labelSpan.textContent = mode[0].toUpperCase() + mode.slice(1);
+        trig.querySelectorAll("[data-current-icon]").forEach(el => {
+          const is = el.getAttribute("data-current-icon") === mode;
+          el.classList.toggle("wr:hidden", !is);
+          el.classList.toggle("wr:inline", is);
         });
+      }
 
-        document.addEventListener("click", (e) => {
-            const menuWrap = e.target.closest?.("[data-theme-menu]");
-            const trigger = e.target.closest?.("[data-menu-trigger]");
-            const choose = e.target.closest?.("[data-set-theme]");
-
-            if (choose) {
-                apply(choose.getAttribute("data-set-theme"));
-                const wrap = choose.closest("[data-theme-menu]");
-                if (wrap) openMenu(wrap, false);
-                return;
-            }
-            if (trigger && menuWrap) {
-                const expanded =
-                    trigger.getAttribute("aria-expanded") === "true";
-                openMenu(menuWrap, !expanded);
-                return;
-            }
-            document
-                .querySelectorAll("[data-theme-menu]")
-                .forEach((w) => openMenu(w, false));
+      // Menu radios & checks
+      const panel = host.querySelector("[data-menu-panel]");
+      if (panel) {
+        panel.querySelectorAll("[role='menuitemradio']").forEach(item => {
+          const active = item.getAttribute("data-set-theme") === mode;
+          item.setAttribute("aria-checked", active ? "true" : "false");
+          item.classList.toggle("wr:bg-muted/60", active);
         });
+      }
+    }
 
-        document.addEventListener("keydown", (e) => {
-            if (e.key === "Escape") {
-                document
-                    .querySelectorAll("[data-theme-menu]")
-                    .forEach((w) => openMenu(w, false));
-            }
+    function openMenu(open) {
+      const trigger = host.querySelector("[data-menu-trigger]");
+      const panel = host.querySelector("[data-menu-panel]");
+      trigger?.setAttribute("aria-expanded", open ? "true" : "false");
+      if (!panel) return;
+      if (open) {
+        panel.classList.remove("wr:hidden");
+        requestAnimationFrame(() => {
+          panel.classList.remove("wr:scale-95","wr:opacity-0");
+          panel.classList.add("wr:scale-100","wr:opacity-100");
         });
-    })();
+      } else {
+        panel.classList.add("wr:scale-95","wr:opacity-0");
+        setTimeout(() => panel.classList.add("wr:hidden"), 150);
+      }
+    }
+
+    function apply(mode) {
+      const resolved = mode === "system" ? (mql.matches ? "dark" : "light") : mode;
+      root.classList.toggle("dark", resolved === "dark");
+      root.setAttribute("data-theme", resolved);
+      document.documentElement.style.colorScheme = resolved;
+      setRootClasses([rootExtraClass, ...(resolved === "dark" ? darkBgClass : lightBgClass)]);
+      localStorage.setItem(storageKey, mode);
+      reflectUI(mode);
+    }
+
+    // Init
+    const saved = (localStorage.getItem(storageKey) ) || "system";
+    apply(saved);
+
+    // react to system changes when mode=system
+    mql.addEventListener?.("change", () => {
+      if ((localStorage.getItem(storageKey) ) === "system") apply("system");
+    });
+
+    // Events (scoped to this component)
+    host.addEventListener("click", (e) => {
+      const trigger = (e.target )?.closest?.("[data-menu-trigger]");
+      if (trigger && host.contains(trigger)) {
+        const expanded = trigger.getAttribute("aria-expanded") === "true";
+        openMenu(!expanded);
+        return;
+      }
+
+      const choose = (e.target )?.closest?.("[data-set-theme]");
+      if (choose && host.contains(choose)) {
+        apply(choose.getAttribute("data-set-theme") );
+        openMenu(false);
+        return;
+      }
+    });
+
+    // Close on outside click
+    document.addEventListener("click", (e) => {
+      if (!host.contains(e.target )) openMenu(false);
+    });
+
+    // Esc to close
+    document.addEventListener("keydown", (e) => {
+      if (e.key === "Escape") openMenu(false);
+    });
+  })();
 </script>
 
 <style is:inline>
-    /* Show the check icon ONLY on the active item in the menu */
-    [data-theme-menu] [role="menuitemradio"][aria-checked="true"] [data-check] {
-        opacity: 1 !important;
-        transform: scale(1) !important;
-    }
-</style>
+/* Check icon ONLY on active item */
+#{containerId} [role="menuitemradio"][aria-checked="true"] [data-check] {
+  opacity: 1 !important;
+  transform: scale(1) !important;
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/theme.astro b/src/pages/theme.astro
index 0a6cc44..4a5bdeb 100644
--- a/src/pages/theme.astro
+++ b/src/pages/theme.astro
@@ -8,13 +8,12 @@ import Base from "../layouts/Base.astro";
     <div
         class="wrnx wr:flex wr:items-center wr:flex-col wr:gap-4 wr:w-full wr:h-screen"
     >
+        <!-- Icon-only trigger (default) -->
         <ThemeSwitcher
-            ui="select"
-            darkBgClass={["wr:dark:bg-neutral-700", "wr:text-white"]}
+            darkBgClass={["wr:dark:bg-neutral-500", "wr:text-white"]}
             lightBgClass={["wr:bg-white", "wr:text-black"]}
-            ui="menu"
-            rootExtraClass=""
         />
+
         <ColorSwitcher ui="menu" trigger="dot" />
 
         <div>