source/shadcn-ui
1
0
Fork 0
mirror of https://github.com/shadcn-ui/ui.git synced 2026-02-09 02:49:29 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(www): make icon reflect theme setting (#92)

Browse Source 
Co-authored-by: shadcn <m@shadcn.com>
This commit is contained in:
Pavlo
2023-02-19 07:17:11 +01:00
committed by GitHub
parent 6e93b93922
commit 470ce96e2d
3 changed files with 6 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
apps/www/components/mode-toggle.tsx
View File

@@ -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>

3
examples/playground/components/theme-toggle.tsx
View File

@@ -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>

3
templates/next-template/components/theme-toggle.tsx
View File

@@ -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>