diff --git a/templates/header.html b/templates/header.html
index b2c0f054..51a9593c 100644
--- a/templates/header.html
+++ b/templates/header.html
@@ -3,21 +3,21 @@
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
 {% if config.meta_keywords %}<meta name="keywords" content="{{ config.meta_keywords }}">{% endif %}
-{% if config.default_stylesheet.1 != '' %}<link rel="stylesheet" type="text/css" id="stylesheet" href="{{ config.uri_stylesheets }}{{ config.default_stylesheet.1 }}">{% endif %}
-{% if config.font_awesome %}<link rel="stylesheet" href="{{ config.root }}{{ config.font_awesome_css }}">{% endif %}
-{% if config.country_flags_condensed %}<link rel="stylesheet" href="{{ config.root }}{{ config.country_flags_condensed_css }}">{% endif %}
+{% if config.default_stylesheet.1 != '' %}<link rel="stylesheet" type="text/css" id="stylesheet" href="{{ config.uri_stylesheets }}{{ config.default_stylesheet.1 }}?v={{ config.resource_version }}">{% endif %}
+{% if config.font_awesome %}<link rel="stylesheet" href="{{ config.root }}{{ config.font_awesome_css }}?v={{ config.resource_version }}">{% endif %}
+{% if config.country_flags_condensed %}<link rel="stylesheet" href="{{ config.root }}{{ config.country_flags_condensed_css }}?v={{ config.resource_version }}">{% endif %}
 <script type="text/javascript">
 	var configRoot="{{ config.root }}";
 	var inMod = {% if mod %} true {% else %} false {% endif %};
 	var modRoot = "{{ config.root }}" + (inMod ? "mod.php?/" : "");
 </script>
 {% if not nojavascript %}
-	<script type="text/javascript" src="{{ config.url_javascript }}?v={{ config.resource_version }}"></script>
+	<script type="text/javascript" src="{{ config.url_javascript }}?v={{ config.resource_version }} data-resource-version="{{ config.resource_version }}"></script>
 	{% if not config.additional_javascript_compile %}
 	{% for javascript in config.additional_javascript %}<script type="text/javascript" src="{{ config.additional_javascript_url }}{{ javascript }}?v={{ config.resource_version }}"></script>{% endfor %}
 	{% endif %}
 	{% if mod %}
-	<script type="text/javascript" src="/js/mod/mod_snippets.js"></script>
+	<script type="text/javascript" src="/js/mod/mod_snippets.js?v={{ config.resource_version }}"></script>
 	{% endif %}
 {% endif %}
 {% if config.captcha.provider == 'recaptcha' %}<script src="//www.recaptcha.net/recaptcha/api.js"></script>
diff --git a/templates/main.js b/templates/main.js
index 96d2fb3f..5e498eda 100644
--- a/templates/main.js
+++ b/templates/main.js
@@ -141,7 +141,33 @@ function changeStyle(styleName, link) {
 		x.appendChild(s);
 	}
 
-	document.getElementById('stylesheet').href = styles[styleName];
+	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';
+	}
+
+	let style = styles[styleName];
+	if (style !== '') {
+		// Add the version of the resource if the style is not the embedded one.
+		style += `?v=${resourceVersion}`;
+	}
+
+	document.getElementById('stylesheet').href = style;
 	selectedstyle = styleName;
 
 	if (document.getElementsByClassName('styles').length != 0) {
@@ -162,6 +188,7 @@ function changeStyle(styleName, link) {
 
 
 {% endverbatim %}
+var resourceVersion = document.currentScript.getAttribute('data-resource-version');
 {% if config.stylesheets_board %}
 	{% verbatim %}
 
diff --git a/templates/mod/ban_list.html b/templates/mod/ban_list.html
index f039350b..ee8753f7 100644
--- a/templates/mod/ban_list.html
+++ b/templates/mod/ban_list.html
@@ -1,11 +1,11 @@
-<script src='main.js?v={{ config.resource_version }}'></script>
-<script src='js/jquery.min.js'></script>
-<script src='js/mobile-style.js'></script>
-<script src='js/strftime.min.js'></script>
-<script src='js/longtable/longtable.js'></script>
-<script src='js/mod/ban-list.js'></script>
-<link rel='stylesheet' href='stylesheets/longtable/longtable.css'>
-<link rel='stylesheet' href='stylesheets/mod/ban-list.css'>
+<script src='main.js?v={{ config.resource_version }}' data-resource-version="{{ config.resource_version }}"></script>
+<script src='js/jquery.min.js?v={{ config.resource_version }}'></script>
+<script src='js/mobile-style.js?v={{ config.resource_version }}'></script>
+<script src='js/strftime.min.js?v={{ config.resource_version }}'></script>
+<script src='js/longtable/longtable.js?v={{ config.resource_version }}'></script>
+<script src='js/mod/ban-list.js?v={{ config.resource_version }}'></script>
+<link rel='stylesheet' href='stylesheets/longtable/longtable.css?v={{ config.resource_version }}'>
+<link rel='stylesheet' href='stylesheets/mod/ban-list.css?v={{ config.resource_version }}'>
 
 	<form action="?/bans" method="post" class="banform">
 		{% if token %}
@@ -32,7 +32,7 @@
 		</table>
 
 
-		
+
 	</form>
 {% if token_json %}
 	<script>$(function(){ banlist_init("{{ token_json }}", {{ boards }}); });</script>
diff --git a/templates/mod/pages.html b/templates/mod/pages.html
index c2395c02..f6be9487 100644
--- a/templates/mod/pages.html
+++ b/templates/mod/pages.html
@@ -1,4 +1,4 @@
-<script type="text/javascript" src="js/jquery.min.js"></script>
+<script type="text/javascript" src="js/jquery.min.js?v={{ config.resource_version }}"></script>
 <div style="text-align:center">
 <p class="unimportant">
 {% if board %}
@@ -27,7 +27,7 @@
 <table>
 <tr><th>{% trans %}URL{% endtrans %}</th><th>{% trans %}Title{% endtrans %}</th></tr>
 <tr><td><input type="text" name="page"></td><td><input type="text" name="title"></td>
-</table>	
+</table>
 <input type="submit" value="{% trans %}Create{% endtrans %}">
 </form>
 
diff --git a/templates/mod/recent_posts.html b/templates/mod/recent_posts.html
index d5e5d83c..55f854b5 100644
--- a/templates/mod/recent_posts.html
+++ b/templates/mod/recent_posts.html
@@ -1,4 +1,4 @@
-<script src="{{ config.additional_javascript_url }}js/mod/recent-posts.js"></script>
+<script src="{{ config.additional_javascript_url }}js/mod/recent-posts.js?v={{ config.resource_version }}"></script>
 {% if not posts|length %}
 	<p style="text-align:center" class="unimportant">({% trans 'There are no active posts.' %})</p>
 {% else %}
diff --git a/templates/themes/recent/recent.html b/templates/themes/recent/recent.html
index 2a4510f8..9fce7ab8 100644
--- a/templates/themes/recent/recent.html
+++ b/templates/themes/recent/recent.html
@@ -4,11 +4,11 @@
 <head>
         <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
 	<title>{{ settings.title }}</title>
-	<link rel="stylesheet" media="screen" href="{{ config.url_stylesheet }}"/>
-	<link rel="stylesheet" media="screen" href="{{ config.root }}{{ settings.css }}"/>
+	<link rel="stylesheet" media="screen" href="{{ config.url_stylesheet }}?v={{ config.resource_version }}"/>
+	<link rel="stylesheet" media="screen" href="{{ config.root }}{{ settings.css }}?v={{ config.resource_version }}"/>
 	{% if config.url_favicon %}<link rel="shortcut icon" href="{{ config.url_favicon }}" />{% endif %}
-	{% if config.default_stylesheet.1 != '' %}<link rel="stylesheet" type="text/css" id="stylesheet" href="{{ config.uri_stylesheets }}{{ config.default_stylesheet.1 }}">{% endif %}
-	{% if config.font_awesome %}<link rel="stylesheet" href="{{ config.root }}{{ config.font_awesome_css }}">{% endif %}
+	{% if config.default_stylesheet.1 != '' %}<link rel="stylesheet" type="text/css" id="stylesheet" href="{{ config.uri_stylesheets }}{{ config.default_stylesheet.1 }}?v={{ config.resource_version }}">{% endif %}
+	{% if config.font_awesome %}<link rel="stylesheet" href="{{ config.root }}{{ config.font_awesome_css }}?v={{ config.resource_version }}">{% endif %}
 	{% include 'header.html' %}
 </head>
 <body>
@@ -17,7 +17,7 @@
 		<h1>{{ settings.title }}</h1>
 		<div class="subtitle">{{ settings.subtitle }}</div>
 	</header>
-	
+
 	<div class="box-wrap">
 		<div class="box left">
 			<h2>Recent Images</h2>
@@ -36,7 +36,7 @@
 			<ul>
 				{% for post in recent_posts %}
 					<li>
-						<strong>{{ post.board_name }}</strong>: 
+						<strong>{{ post.board_name }}</strong>:
 						<a href="{{ post.link }}">
 							{{ post.snippet }}
 						</a>
@@ -53,11 +53,11 @@
 			</ul>
 		</div>
 	</div>
-	
+
 	<hr/>
 
 	{% include 'footer.html' %}
-	
+
 </body>
 </html>
 {% endapply %}