Beautiful theme switch

styles/Blog/Navigation.module.scss

@@ -54,13 +54,4 @@
     .spacer {
         flex-grow: 2;
     }
-
-    .themeSwitch {
-        .lightTheme {
-            display: var(--blog_dark-el-display)
-        }
-        .darkTheme {
-            display: var(--blog_light-el-display)
-        }
-    }
 }

styles/Blog/ThemeSwitch.module.scss

@@ -0,0 +1,41 @@
+.switch {
+    position: relative;
+    width: 1.5em;
+    height: 1.5em;
+
+    & > * {
+        position: absolute;
+    }
+
+    .fadeOut {
+        animation: fadeOut 0.2s ease-in-out;
+        animation-fill-mode: forwards;
+    }
+
+    .fadeIn {
+        animation: fadeIn 0.2s ease-in-out;
+        animation-fill-mode: forwards;
+    }
+}
+
+@keyframes fadeOut {
+    from {
+        opacity: 1;
+        transform: translate(0, 0);
+    }
+    to {
+        opacity: 0;
+        transform: translate(0, -100%);
+    }
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translate(0, 100%);
+    }
+    to {
+        opacity: 1;
+        transform: translate(0, 0);
+    }
+}