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!
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
);