Creepybits-ComfyUI-Creepy_nodes/web/js/Creepynodes_appearance.js

import { app } from "../../../../scripts/app.js";

// Extension to apply custom colors to all StarNodes
app.registerExtension({
    name: "Creepynodes.appearance",
    async setup() {
        // This runs once when the extension is loaded
        console.log("Creepynodes appearance extension setup");
    },

    async beforeRegisterNodeDef(nodeType, nodeData) {
        // Check if this is a StarNode by looking at the category
        if (nodeData.category && nodeData.category.startsWith("Creepybits")) {
            // Define our colors
            const backgroundColor = "#0b500b";  // Purple background
            const titleColor = "#500b50";       // Dark blue title
            const textColor = "#500b50";        // Dark blue text (was white)

            // Store the original onNodeCreated function
            const onNodeCreated = nodeType.prototype.onNodeCreated;

            // Override the onNodeCreated function
            nodeType.prototype.onNodeCreated = function() {
                // Call the original onNodeCreated if it exists
                if (onNodeCreated) {
                    onNodeCreated.apply(this, arguments);
                }

                // Apply custom colors
                this.bgcolor = backgroundColor;
                this.color = textColor;

                // Store the original drawTitleBar function
                const originalDrawTitleBar = this.drawTitleBar;
                // Newer ComfyUI frontends no longer have drawTitleBar; the colors above still apply.
                if (typeof originalDrawTitleBar !== "function") {
                    return;
                }

                // Override the drawTitleBar function to use our custom title color
                this.drawTitleBar = function(ctx, title_height) {
                    // Call the original function first
                    originalDrawTitleBar.call(this, ctx, title_height);

                    // Draw the title text with our custom color
                    if (this.flags.collapsed) {
                        return;
                    }

                    ctx.font = this.title_font || LiteGraph.DEFAULT_TITLE_FONT;
                    const title = this.getTitle();
                    if (title) {
                        // Save context
                        ctx.save();
                        // Set our custom title color
                        ctx.fillStyle = titleColor;
                        // Draw the title text
                        ctx.fillText(title, 10, title_height * 0.75);
                        // Restore context
                        ctx.restore();
                    }
                };
            };
        }
    }
});