3d cartoon hands holding a phone

Unlock full course by purchasing a membership

Lesson 5

Simple Theming with Ionic

Making a few tweaks to make the app look a lot better


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-toolbar color="primary">

Modify the TodoFormComponent to reflect the following:

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

      ion-card-content {
        padding-top: 0;
export class TodoFormComponent {

Thanks for checking out the preview of this lesson!

You do not have the appropriate membership to view the full lesson. If you would like full access to this module you can view membership options (or log in if you are already have an appropriate membership).