Theming in ionic

I learned some ionic theming tutorials but can’t get a proper understanding.

How do I change the following controls

  • The floating hint “Email” should be grey,
  • The textboxes (public and password *s) should be dark grey
  • The selected blue underline shouldn’t be there
  • The selected green underline shouldn’t be there
  • The input+hint should be in a rounded rectangle box

Some pointers to how to reuse the theme attributes and good tutorials to get a concept would be appreciated!


    <ion-title>{{ 'APP_NAME' | translate }}</ion-title>

        <button ion-button block strong color="login_register_button">{{ 'LOGIN' | translate }}</button>
        <button ion-button block (click)="gotoRegister()" color="login_register_button">{{ 'SIGNUP' | translate }}</button>

      <ion-label floating color="dark">{{ 'EMAIL' | translate }}</ion-label>
      <ion-input type="email" [(ngModel)]=""></ion-input>

      <ion-label floating color="dark">{{ 'PASSWORD' | translate }}</ion-label>
      <ion-input type="password" [(ngModel)]="account.password"></ion-input>

    <div padding>
      <button ion-button (click)="doLogin()" block strong color="active1">{{ 'LOGIN' | translate }}</button>




$colors: (
  primary: #0076b2,
  secondary: #ffffff,
  danger: #ef4b58,
  light: #a7a4a4,
  dark: #4e4e4e,
  active_text: #ffffff,
  deactive_text: #555555,
  active1:( base:#3ea5e6, contrast:#ffffff),
  inactive1:( base:#c7dae6, contrast:#ffffff),
  login_register_button:( base:#ffffff, contrast:#3ea5e6),

i think this is easy and understandable:

for helping you to change your own design, i would also need your code

1 Like