diff --git a/public/src/client/account/settings.js b/public/src/client/account/settings.js
index 758bf88c0a..feac619289 100644
--- a/public/src/client/account/settings.js
+++ b/public/src/client/account/settings.js
@@ -2,8 +2,8 @@
 
 
 define('forum/account/settings', [
-	'forum/account/header', 'components', 'translator', 'api', 'alerts',
-], function (header, components, translator, api, alerts) {
+	'forum/account/header', 'components', 'api', 'alerts', 'hooks',
+], function (header, components, api, alerts, hooks) {
 	const AccountSettings = {};
 
 	// If page skin is changed but not saved, switch the skin back
@@ -116,6 +116,7 @@ define('forum/account/settings', [
 
 		// Stop execution if skin didn't change
 		if (skinName === currentSkin) {
+			hooks.fire('action:skin.change', { skin: skinName, currentSkin });
 			return;
 		}
 		const langDir = $('html').attr('data-dir');
@@ -132,10 +133,19 @@ define('forum/account/settings', [
 			// Update body class with proper skin name
 			$('body').removeClass(currentSkinClassName.join(' '));
 			$('body').addClass('skin-' + (skinName || 'noskin'));
+			hooks.fire('action:skin.change', { skin: skinName, currentSkin });
 		};
 
 		document.head.appendChild(linkEl);
 	}
 
+	AccountSettings.changeSkin = async function (skin) {
+		if (app.user.uid) {
+			await api.put(`/users/${app.user.uid}/settings`, { settings: { bootswatchSkin: skin } });
+		}
+		config.bootswatchSkin = skin;
+		reskin(skin);
+	};
+
 	return AccountSettings;
 });
diff --git a/src/middleware/header.js b/src/middleware/header.js
index 1086318d57..8da7f157a0 100644
--- a/src/middleware/header.js
+++ b/src/middleware/header.js
@@ -151,7 +151,8 @@ middleware.renderHeader = async function renderHeader(req, res, data) {
 	const hookReturn = await plugins.hooks.fire('filter:middleware.renderHeader', {
 		req: req,
 		res: res,
-		templateValues: templateValues,
+		templateValues: templateValues, // TODO: deprecate
+		templateData: templateValues,
 		data: data,
 	});
 
@@ -234,7 +235,8 @@ middleware.renderFooter = async function renderFooter(req, res, templateValues)
 	const data = await plugins.hooks.fire('filter:middleware.renderFooter', {
 		req: req,
 		res: res,
-		templateValues: templateValues,
+		templateValues: templateValues, // TODO: deprecate
+		templateData: templateValues,
 	});
 
 	const scripts = await plugins.hooks.fire('filter:scripts.get', []);