discussion LU Tag color coding userscript.

[Darkrift411]

Someone went and destroyed everything I liked about the LU, so I spent a few hours cracking the whip at chatGPT to help me write a css for Stylist to fix most of it. But... one thing was missing. Someone had suggested a userscript (greasemonkey or tampermonkey) to color code tags. I had thought of it before, but never took that step. Today was the day. Below is a chatGPT created and ME tested userscript that I am now running in tampermonkey on Brave. It recolors all of the nasty ass red tag bubbles to navy and then lets you add your own colors for specific tags. It takes... just a tad bit of coding knowledge to understand how to add new colors, but it is not that hard.

// ==UserScript==
// @name         Latest Updates - Color Coded Tags
// @namespace    local.latest-updates
// @version      1.0
// @description  Color-codes Latest Updates tags based on their text.
// @match        https://lewdcorner.com/latest-updatesv2*
// @grant        none
// ==/UserScript==

(() => {
    'use strict';

    /*
     * Edit these however you want.
     *
     * Format:
     * "exact-tag-text": {
     *     background: "#hex",
     *     color: "#hex"
     * }
     */
    const tagColors = {
        "animated": { background: "green"},
        "incest": { background: "magenta"},
        "female-protagonist": { background: "hotpink"}
    };

    function colorTags(root = document) {
        root.querySelectorAll(".lcCardHoverTags > span").forEach(tag => {
            const key = tag.textContent.trim().toLowerCase();
            const style = tagColors[key];
            tag.style.background="navy";

            if (!style) {
                return;
            }

            tag.style.setProperty(
                "background-color",
                style.background,
                "important"
            );

            tag.style.setProperty(
                "border-color",
                style.background,
                "important"
            );
        });
    }

    colorTags();

    /*
     * The page may replace or append cards without a full reload,
     * so recolor tags whenever its DOM changes.
     */
    let pending = false;

    const observer = new MutationObserver(() => {
        if (pending) {
            return;
        }

        pending = true;

        requestAnimationFrame(() => {
            pending = false;
            colorTags();
        });
    });

    observer.observe(document.body, {
        childList: true,
        subtree: true
    });
})();

To edit them, just change the tagname (must be exact) and the color you want. You can use VALID css "color words" or you can use hex color codes (#00ff00). You can add more if you wish, just watch that they all have a comma at the end except for the last one:

    const tagColors = {
        "animated": { background: "green"}, <----- comma here.
        "incest": { background: "magenta"}, <---- and comma here.
        "female-protagonist": { background: "hotpink"} <---- see? No comma here
    };

Not perfect, but... its a slight improvement until someone breaks it again.

You must be registered to see attachments