npm install ionic-theme-switcher --save

• Import IonicThemeSwitcherModule in your app.module.ts or page.module.ts.

import {IonicThemeSwitcherModule } from 'ionic-theme-switcher';

@NgModule({
  imports: [
      ...,
      IonicThemeSwitcherModule,
      ...
  ]
})

Example

• Define colors in your page.ts.

 @Component({
  selector: 'app-page',
})
export class AppPage {
  ...
  darkColors: any = {
    primary: '#8CBA80',
    secondary: '#FCFF6C',
    tertiary: '#FE5F55',
    medium: '#BCC2C7',
    dark: '#F7F7FF',
    light: '#495867',
    success: "10dc60",
    warning: "ffce00",
    danger: "f04141",
  }
  ...
}

• Add directive and colors in your Ionic component.

 <ion-button themeSwitcher [colors]="darkColors">Switch</ion-button>

• themeSwitcher is the name of directive. Add this directive to any element on click of which you wanted to switch theme colors.

Properties | Description | Possible Values ---|---|--- colors (Optional)| SwitchThemeModel object with properties string | SwitchThemeModel() e.g. { primary: '#0080ff', secondary: '#0cd1e8', tertiary: '#7044ff', ... } store (Optional)| Boolean to store the theme colors in storage. Default is false. | boolean e.g. [store]="true"

• https://ionicframework.com/docs - Ionic