Make it possible to highlight VIPs, admin and staff differently

index.html

@@ -50,6 +50,9 @@ <h3>Style</h3>
           <div>Separator<br/><input type="color" id="settings-separator-color"/></div>
           <div>Message text<br/><input type="color" id="settings-text-color"/></div>
           <div>Username<br/><input type="color" id="settings-user-color"/></div>
+          <div>VIP<br/><input type="color" id="settings-vip-color"/></div>
+          <div>Staff<br/><input type="color" id="settings-staff-color"/></div>
+          <div>Admin<br/><input type="color" id="settings-admin-color"/></div>
           <div>Moderator<br/><input type="color" id="settings-moderator-color"/></div>
           <div>Channel highlight<br/><input type="color" id="settings-channel-color"/></div>
           <div>Notice<br/><input type="color" id="settings-notice-color"/></div>
@@ -232,6 +235,9 @@ <h3>Hotkeys overview</h3>
   'separator-color': '#444444',
   'text-color': '#eeeeee',
   'user-color': '#008000',
+  'vip-color': '#4646f8',
+  'admin-color': '#a970ff',
+  'staff-color': '#a970ff',
   'moderator-color': '#8383f9',
   'channel-color': '#0d86ff',
   'notice-color': '#eeeeee',

main.js

@@ -342,7 +342,10 @@ if (document.fullscreenEnabled && Settings.get('support-fullscreen')) {
 		'moderator': "#8383f9",
 		'channel': "#0d86ff",
 		'notice': "#eeeeee",
-		'highlight': "#731180"
+		'highlight': "#731180",
+		'vip': '#4686f8',
+		'admin': '#a970ff',
+		'staff': '#a970ff'
 	}, {
 		'name': "bright",
 		'background': "#eeeeee",
@@ -353,7 +356,10 @@ if (document.fullscreenEnabled && Settings.get('support-fullscreen')) {
 		'moderator': "#8383f9",
 		'channel': "#0d86ff",
 		'notice': "#111111",
-		'highlight': "#731180"
+		'highlight': "#731180",
+		'vip': '#4686f8',
+		'admin': '#a970ff',
+		'staff': '#a970ff'
 	}, {
 		'name': 'LRR',
 		'background': "#202020",
@@ -364,10 +370,13 @@ if (document.fullscreenEnabled && Settings.get('support-fullscreen')) {
 		'moderator': "#f15a24",
 		'channel': "#f15a24",
 		'notice': "#d2d2d2",
-		'highlight': "#e1480f"
+		'highlight': "#e1480f",
+		'vip': '#aaf2a6',
+		'admin': '#a970ff',
+		'staff': '#a970ff'
 	}
 ].forEach(createStylePreview);
-var colorFields = ['background', 'odd-background', 'separator', 'text', 'user', 'moderator', 'channel', 'notice', 'highlight'];
+var colorFields = ['background', 'odd-background', 'separator', 'text', 'user', 'moderator', 'channel', 'notice', 'highlight', 'vip', 'admin', 'staff'];
 var customStyleValues = {
 	'name': "custom"
 };
@@ -838,6 +847,15 @@ function createChatLine(userstate, message) {
 	updateTimestamp(chatTimestamp);
 	chatLine.appendChild(chatTimestamp);
 	chatName.className = 'chat-user';
+	if (userstate.badges?.vip) {
+		chatName.classList.add('vip');
+	}
+	if (userstate.badges?.admin) {
+		chatName.classList.add('admin');
+	}
+	if (userstate.badges?.staff) {
+		chatName.classList.add('staff');
+	}
 	if (userstate.mod) {
 		chatName.classList.add('moderator');
 	}

style.css

@@ -104,6 +104,21 @@ body.reverse-order #chat {
   font-weight: 700;
 }
 
+#chat .chat-user.vip {
+  color: #4686f8;
+  color: var(--vip-color);
+}
+
+#chat .chat-user.admin {
+  color: #a970ff;
+  color: var(--admin-color);
+}
+
+#chat .chat-user.staff {
+  color: #a970ff;
+  color: var(--staff-color);
+}
+
 #chat .chat-user.moderator {
   color: #8383f9;
   color: var(--moderator-color);