@@ -0,0 +1,3 @@
+{
+  "liveServer.settings.port": 5501
+}
@@ -21,6 +21,21 @@ function toggleDarkLight() {
   } else {
     button.innerHTML = "🌙";
   }
+
+  var trans = () => {
+    document.documentElement.classList.add("transition");
+    window.setTimeout(() => {
+      document.documentElement.classList.remove("transition");
+    }, 500);
+  };
+
   var currentClass = body.className;
-  body.className = currentClass == "dark-mode" ? "light-mode" : "dark-mode";
+  // body.className = currentClass == "dark-mode" ? "light-mode" : "dark-mode";
+  if (currentClass == "dark-mode") {
+    trans();
+    body.className = "light-mode";
+  } else {
+    trans();
+    body.className = "dark-mode";
+  }
 }
@@ -89,6 +89,14 @@ body.light-mode svg {
   font-size: 30px;
 }
 
+html.transition,
+html.transition *,
+html.transition *:before,
+html.transition *:after {
+  transition: all 750ms !important;
+  transition-delay: 0 !important;
+}
+
 h1 {
   text-align: center;
   font-size: 3.5rem;
@@ -97,8 +105,8 @@ h1 {
 
 @media only screen and (max-width: 658px) {
 
-  h1 { 
-     font-size: 1.8em; 
+  h1 {
+     font-size: 1.8em;
      padding: 32px 40px;
   }
 
@@ -142,7 +150,7 @@ a:visited {
   transform: scale3d(1.05, 1.05, 1);
   /* border: 1px solid #ffffff; */
   filter: drop-shadow(10px);
-  filter: contrast(110%);  
+  filter: contrast(110%);
 }
 
 .item h4{
@@ -164,7 +172,7 @@ a:visited {
 }
 
 footer {
-  background-color: #19172e; 
+  background-color: #19172e;
   text-align: center;
   color: white;
   font-size: 1rem;
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+{`
	`2`	`+ "liveServer.settings.port": 5501`
	`3`	`+}`