Overview
Upgrade Ionic from v6 to v8. Can be done after Angular is on v19 (issue #28).
Prerequisites
Scope
1. Package update
npm install @ionic/angular@8 @ionic/angular-toolkit@9
2. Dark mode CSS migration
- Ionic 8 uses CSS import for dark mode instead of
@media (prefers-color-scheme: dark)
- Audit
src/global.scss and src/theme/variables.scss for all dark mode overrides
- Migrate to the new approach:
// OLD (remove this)
@media (prefers-color-scheme: dark) { ... }
// NEW
@import "@ionic/angular/css/palettes/dark.system.css";
3. Component API changes
- Review all
ion-picker usages for API changes
- Review all
ion-modal breakpoints usages
- Check
IonRouterOutlet animation changes
- Remove any workarounds for Ionic 6 bugs that are now resolved
4. CSS variable audit
- Ionic 8 refreshed iOS design tokens
- Test all custom
ion- component overrides in global.scss visually
Acceptance Criteria
Test Checklist
Manually test these critical pages after upgrade:
Overview
Upgrade Ionic from v6 to v8. Can be done after Angular is on v19 (issue #28).
Prerequisites
Scope
1. Package update
2. Dark mode CSS migration
@media (prefers-color-scheme: dark)src/global.scssandsrc/theme/variables.scssfor all dark mode overrides3. Component API changes
ion-pickerusages for API changesion-modalbreakpointsusagesIonRouterOutletanimation changes4. CSS variable audit
ion-component overrides inglobal.scssvisuallyAcceptance Criteria
ng buildcompletes without errorsTest Checklist
Manually test these critical pages after upgrade:
ion-modalion-pickeror date selector