diff --git a/public/src/admin/appearance/skins.js b/public/src/admin/appearance/skins.js
index 6e1d7d892e34..17cb426d6ee7 100644
--- a/public/src/admin/appearance/skins.js
+++ b/public/src/admin/appearance/skins.js
@@ -2,8 +2,8 @@
 
 
 define('admin/appearance/skins', [
-	'translator', 'alerts', 'settings', 'hooks',
-], function (translator, alerts, settings, hooks) {
+	'translator', 'alerts', 'settings', 'hooks', 'slugify',
+], function (translator, alerts, settings, hooks, slugify) {
 	const Skins = {};
 
 	Skins.init = function () {
@@ -14,9 +14,9 @@ define('admin/appearance/skins', [
 		}).done((bsData) => {
 			hooks.on('action:settings.sorted-list.loaded', (data) => {
 				if (data.hash === 'custom-skins') {
-					// lower case all custom-skin ids after load
+					// slugify all custom-skin ids after load
 					$('.custom-skin-settings [data-type="list"] [data-theme]').each((i, el) => {
-						$(el).attr('data-theme', $(el).attr('data-theme').toLowerCase());
+						$(el).attr('data-theme', slugify($(el).attr('data-theme')));
 					});
 					highlightSelectedTheme(app.config.bootswatchSkin);
 				}
diff --git a/src/meta/css.js b/src/meta/css.js
index 5b665f6d4351..4b7e99938353 100644
--- a/src/meta/css.js
+++ b/src/meta/css.js
@@ -260,7 +260,11 @@ CSS.getSkinSwitcherOptions = async function (uid) {
 		CSS.getCustomSkins(),
 	]);
 
-	const defaultSkin = _.capitalize(meta.config.bootswatchSkin) || '[[user:no-skin]]';
+	const foundCustom = customSkins.find(skin => skin.value === meta.config.bootswatchSkin);
+	const defaultSkin = foundCustom ?
+		foundCustom.name :
+		_.capitalize(meta.config.bootswatchSkin) || '[[user:no-skin]]';
+
 	const defaultSkins = [
 		{ name: `[[user:default, ${defaultSkin}]]`, value: '', selected: userSettings.bootswatchSkin === '' },
 		{ name: '[[user:no-skin]]', value: 'noskin', selected: userSettings.bootswatchSkin === 'noskin' },