diff --git a/templates/main.js b/templates/main.js
index 8e8bea88..7631aa89 100755
--- a/templates/main.js
+++ b/templates/main.js
@@ -137,16 +137,25 @@ function changeStyle(styleName, link) {
 	{% endif %}
 	{% raw %}
 
-	// Main stylesheet
-	if (!document.getElementById('stylesheet')) {
-		var s = document.createElement('link');
-		s.rel = 'stylesheet';
-		s.type = 'text/css';
-		s.id = 'stylesheet';
-		var x = document.getElementsByTagName('head')[0];
-		x.appendChild(s);
+	let mainStylesheetElement = document.getElementById('stylesheet');
+	let userStylesheetElement = document.getElementById('stylesheet-user');
+
+	// Override main stylesheet with the user selected one.
+	if (!userStylesheetElement) {
+		userStylesheetElement = document.createElement('link');
+		userStylesheetElement.rel = 'stylesheet';
+		userStylesheetElement.media = 'none';
+		userStylesheetElement.type = 'text/css';
+		userStylesheetElement.id = 'stylesheet';
+		let x = document.getElementsByTagName('head')[0];
+		x.appendChild(userStylesheetElement);
 	}
 
+	// When the new one is loaded, disable the old one
+	userStylesheetElement.onload = function() {
+		this.media = 'all';
+		mainStylesheetElement.media = 'none';
+	}
 	document.getElementById('stylesheet').href = styles[styleName];
 	selectedstyle = styleName;