cssRules unable to read multiple stylesheet classes properties values

With the help of this answer (https://stackoverflow.com/a/54759999/2217167) I can get all CSS classes background & color properties values. It works when I use internal css codes.

Now, I have more than 35 external css stylesheets. When I tried the below code, It returns first external CSS file output only. Unable to get remaining stylesheet background & color properties values. How do I access remaining stylesheets?

       $('#nightMode').on('click', function() {
            // var color = $("body").css("background");
            // var test = invertColor("#00a3fe"); 
            // console.log(color); 


            let styles = document.styleSheets;

            const rgbToHex = (rgbStr) => !rgbStr ? '':'#' + rgbStr.slice(4,-1).split(', ').map(x => (+x).toString(16).padStart(2, '0')).join('');

            let cssArr =[...styles[0].cssRules].map(x=> ({ class: x.selectorText, background: rgbToHex(x.style.background), color: rgbToHex(x.style.color)} ));


            let genCssStr='';
            genCssStr+= '<style> \n\n';
            cssArr.forEach(x=> genCssStr+=`${x.class}{\n` + 
              (x.background ? `  background:${invertColor(x.background)};\n` : '') + 
              (x.color ? `  color:${invertColor(x.color)};\n` : '') + `}\n\n`);
            genCssStr+= '</style>';

            console.log(styles);
            console.log(genCssStr);
            $(genCssStr).appendTo("body");
            // console.log("array:", JSON.stringify(cssArr));
            // console.log("text:\n\n", genCssStr);
        });

from cssRules unable to read multiple stylesheet classes properties values