From 4c448e97ab31fa820efc690708386cd82b536581 Mon Sep 17 00:00:00 2001
From: chase-west <chasetwest@gmail.com>
Date: Sun, 29 Dec 2024 10:33:16 -0800
Subject: [PATCH 1/2] svg transition added

---
 components/ThemeSwitch.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/ThemeSwitch.tsx b/components/ThemeSwitch.tsx
index 6cc979245..f9915ec08 100644
--- a/components/ThemeSwitch.tsx
+++ b/components/ThemeSwitch.tsx
@@ -22,7 +22,7 @@ const ThemeSwitch = () => {
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 20 20"
         fill="currentColor"
-        className="text-gray-900 dark:text-gray-100"
+        className="text-gray-900 dark:text-gray-100 transition-colors duration-1000"
       >
         {mounted && (theme === 'dark' || resolvedTheme === 'dark') ? (
           <path

From 5913e49bb93a324347246cd0a17f9ee728b3c94c Mon Sep 17 00:00:00 2001
From: chase-west <chasetwest@gmail.com>
Date: Sun, 29 Dec 2024 10:47:15 -0800
Subject: [PATCH 2/2] Added smooth background transition

---
 components/ThemeSwitch.tsx | 2 +-
 styles/globals.css         | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/components/ThemeSwitch.tsx b/components/ThemeSwitch.tsx
index f9915ec08..3f8b639cc 100644
--- a/components/ThemeSwitch.tsx
+++ b/components/ThemeSwitch.tsx
@@ -22,7 +22,7 @@ const ThemeSwitch = () => {
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 20 20"
         fill="currentColor"
-        className="text-gray-900 dark:text-gray-100 transition-colors duration-1000"
+        className="text-gray-900 dark:text-gray-100 transition-colors duration-300"
       >
         {mounted && (theme === 'dark' || resolvedTheme === 'dark') ? (
           <path
diff --git a/styles/globals.css b/styles/globals.css
index 639a59014..bdcbe775a 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -18,6 +18,10 @@ input[type='checkbox'] {
   @apply mr-2;
 }
 
+body {
+  transition: background-color 0.5s ease, color 0.5s ease;
+}
+
 .video-container {
   position: relative;
   width: 100%;