# -- 第八课：自定义样式

这个应用很漂亮了，所以这里没有太多自定义的东西，所以这节课非常的快。但是我们还是要做点啥。\
我们先从修改颜色变量开始。\
\&#xNAN;**> 修改 theme/variables.scss 里面的命名颜色变量如下：**

```css
$colors: (
    primary: #5b91da,
    secondary: #32db64,
    danger: #f53d3d,
    light: #f4f4f4,
    dark: #222,
    favorite: #69BB7B
);
```

然后给应用的添加一些通用样式。\
\&#xNAN;**> 在src/app/app.scss中添加如下样式：**

```css
.logo {
    max-height: 39px;
    margin-top: 6px;
}

ion-input, ion-textarea {
    background-color: #F3F3F3;
    border: 1px solid #cecece;
    padding-left: 10px;
}

ion-textarea {
    height: 200px;
}

textarea {
    height: 180px;
}

button {
    border: none !important;
}
```

这里我们想要做到的主要事情是给我们的输入框添加一些样式。在这之前，输入框都是白色的，他的背景也是，所以你基本看不到输入框中哪里。现在他们的背景色灰色的，以及他有一些小小的额外的样式。我们给textarea添加了一点点样式来扩展他的默认高度，也覆盖了一个目前存在的bug，也就是textarea不会随着用户输入去调整。\
现在应用看起来应该是这样的：\
![预览图](https://877130497-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LBtuaet5GRr7L6p_j6_%2F-LBty0R2-90Yy_bs85eB%2F-LBty3gyl5XcvIEsC4HZ%2F5.9.1.jpg?generation=1525685965140921\&alt=media)\
![预览图](https://877130497-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LBtuaet5GRr7L6p_j6_%2F-LBty0R2-90Yy_bs85eB%2F-LBty3h2OwD5m6Hc26jz%2F5.9.2.jpg?generation=1525685965139167\&alt=media)\
这是整本书里面最小的课程了，但是，我们完成了！CamperMate现在全部完成了。