diff --git a/_includes/Footer.html b/_includes/Footer.html
index ee18f11c..072addd8 100644
--- a/_includes/Footer.html
+++ b/_includes/Footer.html
@@ -20,6 +20,7 @@ <h6>
   // Theme toggle
   const themeToggle = document.querySelector('.theme-toggle');
   const root = document.documentElement;
+  const body = document.body;
   
   function setTheme(theme) {
     root.setAttribute('data-theme', theme);
@@ -33,6 +34,9 @@ <h6>
   }
   
   themeToggle.addEventListener('click', function() {
+    root.classList.add('theme-transition');
+    body.classList.add('theme-transition');
+    
     const isDark = root.getAttribute('data-theme') === 'dark';
     setTheme(isDark ? 'light' : 'dark');
   });
diff --git a/assets/css/style.css b/assets/css/style.css
index b75cc61b..ffba1f61 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -39,7 +39,9 @@
   --border: #33343a;
 }
 
-html, body {
+/* smooth transition on theme switching */
+html.theme-transition,
+body.theme-transition {
   transition: background 0.3s, color 0.3s;
 }