Javascript to add color rotating rainbow border to home assistant cards.

Rainbow-HACards.js

setTimeout(function(){
    function getAllHaCards(root = document) {
        const haCards = [];
        const elements = root.querySelectorAll('*');
        
        elements.forEach(element => {
            if (element.shadowRoot) {
                haCards.push(...element.shadowRoot.querySelectorAll('ha-card'));
                haCards.push(...getAllHaCards(element.shadowRoot));
            }
        });
        return haCards;
    }

    const haCards = getAllHaCards();

    let hue = Math.floor(Math.random() * 360); // Start at a random hue

    function hsvToRgb(h, s, v) {
        let f = (n, k = (n + h / 60) % 6) => v - v * s * Math.max(Math.min(k, 4 - k, 1), 0);
        return [f(5), f(3), f(1)];
    }

    function rotateBorderColor() {
        hue = (hue + 1) % 360; // Increment hue, loop back to 0 after 360
        const [r, g, b] = hsvToRgb(hue, 1, 1).map(v => Math.round(v * 255));
        const color = `rgb(${r}, ${g}, ${b})`;
        haCards.forEach(card => {
            card.style.borderColor = color;
            card.style.transition = 'border-color 1s ease';
        });
    }

    setInterval(rotateBorderColor, 100); // Change color every 100ms
},3000)