Color mastodon toots.js

// ==UserScript==
// @name     color mastodon toots
// @version  1.1.420
// @author   Kyuminn
// @description This script allows users to color mastodon's toots of specific users. Read the comments for more details about how to opperate the script. You can also contact me on mastodon at spiderLilith@octodon.social
// @homepageURL https://gist.github.com/LilithL/84bf9a9f5495a368ea26f2ec9215937c
// @run-at   document-idle
// @grant    none
// @match    https://octodon.social/*
// @match    https://*.octodon.social/*
// @match    https://eldritch.cafe/*
// ==/UserScript==


//Change the parameters here, you'll have to use the username for people you want to color that are on the same instance as you
//or use username@instance.url for those who are on another instance. 
//You can group multiple username to use one color.
//Use the stroke parameter to outline the text, usefull if the color is too dark and make text unreadable.
var COLORS = [
    {user: ["Example", "Example@Example.com"], color:"white", stroke:undefined},
    {user: ["Example2", "Example2@Example.com"], color:"blue", stroke:"white 0.05em"},
];



function colorToots(){
    
    for(var i = 0; i < COLORS.length; i++){
        COLORS[i].user.forEach(userName => {
            //Detect if we're on mastodon or glitch-soc web client
            if(document.querySelector("[data-status-by]") != null){
                document.querySelectorAll("[data-status-by=\"@"+userName+"\"]").forEach(pElem => {
                    pElem.childNodes.forEach(elem => {
                        if(elem.classList.contains("status__content")){
                            elem.childNodes.forEach(textElem => {
                                if(textElem.classList != undefined){
                                    if(textElem.classList.contains("status__content__text") || textElem.classList.contains("status__content__spoiler")){
                                        textElem.style.color = COLORS[i].color;
                                        if(COLORS[i].stroke){
                                            textElem.style.webkitTextStroke = COLORS[i].stroke;
                                        };
                                    };
                                };
                            });
                        };                        
                    })
                });
            }else{
                document.querySelectorAll("[title=\""+userName+"\"].status__display-name").forEach(tootInfo => {
                    var tootToEdit = tootInfo.parentNode.parentNode.parentNode;
                    tootToEdit.childNodes.forEach(pElem => {
                        if(pElem.classList.contains("status")){
                            pElem.childNodes.forEach(elem => {
                                if(elem.classList.contains("status__content")){
                                    elem.childNodes.forEach(textElem => {
                                        if(textElem.classList != undefined){
                                            if(textElem.classList.contains("status__content__text")){
                                                textElem.style.color = COLORS[i].color;
                                                if(COLORS[i].stroke){
                                                    textElem.style.webkitTextStroke = COLORS[i].stroke;
                                                };
                                            };
                                        };
                                    });
                                };
                            });
                        };
                    });
                });
            };
        });
    };
};

var colorObserver = new MutationObserver(colorToots);

//If performance issues are noted, comment the next line and uncomment the 4 other lines
colorObserver.observe(document.getElementsByClassName("columns-area")[0], {childList: true, subtree: true,});


//for(var i = 0; i < document.getElementsByClassName("item-list").length; i++){
//    colorObserver.observe(document.getElementsByClassName("item-list")[i], {
//        childList: true,
//    });
//}

colorToots();