chore(ionic): update to v8 (#1813)

Co-authored-by: Amanda Johnston <[email protected]>

angular.json

@@ -32,11 +32,11 @@
             ],
             "styles": [
               {
-                "input": "src/theme/variables.scss",
+                "input": "src/global.scss",
                 "inject": true
               },
               {
-                "input": "src/global.scss",
+                "input": "src/theme/variables.scss",
                 "inject": true
               }
             ],
@@ -117,11 +117,11 @@
             "karmaConfig": "src/karma.conf.js",
             "styles": [
               {
-                "input": "src/theme/variables.scss",
+                "input": "src/global.scss",
                 "inject": true
               },
               {
-                "input": "src/global.scss",
+                "input": "src/theme/variables.scss",
                 "inject": true
               }
             ],

package.json

@@ -39,7 +39,7 @@
     "@capacitor/keyboard": "4.1.1",
     "@capacitor/splash-screen": "4.1.4",
     "@capacitor/status-bar": "4.1.1",
-    "@ionic/angular": "^7.0.0",
+    "@ionic/angular": "^8.0.0",
     "@ionic/storage-angular": "^4.0.0",
     "cordova-plugin-inappbrowser": "5.0.0",
     "core-js": "^3.6.4",

src/app/app.component.html

@@ -1,4 +1,4 @@
-<ion-app [class.dark-theme]="dark">
+<ion-app [class.ion-palette-dark]="dark">
   <ion-split-pane contentId="main-content">
 
     <ion-menu contentId="main-content">

src/app/app.scss

@@ -2,11 +2,3 @@
   /* stylelint-disable-next-line declaration-no-important */
   display: none !important;
 }
-
-html {
-  /*
-   * For more information on dynamic font scaling, visit the documentation:
-   * https://ionicframework.com/docs/layout/dynamic-font-scaling
-   */
-  --ion-dynamic-font: var(--ion-default-dynamic-font);
-}

src/app/pages/map/map.ts

@@ -22,7 +22,7 @@ export class MapPage implements AfterViewInit {
     const appEl = this.doc.querySelector('ion-app');
     let isDark = false;
     let style = [];
-    if (appEl.classList.contains('dark-theme')) {
+    if (appEl.classList.contains('ion-palette-dark')) {
       style = darkStyle;
     }
 
@@ -66,7 +66,7 @@ export class MapPage implements AfterViewInit {
       mutations.forEach((mutation) => {
         if (mutation.attributeName === 'class') {
           const el = mutation.target as HTMLElement;
-          isDark = el.classList.contains('dark-theme');
+          isDark = el.classList.contains('ion-palette-dark');
           if (map && isDark) {
             map.setOptions({styles: darkStyle});
           } else if (map) {

src/global.scss

@@ -10,19 +10,19 @@
  */
 
 /* Core CSS required for Ionic components to work properly */
-@import "~@ionic/angular/css/core.css";
+@import "@ionic/angular/css/core.css";
 
 /* Basic CSS for apps built with Ionic */
-@import "~@ionic/angular/css/normalize.css";
-@import "~@ionic/angular/css/structure.css";
-@import "~@ionic/angular/css/typography.css";
+@import "@ionic/angular/css/normalize.css";
+@import "@ionic/angular/css/structure.css";
+@import "@ionic/angular/css/typography.css";
 
 /* Optional CSS utils that can be commented out */
-@import "~@ionic/angular/css/padding.css";
-@import "~@ionic/angular/css/float-elements.css";
-@import "~@ionic/angular/css/text-alignment.css";
-@import "~@ionic/angular/css/text-transformation.css";
-@import "~@ionic/angular/css/flex-utils.css";
+@import "@ionic/angular/css/padding.css";
+@import "@ionic/angular/css/float-elements.css";
+@import "@ionic/angular/css/text-alignment.css";
+@import "@ionic/angular/css/text-transformation.css";
+@import "@ionic/angular/css/flex-utils.css";
 
 
 /*
@@ -33,3 +33,15 @@
  */
 
 @import "./app/app";
+
+
+/**
+ * Ionic Dark Mode
+ * -----------------------------------------------------
+ * For more info, please see:
+ * https://ionicframework.com/docs/theming/dark-mode
+ */
+
+// @import "@ionic/angular/css/palettes/dark.always.css";
+// @import "@ionic/angular/css/palettes/dark.system.css";
+@import "@ionic/angular/css/palettes/dark.class.css";