style: 💄 enhance button and body visual feedback

- Add outline to button on hover and focus - Implement color transition for body
JYLN · Oct 6, 2024 · 640f9d4 · 640f9d4
1 parent 5b8b5ca
commit 640f9d4
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 1 deletion.
diff --git a/src/app.css b/src/app.css
@@ -15,6 +15,6 @@
 
 	:root,
 	body {
-		@apply h-full bg-zinc-50 dark:bg-zinc-700;
+		@apply h-full bg-zinc-50 transition-colors dark:bg-zinc-700;
 	}
 }
diff --git a/src/lib/components/ThemeButton.svelte b/src/lib/components/ThemeButton.svelte
@@ -69,6 +69,7 @@
 		aria-checked={isDarkMode}
 		aria-label="Toggle {isDarkMode ? 'light' : 'dark'} mode"
 		transition:fade={{ delay: 200, duration: 300 }}
+		class="hover:rounded-md hover:outline hover:outline-2 hover:outline-offset-2 hover:outline-emerald-500 focus:rounded-md focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-emerald-500"
 	>
 		<Sun class="hidden stroke-zinc-50 dark:block" />
 		<Moon class="stroke-zinc-700 dark:hidden" />
-Original file line number
+Diff line change
@@ Expand Up / @@ -15,6 +15,6 @@ @@
     	:root,
     	body {
-    		@apply h-full bg-zinc-50 dark:bg-zinc-700;
+    		@apply h-full bg-zinc-50 transition-colors dark:bg-zinc-700;
     	}
     }