New: Color with command! 🦄

.gitignore

@@ -1 +1,2 @@
-/.vscode
+/.vscode
+/test.js

StreamElements/chat.js

@@ -2,6 +2,7 @@
 let cap = 250;
 let ban = "";
 let cmd = true;
+let ccd = true;
 let sts = false;
 let clr = "#fff";
 
@@ -10,6 +11,7 @@ window.addEventListener("onWidgetLoad", function (obj) {
   cap = fieldData.CharLimit;
   ban = fieldData.HiddenAccounts;
   cmd = fieldData.HideCommands;
+  ccd = fieldData.ColorCommands;
   sts = fieldData.StaticColor;
   clr = fieldData.FontColor;
 });
@@ -41,27 +43,34 @@ window.addEventListener("onEventReceived", function (obj) {
   div = document.createElement("div");
   div.className = "message";
   div.setAttribute("data-id", mid);
-  div.innerHTML = attachEmote(bod, emo);
+
+  // Apply static color if enabled, otherwise apply user chat color.
+  sts ? (div.style.color = clr) : (div.style.color = col);
+
+  // if the message has a color prefix and custom colors are enabled, apply the color.
+  if (ccd && getColorCommand(bod)) div.style.color = getColorCommand(bod).color;
+  if (ccd && getColorCommand(bod))
+    div.innerHTML = attachEmote(getColorCommand(bod).message, emo);
+  // if not, don't apply any colours.
+  else div.innerHTML = attachEmote(bod, emo);
+
   container.append(div);
   const el = document.querySelector(`[data-id="${mid}"]`);
 
-  (bod.length > cap) ? el.remove() : null;
+  bod.length > cap ? el.remove() : null;
 
-  // Speed calculation
+  // Speed calculation.
   let speed = 25 - ((bod.length - 10) / 290) * 10 + "s";
 
-  // Random Height
+  // Random Height.
   margin = Math.floor(
     Math.random() * (window.innerHeight - el.offsetHeight / 1.3 - 0)
   );
 
-  // Apply animation
+  // Apply animation.
   el.style.animation = `LRMove ${speed} linear, RLMove ${speed} linear ${speed} forwards`;
   el.style.width = window.innerWidth;
   el.style.bottom = `${margin}px`;
-
-  // Apply static color if enabled, otherwise apply user chat color
-  sts ? (el.style.color = clr) : (el.style.color = col);
 });
 
 /**
@@ -82,6 +91,23 @@ function attachEmote(message, emotes) {
   return message;
 }
 
+/**
+ * Takes a string, checks if it starts with a command prefix, and if it does, it returns an object with the
+ * color and the message seperated.
+ * @param body - The message body
+ * @returns An object with two properties: color and message.
+ */
+function getColorCommand(body) {
+  if (body.startsWith("#")) {
+    return {
+      color: body.split(" ")[0].substring(1),
+      message: body.substring(body.split(" ")[0].length + 1),
+    };
+  } else {
+    return false;
+  }
+}
+
 /**
  * Replaces the characters &, <, >, ", and ' with their HTML entity equivalents to prevent XSS attacks.
  * @param unsafe - The string to be escaped.
@@ -95,5 +121,3 @@ function escapeHtml(unsafe) {
     .replace(/"/g, "&quot;")
     .replace(/'/g, "&#039;");
 }
-
-//

StreamElements/chat.json

@@ -64,6 +64,12 @@
       "value": "rgba(255,255,255,1)",
       "group": "Typography"
     },
+    "ColorCommands": {
+      "type": "checkbox",
+      "label": "Let users choose their own message color by #color commands.",
+      "value": true,
+      "group": "Typography"
+    },
     "TextShadow": {
       "type": "text",
       "label": "Text shadow",