首先,你需要下载一个 SCSS 文件的编译软件,这里使用的是 Koala。
接着当然是使用 Koala 关联我们的文件:根目录/scss/ionic.app.scss,修改后生成的 ionic.app.css 文件默认是在同目录下。
然后需要编辑 ionic.app.scss 文件,一开始可能 Koala 会报错,稍微修改一下:
// Include all of Ionic
@import "www/lib/ionic/scss/ionic";
改为:
// Include all of Ionic
@import "../www/lib/ionic/scss/ionic";
修改 ionic.app.scss 文件,切记要把注释 /* …. */ 去掉,不然怎么修改也不起作用哦。这里主要可以对默认的颜色进行修改。
最后,把编译生成的 ionic.app.css 文件复制到 根目录/www/css/ 路径下,接着到 index.html 里调用该 CSS 文件,为避免重复,注释掉原来的 ionic.css:
找到:
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
改为:
<!--link href="lib/ionic/css/ionic.css" rel="stylesheet"-->
<link href="css/ionic.app.css" rel="stylesheet">
通过以上方法,就可以改变默认的样式了,app 主题颜色也可以随心所欲了。