主题，动态修改css中:root定义的变量

额，我是在ionic3项目中需要该功能，别的地方应该也能用这个方法，如：网页等。
我在app/theme/variables.scss中，定义了如下变量：

:root {
  --main: rgba(40,40,40,1);
  --block: rgba(70,70,70,1);
  --content: rgba(100,100,100,1);
}

然后，在其他页面的scss文件中就可以使用了：
background-color: var(--content);
重点：修改main，block，content变量

     let main = '170,170,170';
     let  block = '125,125,125';
     let  content = '100,100,100';
    document.documentElement.style.setProperty(`--main`, 'rgba('+main+',1)');
    document.documentElement.style.setProperty(`--block`, 'rgba('+block+',1)');
    document.documentElement.style.setProperty(`--content`, 'rgba('+content+',1)');

ok!

当然，ionic3推荐的主题更改方式是，在theme文件夹中，定义多个主题的scss文件，然后动态替换scss文件，达到主题更改的目的：https://devdactic.com/dynamic-theming-ionic/，可能要翻q。