Add support for importing old custom styles

index.html

@@ -58,7 +58,7 @@ <h3>Style</h3>
           <div>Notice<br/><input type="color" id="settings-notice-color"/></div>
           <div>Highlight<br/><input type="color" id="settings-highlight-color"/></div>
         </div>
-        <div id="settings-custom-style-exchange"><label>Custom style import/export: <input size="36" type="text" id="settings-custom-style-exchange-field"/></label></div>
+        <div id="settings-custom-style-exchange"><label>Custom style import/export: <input size="48" type="text" id="settings-custom-style-exchange-field"/></label></div>
         <div><label><input type="checkbox" id="settings-hide-cursor"/> Hide cursor when it hasn't moved for 4 seconds</label></div>
         <div><label><input type="checkbox" id="settings-adjust-page-title"/> Show channel name in page title</label></div>
         <div><label><input type="checkbox" id="settings-unread-counter-in-page-title"/> Show unread messages counter in page title</label></div>

main.js

@@ -395,14 +395,19 @@ colorFields.forEach(key => {
 });
 updateImportExport();
 ui.settings.style.custom.field.addEventListener('input', (e) => {
-	if (!/^[0-9a-zA-Z+#]{36}$/.test(e.target.value)) {
+	let code = e.target.value;
+	if (code.length == 36) { // Allow old exports to work
+		code += ['vip', 'admin', 'staff'].map((name) => HexCompressor.color2string(Settings.get(`${name}-color`))).join('');
+		console.log(code);
+	}
+	if (!/^[0-9a-zA-Z+#]{48}$/.test(code)) {
 		e.target.setCustomValidity('Invalid code');
 		e.target.reportValidity();
 		return;
 	}
 	e.target.setCustomValidity('');
 	colorFields.forEach((key, index) => {
-		var newColor = HexCompressor.string2color(e.target.value.substr(index * 4, 4));
+		var newColor = HexCompressor.string2color(code.substring(index * 4, (index * 4) + 4));
 		Settings.set(key + '-color', newColor);
 		document.getElementById('settings-' + key + '-color').value = newColor;
 	});