diff --git a/_layouts/404.html b/_layouts/404.html
index 836b247..df88289 100644
--- a/_layouts/404.html
+++ b/_layouts/404.html
@@ -6,7 +6,27 @@ layout: compress
 <html lang="{{ page.lang | default: site.lang | default: " en " }}">
 
 {% include header.html %}
-<body>
+<body data-theme="{{ site.mode }}" class="notransition">
+
+  <script>
+    const body = document.body;
+    const data = body.getAttribute("data-theme");
+
+    const initTheme = (state) => {
+      if (state === "dark") {
+        body.setAttribute("data-theme", "dark");
+      } else if (state === "light") {
+        body.removeAttribute("data-theme");
+      } else {
+        localStorage.setItem("theme", data);
+      }
+    };
+ 
+    initTheme(localStorage.getItem("theme"));
+    
+    setTimeout(() => body.classList.remove("notransition"), 75);
+  </script>
+
   {% include navbar.html %}
   <div class="wrapper">
     <main aria-label="Content">
diff --git a/_layouts/default.html b/_layouts/default.html
index 1fbf5da..1500975 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -5,7 +5,27 @@ layout: compress
 <html lang="{{ page.lang | default: site.lang | default: " en " }}">
 {% include header.html %}
 
-<body data-theme="{{ site.mode }}">
+<body data-theme="{{ site.mode }}" class="notransition">
+
+  <script>
+    const body = document.body;
+    const data = body.getAttribute("data-theme");
+
+    const initTheme = (state) => {
+      if (state === "dark") {
+        body.setAttribute("data-theme", "dark");
+      } else if (state === "light") {
+        body.removeAttribute("data-theme");
+      } else {
+        localStorage.setItem("theme", data);
+      }
+    };
+ 
+    initTheme(localStorage.getItem("theme"));
+    
+    setTimeout(() => body.classList.remove("notransition"), 75);
+  </script>
+
   {% include navbar.html %}
   <div class="wrapper">
     {% include author.html %}
diff --git a/_layouts/page.html b/_layouts/page.html
index e17b024..9aebe9f 100644
--- a/_layouts/page.html
+++ b/_layouts/page.html
@@ -7,7 +7,27 @@ layout: compress
 
 {% include header.html %}
 
-<body data-theme="{{ site.mode }}">
+<body data-theme="{{ site.mode }}" class="notransition">
+
+  <script>
+    const body = document.body;
+    const data = body.getAttribute("data-theme");
+
+    const initTheme = (state) => {
+      if (state === "dark") {
+        body.setAttribute("data-theme", "dark");
+      } else if (state === "light") {
+        body.removeAttribute("data-theme");
+      } else {
+        localStorage.setItem("theme", data);
+      }
+    };
+ 
+    initTheme(localStorage.getItem("theme"));
+    
+    setTimeout(() => body.classList.remove("notransition"), 75);
+  </script>
+
   {% include navbar.html %}
   <div class="wrapper">
     <header class="header">
diff --git a/_layouts/post.html b/_layouts/post.html
index 2307217..e15f093 100644
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -7,7 +7,27 @@ layout: compress
 
 {% include header.html %}
 
-<body data-theme="{{ site.mode }}">
+<body data-theme="{{ site.mode }}" class="notransition">
+
+  <script>
+    const body = document.body;
+    const data = body.getAttribute("data-theme");
+
+    const initTheme = (state) => {
+      if (state === "dark") {
+        body.setAttribute("data-theme", "dark");
+      } else if (state === "light") {
+        body.removeAttribute("data-theme");
+      } else {
+        localStorage.setItem("theme", data);
+      }
+    };
+ 
+    initTheme(localStorage.getItem("theme"));
+    
+    setTimeout(() => body.classList.remove("notransition"), 75);
+  </script>
+
   {% include navbar.html %}
   <div class="wrapper post">
     <main class="page-content" aria-label="Content">
@@ -55,7 +75,7 @@ layout: compress
       </article>
     
       {% if page.comments %}
-        {% include comments.html%}
+        {% include comments.html %}
       {% endif %}
 
     </main>
@@ -71,4 +91,4 @@ layout: compress
   </div>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/_sass/klise/_base.scss b/_sass/klise/_base.scss
index abf5740..53b4f24 100644
--- a/_sass/klise/_base.scss
+++ b/_sass/klise/_base.scss
@@ -7,6 +7,14 @@
   transition: background-color 75ms ease-in, border-color 75ms ease-in;
 }
 
+.notransition {
+  -webkit-transition: none;
+  -moz-transition: none; 
+  -ms-transition: none;
+  -o-transition: none;
+  transition: none;
+}
+
 html {
   overflow-x: hidden;
   width: 100%;
diff --git a/assets/js/main.js b/assets/js/main.js
index 7bf1a1e..b58aca9 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -2,17 +2,6 @@
   // Theme switch
   const body = document.body;
   const lamp = document.getElementById("mode");
-  const data = body.getAttribute("data-theme");
-
-  const initTheme = (state) => {
-    if (state === "dark") {
-      body.setAttribute("data-theme", "dark");
-    } else if (state === "light") {
-      body.removeAttribute("data-theme");
-    } else {
-      localStorage.setItem("theme", data);
-    }
-  };
 
   const toggleTheme = (state) => {
     if (state === "dark") {
@@ -26,8 +15,6 @@
     }
   };
 
-  initTheme(localStorage.getItem("theme"));
-
   lamp.addEventListener("click", () =>
     toggleTheme(localStorage.getItem("theme"))
   );
