Dar cores diferentes aos nomes do chat

Escolha como o dock deve exibir ou gerar cores dos nomes de usuário.

Configuração rápida

Nenhuma configuração global é necessária: escolha uma opção na seção Cores dos nomes de usuário .
  1. Abra as configurações da extensão ou do aplicativo de desktop Social Stream Ninja.
  2. Em Overlay principal de chat e dock de controle, expanda Cores dos nomes de usuário.
  3. Ative Gerar cores para nomes sem cor. Isso mantém as cores fornecidas pela plataforma e preenche as que faltam.
  4. Use o link atualizado do dock. URLs existentes do dock ou de fontes de navegador do OBS também funcionam se você adicionar &randomcolor e atualizá-las.

Escolher o comportamento das cores

Use apenas uma opção principal de cor por vez para ter um resultado previsível.

Opção do dock Resultado Ideal para
Gerar cores para nomes sem cor Mantém as cores de nomes da plataforma e atribui uma cor consistente quando falta. A maioria dos usuários
Gerar cores para todos os nomes Atribui a cada nome de usuário uma cor gerada consistente, substituindo as cores da plataforma. Um chat totalmente multicolorido
Usar cores de nomes fornecidas pela fonte Mostra uma cor apenas quando a plataforma do chat fornece uma. Plataformas como Twitch que fornecem cores de nomes de usuário

As cores geradas são estáveis: o dock calcula um hash do ID, nome de usuário ou nome visível para que a mesma pessoa mantenha a mesma cor. As configurações globais de cor continuam disponíveis quando é necessário adicionar cores aos dados enviados e a outras superfícies.

Chat real da Twitch com nomes de usuário em cores claramente diferentes
Chat real da Twitch com cores de nomes fornecidas pela fonte. Com a opção de cor do dock ativada, o Social Stream Ninja preserva esses nameColor valores.

Se os nomes continuarem da mesma cor

  1. Confirme que uma opção esteja ativada na seção Cores dos nomes de usuário .
  2. Para plataformas sem cores de nomes, escolha Gerar cores para nomes sem cor.
  3. Confira se a URL do dock contém &color, &randomcolor, ou &randomcolorall.
  4. Atualize as abas do dock ou fontes de navegador do OBS que já estavam abertas.
  5. Confira se o CSS personalizado tem uma regra que force todos os elementos .hl-name tenham a mesma cor.

Mais controle com CSS

Adicione CSS nas configurações do dock, na opção &css= ou &b64css= de URL ou no CSS personalizado da fonte de navegador do OBS. Use !important ao substituir uma cor de nome fornecida pela plataforma.

Usar uma cor para todos os nomes

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

Escolher cores por plataforma

.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;
}

Destacar moderadores e VIPs

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

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

O CSS consegue selecionar uma plataforma ou função de forma confiável, mas o dock padrão não adiciona o nome de usuário como classe ou atributo CSS. Para regras fixas de cor por pessoa, use as cores geradas integradas ou um overlay personalizado que associe nomes de usuário a cores em JavaScript.