From 470ce96e2da717c484d8209c2bfee25a145cc895 Mon Sep 17 00:00:00 2001
From: Pavlo <its.monotype@gmail.com>
Date: Sun, 19 Feb 2023 07:17:11 +0100
Subject: [PATCH] feat(www): make icon reflect theme setting (#92)

Co-authored-by: shadcn <m@shadcn.com>
---
 apps/www/components/mode-toggle.tsx                 | 3 ++-
 examples/playground/components/theme-toggle.tsx     | 3 ++-
 templates/next-template/components/theme-toggle.tsx | 3 ++-
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/apps/www/components/mode-toggle.tsx b/apps/www/components/mode-toggle.tsx
index d2c8498c7..d5cd105d5 100644
--- a/apps/www/components/mode-toggle.tsx
+++ b/apps/www/components/mode-toggle.tsx
@@ -19,7 +19,8 @@ export function ModeToggle() {
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <Button variant="ghost" size="sm">
-          <Icons.sun className="hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-100" />
+          <Icons.sun className="rotate-0 scale-100 transition-all hover:text-slate-900 dark:-rotate-90 dark:scale-0 dark:text-slate-400 dark:hover:text-slate-100" />
+          <Icons.moon className="absolute rotate-90 scale-0 transition-all hover:text-slate-900 dark:rotate-0 dark:scale-100 dark:text-slate-400 dark:hover:text-slate-100" />
           <span className="sr-only">Toggle theme</span>
         </Button>
       </DropdownMenuTrigger>
diff --git a/examples/playground/components/theme-toggle.tsx b/examples/playground/components/theme-toggle.tsx
index 4a85d8630..5564ca633 100644
--- a/examples/playground/components/theme-toggle.tsx
+++ b/examples/playground/components/theme-toggle.tsx
@@ -19,7 +19,8 @@ export function ThemeToggle() {
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <Button variant="ghost" size="sm">
-          <Icons.sun className="hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-100" />
+          <Icons.sun className="rotate-0 scale-100 transition-all hover:text-slate-900 dark:-rotate-90 dark:scale-0 dark:text-slate-400 dark:hover:text-slate-100" />
+          <Icons.moon className="absolute rotate-90 scale-0 transition-all hover:text-slate-900 dark:rotate-0 dark:scale-100 dark:text-slate-400 dark:hover:text-slate-100" />
           <span className="sr-only">Toggle theme</span>
         </Button>
       </DropdownMenuTrigger>
diff --git a/templates/next-template/components/theme-toggle.tsx b/templates/next-template/components/theme-toggle.tsx
index c44ace489..9c5ae6346 100644
--- a/templates/next-template/components/theme-toggle.tsx
+++ b/templates/next-template/components/theme-toggle.tsx
@@ -17,7 +17,8 @@ export function ThemeToggle() {
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <Button variant="ghost" size="sm">
-          <Icons.sun className="hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-100" />
+          <Icons.sun className="rotate-0 scale-100 transition-all hover:text-slate-900 dark:-rotate-90 dark:scale-0 dark:text-slate-400 dark:hover:text-slate-100" />
+          <Icons.moon className="absolute rotate-90 scale-0 transition-all hover:text-slate-900 dark:rotate-0 dark:scale-100 dark:text-slate-400 dark:hover:text-slate-100" />
           <span className="sr-only">Toggle theme</span>
         </Button>
       </DropdownMenuTrigger>