主题化你的Ionic App

Ionic App支持主题风格。要改变主题，只需要调整src/theme/variables.scss文件中的$colors map：

$colors: ( 
    primary: #387ef5, 
    secondary: #32db64, 
    danger: #f53d3d, 
    light: #f4f4f4, 
    dark: #222, 
);

为Ionic App改变主题的最快方法是为primary设置一个新值，这样Ionic将使用primary颜色作为按钮或其他组件的默认颜色。

自定义颜色

如果要添加一个自定义颜色，只需要把它们添加到$colors map中：

$colors: ( 
    // ... 
    twitter: #55acee 
)

你可以更进一步定制基本色和对比色属性：

$colors: ( 
    // ... 
    twitter:( 
        base: #55acee, 
        contrast: #ffffff 
    ) 
)

base一般用来作为元素的背景色，contrast用来作为文本颜色。这提供了更灵活的控件样式。Ionic使用$colors关键字作为很多组件的属性。例如，为了应用twitter颜色，可以把这个关键字作为属性添加：

<button color="twitter">I'm a button</button>

对于任何自定义组件来说，你都可以使用color函数来取得正确的颜色：

my-component { 
    background : color($colors, twitter, base) 
}

color函数将会在map中寻找正确的颜色，对这个例子来说，根据传入的属性和变量，编译后的输出会是这样的：

my-component { 
    background : #55acee 
}