How To Add Dark & Light Mode To Your Ionic 3,4,5,6 Project

HTML

 <ion-item lines="none">
      <ion-toggle (ionChange)="onClick($event)" slot="end"></ion-toggle>
      <ion-label class="ion-text-center">
       Dark Mode On
      </ion-label>
    </ion-item>

.ts File

  onClick(event) {

    if (event.detail.checked) {
      document.body.setAttribute('data-theme', 'dark');
    }
    else {
      document.body.setAttribute('data-theme', 'light');
    }
  }

Global.scss

body[data-theme="dark"] {
    ion-content,
    ion-toolbar {
        --background: #313131 !important;
    }
}