Give Chat Names Different Colors

Turn on one general color option, then allow the Dock to display those colors.

Quick setup

Both controls are required: choose a name-color option in Message - Styling, then turn on Color names if color info available in Message - Visibility.
  1. Open the Social Stream Ninja extension or desktop app settings.
  2. Expand Message - Styling.
  3. Turn on Add a random color to uncolored names. This is the recommended choice because it keeps colors supplied by the chat platform and fills in missing ones.
  4. Expand Message - Visibility.
  5. Turn on Color names if color info available. This adds &color to the Dock URL.
  6. Use the updated Dock link. Existing Dock or OBS browser-source URLs also work if you add &color and refresh them.
Social Stream Ninja settings menu showing the Message Visibility and Message Styling sections next to each other
Open Message - Styling for the general color choice and Message - Visibility for the Dock display toggle.

Choose the color behavior

Use one main color option at a time so the result is predictable.

General setting Result Best for
Add a random color to uncolored names Keeps platform-provided name colors and assigns a consistent color when one is missing. Most users
Override all name colors with a random color Assigns every username a consistent generated color, replacing colors from the platform. A fully mixed-color chat
Set username color to match the site's branding Uses the platform color, such as YouTube red or Twitch purple. People on the same platform share a color. Quickly identifying platforms
Lighten and desaturate name colors Adjusts the selected or supplied colors so they are easier to read on dark backgrounds. Dark Dock themes
Do not color names based on member status Stops membership or subscriber status from choosing the name color. Keeping your chosen palette consistent

Max number of random colors controls the palette size. A smaller value repeats fewer colors. Seed value changes which generated color each name receives.

Real Twitch chat showing usernames in clearly different colors
Real Twitch chat showing source-provided username colors. With the Dock color toggle on, Social Stream Ninja preserves these nameColor values.

If the names are still one color

  1. Confirm one color option is on under Message - Styling.
  2. Confirm Color names if color info available is on under Message - Visibility.
  3. Check that the Dock URL contains &color or &colorednames.
  4. Refresh any Dock tab or OBS Browser Source that was already open.
  5. Check your custom CSS for a rule that forces every .hl-name to the same color.

More control with CSS

Add CSS through the Dock settings, the &css= or &b64css= URL option, or OBS Browser Source custom CSS. Use !important when overriding a name color supplied by a platform.

Use one color for every name

.hl-name {
  color: #ffd166 !important;
}

Choose colors by platform

.highlight-chat[data-source-type="youtube"] .hl-name {
  color: #ff5a5f !important;
}

.highlight-chat[data-source-type="twitch"] .hl-name {
  color: #b794f4 !important;
}

.highlight-chat[data-source-type="kick"] .hl-name {
  color: #53fc18 !important;
}

Highlight moderators and VIPs

.highlight-chat.mod .hl-name {
  color: #5eead4 !important;
}

.highlight-chat.vip .hl-name {
  color: #f472b6 !important;
}

CSS can reliably target a platform or role, but the standard Dock does not add a username as a CSS class or attribute. For fixed per-person color rules, use the built-in generated colors or a custom overlay that maps usernames to colors in JavaScript.