javascript - Dynamically change css attribute works in regular browser mode but does not work in PWA mode

Question

I am using vue.js and cordova to build an application so it can be used on all platforms, Android, iPhone, PWA, and as regular web apps as well. One feature I implemented is to let users customize the theme color, and I use the following function to set color dynamically.

This works fine on android app, iPhone app, in browser, but it does not work in PWA mode (load the site in browser, and then add to home screen).

Can someone help diagnose the problem?

   setColor: function(v){
     [].every.call(document.styleSheets, function (sheet) {
       return [].every.call(sheet.cssRules, function (rule) {
         if (rule.selectorText == '.bg-main') {
           rule.style.setProperty('background-color', v, 'important');
         }
         if (rule.selectorText == '.btn-main') {
           rule.style.setProperty('background-color', v, 'important');
           rule.style.setProperty('border-color', v, 'important');
         }
         if (rule.selectorText == '.btn-outline-main') {
           rule.style.setProperty('border-color', v, 'important');
         }
         if (rule.selectorText == '.active' || rule.selectorText=='.text-main') {
           rule.style.setProperty('color', v, 'important');
         }
         if (rule.selectorText == '.custom-control-input:checked ~ .custom-control-label::before') {
           rule.style.setProperty('border-color', v, 'important');
           rule.style.setProperty('background-color', v, 'important');
         }
         return true;
       });
     });
   }

a snippet of my css style is below

  .btn-main {
    background-color: #7a050b !important;   /* #B20900 */
    border-color: #7a050b !important;
    color: white !important;
  }

question from:https://stackoverflow.com/questions/66052847/dynamically-change-css-attribute-works-in-regular-browser-mode-but-does-not-work

Answer 1

Waitting for answers