feat(ux): 🎨 add icon for system theme in ThemeSwitcher

client/apps/webapp/components.d.ts

@@ -5,7 +5,6 @@
 // ------
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
-import { GlobalComponents } from 'vue'
 
 export {}
 
@@ -18,11 +17,3 @@ declare module 'vue' {
     UserNav: typeof import('./src/components/UserNav.vue')['default']
   }
 }
-
-// For TSX support
-declare global {
-  const RouterLink: typeof import('vue-router')['RouterLink']
-  const RouterView: typeof import('vue-router')['RouterView']
-  const ThemeSwitcher: typeof import('./src/components/ThemeSwitcher.vue')['default']
-  const UserNav: typeof import('./src/components/UserNav.vue')['default']
-}

client/apps/webapp/src/components/ThemeSwitcher.spec.ts

@@ -0,0 +1,29 @@
+import { axe } from "vitest-axe";
+import { render, cleanup } from "@testing-library/vue";
+import ThemeSwitcher from "./ThemeSwitcher.vue";
+import { expect, it, describe, vi, afterEach } from "vitest";
+
+vi.mock("@/composables/useTheme", () => ({
+  useTheme: () => ({
+    theme: "light",
+    resolvedTheme: "light",
+    setTheme: vi.fn(),
+  }),
+}));
+
+describe("ThemeSwitcher", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  it("should have no accessibility violations", async () => {
+    const { container } = render(ThemeSwitcher);
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
+  it("should render the component", () => {
+    const { getByRole } = render(ThemeSwitcher);
+    expect(getByRole("button", { name: /select theme/i })).toBeTruthy();
+  });
+});

client/apps/webapp/src/components/ThemeSwitcher.vue

@@ -25,8 +25,15 @@ const themes = [
     <DropdownMenuTrigger as-child>
       <Button variant="ghost" size="icon">
         <span class="sr-only">Select theme</span>
-        <PhSunLight class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-        <PhMoonLight class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+        <PhSunLight
+          :class="['h-[1.2rem] w-[1.2rem] transition-all', resolvedTheme === 'light' ? 'rotate-0 scale-100' : 'rotate-90 scale-0']"
+        />
+        <PhMoonLight
+          :class="['absolute h-[1.2rem] w-[1.2rem] transition-all', resolvedTheme === 'dark' ? 'rotate-0 scale-100' : '-rotate-90 scale-0']"
+        />
+        <PhMonitorLight
+          :class="['absolute h-[1.2rem] w-[1.2rem] transition-all', resolvedTheme === 'system' ? 'rotate-0 scale-100' : '-rotate-90 scale-0']"
+        />
       </Button>
     </DropdownMenuTrigger>
     <DropdownMenuContent align="end">