Skip to content

[UPGRADE] Ionic 6 → 8 migration #29

Description

@BAWES

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

  • ng build completes without errors
  • App renders correctly on iOS viewport
  • App renders correctly on Android viewport
  • Dark mode works correctly
  • All modals open/close correctly
  • Tab bar renders correctly
  • All custom CSS overrides still apply as expected

Test Checklist

Manually test these critical pages after upgrade:

  • Login page
  • Candidate list
  • Candidate view/form
  • Company view
  • Any page using ion-modal
  • Any page using ion-picker or date selector

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions