Aller au contenu
rdlabo.devdocs

Thème

Personnalisez les couleurs de l’éditeur après l’installation.

Les couleurs par défaut sont définies dans la feuille de style de la bibliothèque. Remplacez-les avec des variables CSS :

:root {
  --ion-photo-editor-background: #2a2a2a;
  --ion-photo-editor-background-tint: #414141;

  --ion-photo-editor-color: #f0f0f0;
  --ion-photo-editor-color-tint: #dbdbdb;

  --ion-photo-editor-primary: #4d8dff;
  --ion-photo-editor-danger: #f24c58;
  --ion-photo-editor-success: #2dd55b;

  --ion-photo-editor-header-button-color-on-light: #222428;
  --ion-photo-editor-header-button-color-on-dark: #f4f5f8;
}

Référence du code source : core.scss.

Palette de couleurs de la barre d’outils

PhotoEditorPage et PhotoViewerPage nécessitent toolbarColorScheme: 'light' | 'dark' dans les componentProps de la fenêtre modale. Choisissez dark pour un ion-toolbar sombre/noir et light pour une barre claire/blanche. L’application doit choisir, car la bibliothèque ne peut pas déduire de façon fiable l’apparence finale de la barre depuis le CSS, sa translucidité ou les modifications de thème à l’exécution.

Pour @rdlabo/ionic-theme-ios26 v3, importez la feuille de style d’intégration facultative après le thème iOS 26 et les styles du mode sombre :

@import '@rdlabo/ionic-theme-ios26/dist/css/ionic-theme-ios26.css';
@import '@ionic/angular/css/palettes/dark.class.css';
@import '@rdlabo/ionic-theme-ios26/dist/css/ionic-theme-ios26-dark-class.css';
@import '@rdlabo/ionic-angular-photo-editor/css/ios26-header-button-color-scheme.css';

Utilisez plutôt l’importation de mode sombre Always ou System appropriée, si nécessaire. La feuille de style d’intégration de l’éditeur de photos doit rester en dernier afin que sa palette d’en-tête locale puisse remplacer celle de l’application. Les applications qui n’utilisent pas le thème iOS 26 ne doivent pas importer cette feuille facultative ; elles bénéficient uniquement de la bascule normale de couleur de premier plan des boutons Ionic.