채팅 이름에 다른 색상 적용

도크에서 사용자 이름 색상을 표시하거나 생성하는 방식을 선택하세요.

빠른 설정

전역 설정이 필요하지 않습니다: 도크의 다음 항목에서 옵션 하나를 선택하세요: 사용자 이름 색상 섹션입니다.
  1. Social Stream Ninja 확장 프로그램 또는 데스크톱 앱 설정을 여세요.
  2. 다음 항목 아래에서: 기본 채팅 오버레이 및 제어 도크에서 다음을 펼치세요: 사용자 이름 색상.
  3. 켜기: 색상 없는 이름의 색상 생성를 선택하세요. 채팅 플랫폼이 제공하는 색상은 유지하고 없는 색상만 채웁니다.
  4. 업데이트한 도크 링크를 사용하세요. 기존 도크 또는 OBS 브라우저 소스 URL에도 다음을 추가하면 작동합니다: &randomcolor 를 추가하고 새로고침하세요.

색상 동작 선택

결과를 예측할 수 있도록 기본 색상 옵션은 한 번에 하나만 사용하세요.

도크 옵션 결과 적합한 대상
색상 없는 이름의 색상 생성 플랫폼에서 제공한 이름 색상을 유지하고 색상이 없으면 일관된 색상을 지정합니다. 대부분의 사용자
모든 이름의 색상 생성 플랫폼 색상을 대체하여 모든 사용자 이름에 일관되게 생성된 색상을 지정합니다. 모든 이름에 다양한 색상을 쓰는 채팅
소스에서 제공하는 사용자 이름 색상 사용 채팅 플랫폼이 색상을 제공할 때만 표시합니다. 사용자 이름 색상을 제공하는 Twitch 등의 플랫폼

생성된 색상은 일정하게 유지됩니다. 도크는 사용자 ID, 사용자 이름 또는 표시 이름을 해시 처리하여 같은 사람이 같은 색상을 유지하도록 합니다. 전송 페이로드와 다른 화면에도 색상을 추가해야 할 때는 전역 색상 설정을 계속 사용할 수 있습니다.

사용자 이름이 서로 뚜렷이 다른 색상으로 표시된 실제 Twitch 채팅
소스가 제공하는 사용자 이름 색상이 표시된 실제 Twitch 채팅입니다. 도크 색상 스위치를 켜면 Social Stream Ninja가 다음 값을 유지합니다: nameColor 값입니다.

이름이 여전히 한 가지 색상인 경우

  1. 도크의 다음 항목에서 옵션 하나가 켜져 있는지 확인하세요: 사용자 이름 색상 섹션입니다.
  2. 사용자 이름 색상을 제공하지 않는 플랫폼에는 다음을 선택하세요: 색상 없는 이름의 색상 생성.
  3. 도크 URL에 다음이 있는지 확인하세요: &color, &randomcolor, 또는 &randomcolorall.
  4. 이미 열려 있던 도크 탭이나 OBS 브라우저 소스를 새로고침하세요.
  5. 사용자 지정 CSS에서 모든 .hl-name 을 같은 색상으로 강제하는 규칙이 있는지 확인하세요.

CSS로 더 세밀하게 제어

도크 설정, 다음 &css= 또는 &b64css= URL 옵션 또는 OBS 브라우저 소스 사용자 지정 CSS를 통해 CSS를 추가하세요. 다음을 사용하세요: !important 를 플랫폼에서 제공한 이름 색상을 덮어쓸 때 사용하세요.

모든 이름에 같은 색상 사용

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

플랫폼별 색상 선택

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

관리자 및 VIP 강조

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

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

CSS는 플랫폼이나 역할을 안정적으로 지정할 수 있지만 기본 도크는 사용자 이름을 CSS 클래스나 속성으로 추가하지 않습니다. 사람별 고정 색상 규칙에는 내장 생성 색상 또는 다음을 사용하세요: 사용자 지정 오버레이 에서 JavaScript로 사용자 이름을 색상에 매핑하세요.