diff --git a/assets/script.js b/assets/script.js
index 2011588..d79aa67 100644
--- a/assets/script.js
+++ b/assets/script.js
@@ -1,4 +1,6 @@
 var use_local_storage = storage_check();
+var html_element = null;
+
 
 function dgel(id) {
 	return document.getElementById(id);
@@ -39,7 +41,6 @@ function theme_set(night) {
 
 function update_page_theme() {
 	let night = theme_get();
-	let html_element = document.getElementsByTagName('html')[0];
 
 	if (night) {
 		html_element.classList.add('night');
@@ -49,8 +50,13 @@ function update_page_theme() {
 }
 
 window.addEventListener('DOMContentLoaded', (event) => {
+	html_element = document.getElementsByTagName('html')[0];
 	update_page_theme();
+
 	dgel('theme-control').onclick = function () {
+		// only add the 'ready' class upon clicking the button
+		// this avoids the page transitioning every time you change the page with night theme on
+		html_element.classList.add('ready');
 		theme_set(!theme_get());
 		update_page_theme();
 	};
diff --git a/assets/style.css b/assets/style.css
index 38272c3..ad0c86c 100644
--- a/assets/style.css
+++ b/assets/style.css
@@ -4,6 +4,12 @@ html {
 html.night {
 	background: #333;
 }
+html.ready,
+html.ready body,
+html.ready a,
+html.ready header a  {
+	transition: 0.2s all;
+}
 body {
 	font-family: "Roboto", sans-serif;
 	display: flex;
@@ -134,7 +140,6 @@ header a {
 	color: white;
 	display: inline-block;
 	padding: 5px 15px;
-	transition: 0.2s all;
 }
 html.night header a {
 	color: white;