YouTube Chat Color Names

Make YouTube Chat Color Names

You will need to install an extension such as Tampermonkey, Greasemonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey to install this script.

You will need to install an extension such as Tampermonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Userscripts to install this script.

You will need to install an extension such as Tampermonkey to install this script.

You will need to install a user script manager extension to install this script.

(I already have a user script manager, let me install it!)

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

(I already have a user style manager, let me install it!)

/* ==UserStyle==
@name           YouTube Chat Color Names
@version        0.1.0
@namespace      github.com/cyfung1031
@license        MIT
@description    Make YouTube Chat Color Names
@author         CY Fung
@preprocessor   stylus


==/UserStyle== */

v-transparent = 1.0;

dummy()
    // dummy
    border: 0;


        
cc(colorCode)
    transparentify(colorCode, v-transparent)

    
myChars = (A B C D E F G H I J K L M N O P Q R S T U V W X Y Z a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9)


    
    $colorList =    #FF0000, #00FF00, #B22222,
                    #FF7F50, #9ACD32, #FF4500,
                    #2E8B57, #DAA520, #D2691E,
                    #5F9EA0, #1E90FF, #FF69B4,
                    #8A2BE2, #00FF7F    

gen1()
    
    for c1, i in myChars
        d1 = '&:has(#img[src*="m/%s"])' % c1
        {d1}
            --author-color-x 'var(--atine-color-%s)' % (i+1+1000)
            
    for c1, i in myChars
        d1 = '&:has(#img[src*="%s="])' % c1
        {d1}
            --author-color-x 'var(--atine-color-%s)' % (i+1+1000)
            

$nLen = length(myChars)
$kLen = $nLen + 2
             
gen2()
        
    for $i in 1..$kLen
        $k = $i - 1
        $n = length($colorList)
        $color = $colorList[$k % $n]  // Reuse colors cyclically
        
        {"--atine-color-" + ($i+1000)} cc($color)
           
            
@-moz-document url-prefix("https://www.youtube.com/live_chat") {

    
    html {
        gen2()
        --author-color-1-default: "var(--atine-color-%s)" % (1000 + $kLen);
    }


    .yt-live-chat-item-list-renderer {
        gen1()
        --author-color-x: var(--author-color-1-default);
    }

    .yt-live-chat-item-list-renderer #author-name.style-scope.yt-live-chat-author-chip {
        color: var(--author-color-x);   
    }

    
}