Override JS that sets background colour of categories

phenomlab

Is there any feasible way to override the JS that sets the background colour of categories? I'd like to style these differently, although no matter what I try, my code and styles are being overwritten. For example, this should work

$(document).ready(function() {
$(window).on('action:ajaxify.end', function(data) {
    $('li[component="category/topic"]').each(function(i) {
        var dataId2 = $(this).attr("data-cid");
        var color2 = $('[component="topic/labels"] a[href^="/category/"]', this).css("background-color");
        console.log(color2);
        //console.log("data-cid " + dataId + " is " + color);
        $('[data-cid="' + dataId2 + '"] [component="topic/labels"] a').attr("style", "border-color: " + color2 + " !important;color:" + color2 + " !important");

    });
});
});

Which it does for a split second but is then promptly overridden, but I can't see where from. Essentially, I want to get the background color that is in the database, and then use that to set the font and border colors

<baris>

Here is a rewritten version that should handle it better

$(document).ready(function() {
    $(window).on('action:topics.loaded', function(ev, { topics }) {
        topics.forEach(({ tid }) => {
            const $topicEl = $(`li[component="category/topic"][data-tid="${tid}"]`);
            const $categoryLabel = $topicEl.find('[component="topic/labels"] a[href^="/category/"]');
            const bgColor = $categoryLabel.css("background-color");
            const color = $categoryLabel.css("color");
    
            $categoryLabel.attr("style", `background-color: ${color}; border-color: ${bgColor}!important; color:${bgColor}`);
        });
    });
});

Result

It essentially swaps the background and color, keep in mind this mind end up unreadable on dark skins so you might have to modify it.

phenomlab

Odd. I have this "half working" by applying a short 500ms delay, and refactoring the code

$(document).ready(function() {
    $(window).on('action:ajaxify.end', function(data) {
        setTimeout(function() {
            $('li[component="category/topic"]').each(function(i) {
                var dataId2 = $(this).attr("data-cid");
                
                // Get the background and text color of the relevant category link
                var backgroundColor = $('a[href^="/category/"]', this).css("background-color");

                console.log("Background color of CID " + dataId2 + " is", backgroundColor);
                console.log("Text color of CID " + dataId2 + " is", textColor);
                
                // Apply the colors and unset the background color
                $('[data-cid="' + dataId2 + '"] a[href^="/category/"]').each(function() {
                    this.style.setProperty("color", backgroundColor, "important");  // Set text color
                    this.style.setProperty("border-color", backgroundColor, "important");  // Set border color
                    
                    // Unset the background color by removing the property
                    this.style.removeProperty("background-color");
                });
            });
        }, 500);  // Delay for any AJAX loading or other style applications
    });
});

Problem is, it doesn't execute for all categories.

<baris>

Here is a rewritten version that should handle it better

$(document).ready(function() {
    $(window).on('action:topics.loaded', function(ev, { topics }) {
        topics.forEach(({ tid }) => {
            const $topicEl = $(`li[component="category/topic"][data-tid="${tid}"]`);
            const $categoryLabel = $topicEl.find('[component="topic/labels"] a[href^="/category/"]');
            const bgColor = $categoryLabel.css("background-color");
            const color = $categoryLabel.css("color");
    
            $categoryLabel.attr("style", `background-color: ${color}; border-color: ${bgColor}!important; color:${bgColor}`);
        });
    });
});

Result

It essentially swaps the background and color, keep in mind this mind end up unreadable on dark skins so you might have to modify it.

phenomlab

@baris Thanks. This does seem to work, but the border in my case is not applied - it is for a nano second, then disappears.

$(document).ready(function() {
    $(window).on('action:topics.loaded', function(ev, { topics }) {
        topics.forEach(({ tid }) => {
            const $topicEl = $(`li[component="category/topic"][data-tid="${tid}"]`);
            const $categoryLabel = $topicEl.find('[component="topic/labels"] a[href^="/category/"]');
            const bgColor = $categoryLabel.css("background-color");
            const color = $categoryLabel.css("color");
    
            $categoryLabel.attr("style", `border-color: ${bgColor}!important; color:${bgColor}`);
        });
    });
});

<baris>

Your last line is missing the background-color,

$categoryLabel.attr("style", `background-color: ${color}; border-color: ${bgColor}!important; color:${bgColor}`);

phenomlab

@baris Yes, because all this does is set the background-color, which isn't what I want. The background-color should be removed and used for the border-color. From what I see on the existing code, there are inline styles for background-color and color, but no border exists.

As I mentioned, the style is being applied, but is then removed by another class or JS function.

phenomlab

This works as intended

$(document).ready(function() {
    $(window).on('action:topics.loaded', function(ev, { topics }) {
        topics.forEach(({ tid }) => {
            const $topicEl = $(`li[component="category/topic"][data-tid="${tid}"]`);
            const $categoryLabel = $topicEl.find('[component="topic/labels"] a[href^="/category/"]');
            const bgColor = $categoryLabel.css("background-color");
            const color = $categoryLabel.css("color");

            // Set a timeout to delay the execution of style changes
            setTimeout(() => {
                $categoryLabel.attr("style", `border-color: ${bgColor} !important; color: ${bgColor}`);
            }, 100); // Change to the desired timeout in milliseconds
        });
    });
});