Ionic使用不同的默认主题颜色/定义自己的自定义主题默认值

Question

在_variables.scss中我们有所有的定义。但是我在哪里可以改变设置light呢?我想对所有元素使用，比如说，royal或dark。

我必须调整每个单独的元素，或者有一个单一的点，我可以改变?

。

用户royal而不是light无处不在

好的，我可以在这里更改某个主题的主题颜色

$light:                           #fff !default;
$stable:                          #f8f8f8 !default;
$positive:                        #387ef5 !default;
$calm:                            #11c1f3 !default;
$balanced:                        #33cd5f !default;
$energized:                       #ffc900 !default;
$assertive:                       #ef473a !default;
$royal:                           #886aea !default;
$dark:                            #444 !default;

但是我在哪里设置使用特定的主题颜色呢?精力充沛的、高贵的、黑暗的、平静的等等……我想用别的东西而不是光

Answer 1

对于许多Ionic组件(页眉、页脚、按钮、开关、列表项、范围、旋转器等)，添加ELEMENT-color类将使元素的颜色变为/scss/ionic.app.scss中列出的颜色。例如:

<div class="bar bar-header bar-calm">
  <h1 class="title">bar-calm</h1>
</div>

还是……

<button class="button button-calm">
  button-calm
</button>

还是……

<ion-spinner class="spinner-calm"></ion-spinner>

上面的类将应用$calm颜色到组件。

对于其他元素，您必须找到想要更改其颜色的元素的变量并覆盖它。你要覆盖的变量在'/www/lib/ionic/scss/_variables.scss'中。

您可以在/scss/ionic.app.scss中覆盖该文件中的任何变量。

例如:

$base-color: $calm;

将改变许多元素的颜色为$calm。