Smoother dark mode switch

src/components/FancyDarkMode.astro

@@ -2,7 +2,7 @@
 import { Icon } from 'astro-icon/components'
 ---
 <fancy-dark-mode>
-  <button class="darkmode-toggle mr-4 xl:mr-0" aria-expanded="false" aria-label="Toggle dark mode">
+  <button class="darkmode-toggle ml-1.5" aria-expanded="false" aria-label="Toggle dark mode">
     <div id="animation-icon" class="hidden"/>
     <Icon is:inline={true} id="light" class="hidden" name="line-md:sunny" width="32" height="32"/>
     <Icon is:inline={true} id="dark" class="hidden" name="line-md:moon" width="32" height="32" />

src/components/Header.astro

@@ -62,6 +62,7 @@ import { Icon } from 'astro-icon/components'
 
   header {
     background-color: rgb(255, 255, 255, 0.75);
+    transition: background-color 0.25s ease-in-out;
 
     .type-icon a {
       display: block;

src/components/Navigation.astro

@@ -23,7 +23,9 @@ import FancyDarkMode from './FancyDarkMode.astro'
       <div class="pt-1.5">
         <FancyDarkMode />
       </div>
-      <ResponsiveToggle />
+      <div class="h-8 w-8 pt-[0.2rem]">
+        <ResponsiveToggle />
+      </div>
     </div>
     <nav class="mobile-menu" aria-label="Main navigation mobile">
       <ul class="menu">
@@ -324,7 +326,6 @@ import FancyDarkMode from './FancyDarkMode.astro'
       button {
         display: block;
         width: 100%;
-        padding: 0.5rem 0;
       }
     }
 

src/layouts/DefaultLayout.astro

@@ -80,6 +80,8 @@ const {
         color: var(--font-color);
         background-color: var(--background);
 
+        transition: background-color 0.25s ease-in-out, color 0.25s ease-in-out;
+
         main {
           flex: 1 0 auto;
         }