ionic3——主题，动态修改scss中定义的变量

额，我是在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变量

letmain ='170,170,170';letblock ='125,125,125';letcontent ='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。

链接：https://www.jianshu.com/p/146f0bb8e9d9

來源：简书

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。