Theming in ionic

Ionic Framework ionic-v3
1

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

How do I change the following controls

20
Screenshot 2019-01-15 at 11.52.20.png730×306 5.84 KB

  • 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!

HTML:

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

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

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

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

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

  </ion-list>

</ion-content>

SCSS


$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),
  border1:#cacaca,
  error1:#ff0013
);
2

i think this is easy and understandable: https://www.youtube.com/watch?v=CW7kvEJlNys

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

1 Like