enappd

import { Component } from '@angular/core';
import { NativeAudio } from '@ionic-native/native-audio/ngx';
import { Vibration } from '@ionic-native/vibration/ngx';
import { AudioManagement } from '@ionic-native/audio-management/ngx';
import { AlertController } from '@ionic/angular';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],

enappd

<ion-header>
  <ion-toolbar color="dark">
    <ion-title>
      Ring / Vibrate
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-list class="ion-padding-bottom">

enappd

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { Vibration } from '@ionic-native/vibration/ngx';
import { AudioManagement } from '@ionic-native/audio-management/ngx';
import { NativeAudio } from '@ionic-native/native-audio/ngx';
@NgModule({

enappd

import { Component } from '@angular/core';
import { ThemeService } from '../theme.service';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  public themeColor = [

enappd

import { Injectable, Inject, Renderer2, RendererFactory2 } from '@angular/core';
import { DOCUMENT } from '@angular/common';
@Injectable({
  providedIn: 'root'
})
export class ThemeService {

  public renderer: Renderer2;
  public currentTheme;

enappd

:root {
  /** Keep the Ionic default values same, don't replace them **/
  /** primary **/
  /** secondary **/
  /** tertiary **/
  /** success **/
  /** warning **/
  /** danger **/
  /** dark **/
  /** medium **/

enappd

<ion-header [translucent]="true">
  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-button>
        <ion-icon name="menu"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title>
      Theme Switcher
    </ion-title>

enappd

import { Injectable } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/auth';
import firebase from 'firebase/app';

@Injectable({
  providedIn: 'root'
})
export class AuthServiceService {
  confirmationResult: firebase.auth.ConfirmationResult;

enappd

import { Component } from '@angular/core';
import { AlertController } from '@ionic/angular';
import { AuthServiceService } from '../services/auth-service.service';
import firebase from 'firebase/app';
import { environment } from '../../environments/environment';
@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})

enappd

.main {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media screen and (min-width: 767px) {
  ion-card {
    width: 600px;
    margin: auto;