Simple Theming with Ionic

Our application does everything it is supposed to do now for this simple example, but we have put no thought into the style or design and it looks terrible. We aren’t going to go all out here, but a few simple tweaks are going to make this application look a whole lot better.

We are primarily going to do two things:

• Make more use of Ionic’s components
• Add in a few minor style tweaks

Give the ion-toolbar a primary color:

    <ion-header>
      <ion-toolbar color="primary">
        <ion-title>Todo</ion-title>
      </ion-toolbar>
    </ion-header>

Modify the TodoFormComponent to reflect the following:

@Component({
  selector: 'app-todo-form',
  template: `
    <form [formGroup]="todoForm" (ngSubmit)="handleSubmit()">
      <ion-card>
        <ion-card-title>
          <ion-input
            type="text"
            formControlName="title"
            placeholder="title..."
          ></ion-input>
        </ion-card-title>
        <ion-card-content>
          <ion-input
            type="text"
            formControlName="description"
            placeholder="description..."
          ></ion-input>
          <ion-button expand="full" type="submit">Add Todo</ion-button>
        </ion-card-content>
      </ion-card>
    </form>
  `,
  styles: [
    `
      ion-card-title {
        padding-left: 20px;
      }

      ion-card-content {
        padding-top: 0;
      }
    `,
  ],
})
export class TodoFormComponent {