Toggle switch ionic data not saved in dark mod theme

Ionic Framework
1

hi i success fully create dark theme mod and its working in devices but after exit app toggle data not saved
need help how to save toggle data in app

hear is a my code

   <ion-list>
   <ion-item>
    <ion-icon slot="start" name="moon"></ion-icon>
      <ion-label>Toggle Dark Theme</ion-label>
     <ion-toggle slot="end"
               [ngModel]="darkMode"
                 (ionChange)="cambio()"></ion-toggle>
    </ion-item>
  </ion-list>

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-folder',
  templateUrl: './folder.page.html',
  styleUrls: ['./folder.page.scss'],
})
export class FolderPage implements OnInit {
  darkMode: boolean = true;
  public folder: string;

  constructor(private activatedRoute: ActivatedRoute) { }

  ngOnInit() {
    this.folder = this.activatedRoute.snapshot.paramMap.get('id');
  }
  cambio() {
    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
    this.darkMode = !this.darkMode;
    document.body.classList.toggle( 'dark' );

  }
}

i found in google search how to stored data but its difficult because i am new in ionic development and still learning any one help me to solve my problem

2

Hi, this is my solution for saving the selected theme.

To use it, just call ChangeTheme.initializeTheme (); in the initialize of your page.
Use ChangeTheme.setDarkTheme (true); to switch to dark mode.

import { OnInit, OnDestroy } from '@angular/core';
import { isBoolean } from 'util';

export class ChangeTheme {

    public static preferenceColor: string;

    constructor() { }

    static initializeTheme() {
        this.preferenceColor = localStorage.preferenceTheme;
        this.setDarkTheme (this.preferenceColor === 'dark');
    }

    static setDarkTheme (darkColor) {
        const systemDark = window.matchMedia('(prefers-color-scheme: dark)');
        systemDark.addListener(this.colorTest);

        if (darkColor) {
            this.preferenceColor = 'dark';
        } else {
            this.preferenceColor = 'light';
        }

        document.body.setAttribute('data-theme', this.preferenceColor);
        localStorage.preferenceTheme = this.preferenceColor;
    }

    private static colorTest(systemInitiatedDark) {
        if (systemInitiatedDark.matches) {
            console.log('test data-theme', 'dark');
            document.body.setAttribute('data-theme', 'dark');
        } else {
            console.log('test data-theme', 'light');
            document.body.setAttribute('data-theme', 'light');
        }
    }
}