diff --git a/angular.json b/angular.json index d4d6293be..244883b70 100644 --- a/angular.json +++ b/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 } ], diff --git a/package-lock.json b/package-lock.json index 3089fe05c..0ca3fdf66 100644 --- a/package-lock.json +++ b/package-lock.json @@ -27,7 +27,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", @@ -3951,21 +3951,21 @@ "dev": true }, "node_modules/@ionic/angular": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/@ionic/angular/-/angular-7.0.0.tgz", - "integrity": "sha512-vsSOPoWyO8Wl2EcUG9VJN50HsLG5B08q2mz/D6WAWeG0VlFGS2OdjtBOsFT3UKWuznuACxnTPNdUCk9JtFCgRw==", + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/@ionic/angular/-/angular-8.0.0.tgz", + "integrity": "sha512-43bSCht78J3RSGhBkkZP7lJ+ny3cry8ndigwnO9hVnt8FqshVZFmFpJPuB3Sh1pdJDDYUBjFyFE0V42+KM1+kA==", "dependencies": { - "@ionic/core": "7.0.0", + "@ionic/core": "8.0.0", "ionicons": "^7.0.0", "jsonc-parser": "^3.0.0", "tslib": "^2.3.0" }, "peerDependencies": { - "@angular/core": ">=14.0.0", - "@angular/forms": ">=14.0.0", - "@angular/router": ">=14.0.0", + "@angular/core": ">=16.0.0", + "@angular/forms": ">=16.0.0", + "@angular/router": ">=16.0.0", "rxjs": ">=7.5.0", - "zone.js": ">=0.11.0" + "zone.js": ">=0.13.0" } }, "node_modules/@ionic/angular-toolkit": { @@ -4926,12 +4926,12 @@ "dev": true }, "node_modules/@ionic/core": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.0.tgz", - "integrity": "sha512-pM8qOaea9ZbqZbGnoIswaeeTiHJKNQ9ziSNHSILDpdd4FjpxZjOeMgNUdvYzh5rX9fA6hEM2wodg7McIWHgvZQ==", + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.0.0.tgz", + "integrity": "sha512-jW1LA5mSUYmG4Go9EBWPiLv0Uxwm9vF8+3gwYNeLxJrRwzsirc1qBW/zvDTqcbyMwopAfwtb690iSv5e3i1CwA==", "dependencies": { - "@stencil/core": "^3.1.0", - "ionicons": "^7.1.0", + "@stencil/core": "^4.12.2", + "ionicons": "^7.2.2", "tslib": "^2.1.0" } }, @@ -6096,15 +6096,15 @@ "dev": true }, "node_modules/@stencil/core": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.2.0.tgz", - "integrity": "sha512-vAZiHg4h6hZn4GP6P4w/d7qJwovW0xroitVAn/Ay0rUOeMHqMDYTX5jq0Vy/bgKactKam5WL/to50esGe6lDUQ==", + "version": "4.16.0", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.16.0.tgz", + "integrity": "sha512-gXaC5IrquV/Hw5JIZTCWkM5lJEbBQtnvHLhDebjar6A6+YBqxah04dardS+YUNVuRbnE6Hcja7KKiAXT3oVsvw==", "bin": { "stencil": "bin/stencil" }, "engines": { - "node": ">=14.10.0", - "npm": ">=6.0.0" + "node": ">=16.0.0", + "npm": ">=7.10.0" } }, "node_modules/@tootallnate/once": { @@ -13044,23 +13044,11 @@ } }, "node_modules/ionicons": { - "version": "7.1.0", - "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.1.0.tgz", - "integrity": "sha512-iE4GuEdEHARJpp0sWL7WJZCzNCf5VxpNRhAjW0fLnZPnNL5qZOJUcfup2Z2Ty7Jk8Q5hacrHfGEB1lCwOdXqGg==", + "version": "7.3.1", + "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.3.1.tgz", + "integrity": "sha512-1boG4EQTBBpQ4/0PU60Yi78Iw/k8iNtKu9c0NmsbzHGnWAcwpiovG9Wi/rk5UlF+DC+CR4XDCxKo91YqvAxkww==", "dependencies": { - "@stencil/core": "^2.18.0" - } - }, - "node_modules/ionicons/node_modules/@stencil/core": { - "version": "2.22.3", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.22.3.tgz", - "integrity": "sha512-kmVA0M/HojwsfkeHsifvHVIYe4l5tin7J5+DLgtl8h6WWfiMClND5K3ifCXXI2ETDNKiEk21p6jql3Fx9o2rng==", - "bin": { - "stencil": "bin/stencil" - }, - "engines": { - "node": ">=12.10.0", - "npm": ">=6.0.0" + "@stencil/core": "^4.0.3" } }, "node_modules/ip": { @@ -25780,11 +25768,11 @@ "dev": true }, "@ionic/angular": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/@ionic/angular/-/angular-7.0.0.tgz", - "integrity": "sha512-vsSOPoWyO8Wl2EcUG9VJN50HsLG5B08q2mz/D6WAWeG0VlFGS2OdjtBOsFT3UKWuznuACxnTPNdUCk9JtFCgRw==", + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/@ionic/angular/-/angular-8.0.0.tgz", + "integrity": "sha512-43bSCht78J3RSGhBkkZP7lJ+ny3cry8ndigwnO9hVnt8FqshVZFmFpJPuB3Sh1pdJDDYUBjFyFE0V42+KM1+kA==", "requires": { - "@ionic/core": "7.0.0", + "@ionic/core": "8.0.0", "ionicons": "^7.0.0", "jsonc-parser": "^3.0.0", "tslib": "^2.3.0" @@ -26526,12 +26514,12 @@ } }, "@ionic/core": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.0.0.tgz", - "integrity": "sha512-pM8qOaea9ZbqZbGnoIswaeeTiHJKNQ9ziSNHSILDpdd4FjpxZjOeMgNUdvYzh5rX9fA6hEM2wodg7McIWHgvZQ==", + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.0.0.tgz", + "integrity": "sha512-jW1LA5mSUYmG4Go9EBWPiLv0Uxwm9vF8+3gwYNeLxJrRwzsirc1qBW/zvDTqcbyMwopAfwtb690iSv5e3i1CwA==", "requires": { - "@stencil/core": "^3.1.0", - "ionicons": "^7.1.0", + "@stencil/core": "^4.12.2", + "ionicons": "^7.2.2", "tslib": "^2.1.0" } }, @@ -27413,9 +27401,9 @@ "dev": true }, "@stencil/core": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-3.2.0.tgz", - "integrity": "sha512-vAZiHg4h6hZn4GP6P4w/d7qJwovW0xroitVAn/Ay0rUOeMHqMDYTX5jq0Vy/bgKactKam5WL/to50esGe6lDUQ==" + "version": "4.16.0", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.16.0.tgz", + "integrity": "sha512-gXaC5IrquV/Hw5JIZTCWkM5lJEbBQtnvHLhDebjar6A6+YBqxah04dardS+YUNVuRbnE6Hcja7KKiAXT3oVsvw==" }, "@tootallnate/once": { "version": "1.1.2", @@ -32671,18 +32659,11 @@ } }, "ionicons": { - "version": "7.1.0", - "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.1.0.tgz", - "integrity": "sha512-iE4GuEdEHARJpp0sWL7WJZCzNCf5VxpNRhAjW0fLnZPnNL5qZOJUcfup2Z2Ty7Jk8Q5hacrHfGEB1lCwOdXqGg==", + "version": "7.3.1", + "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.3.1.tgz", + "integrity": "sha512-1boG4EQTBBpQ4/0PU60Yi78Iw/k8iNtKu9c0NmsbzHGnWAcwpiovG9Wi/rk5UlF+DC+CR4XDCxKo91YqvAxkww==", "requires": { - "@stencil/core": "^2.18.0" - }, - "dependencies": { - "@stencil/core": { - "version": "2.22.3", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.22.3.tgz", - "integrity": "sha512-kmVA0M/HojwsfkeHsifvHVIYe4l5tin7J5+DLgtl8h6WWfiMClND5K3ifCXXI2ETDNKiEk21p6jql3Fx9o2rng==" - } + "@stencil/core": "^4.0.3" } }, "ip": { diff --git a/package.json b/package.json index 3596580ea..0640a7259 100644 --- a/package.json +++ b/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", diff --git a/src/app/app.component.html b/src/app/app.component.html index 163faf394..edeba7268 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,4 +1,4 @@ - + diff --git a/src/app/app.scss b/src/app/app.scss index 61023860e..aa2ccac8a 100644 --- a/src/app/app.scss +++ b/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); -} diff --git a/src/app/pages/map/map.ts b/src/app/pages/map/map.ts index b5b465c65..a5b728a9c 100644 --- a/src/app/pages/map/map.ts +++ b/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) { diff --git a/src/global.scss b/src/global.scss index 08834edb8..1e59e14c3 100644 --- a/src/global.scss +++ b/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"; diff --git a/src/theme/variables.scss b/src/theme/variables.scss index 7bb20392f..58d9ec6ff 100644 --- a/src/theme/variables.scss +++ b/src/theme/variables.scss @@ -5,96 +5,6 @@ * https://www.ionicframework.com/docs/theming/ */ -/* - * Ionic Colors - * ---------------------------------------------------------------------------- - * Named colors make it easy to reuse colors on various components. - * It's highly recommended to change the default colors - * to match your app's branding. Ionic provides nine layered colors - * that can be changed to theme an app. Additional colors can be - * added as well (see below). For more information, please see - * https://www.ionicframework.com/docs/theming/colors - * - * To easily create custom color palettes for your app’s UI, - * check out our color generator: - * https://www.ionicframework.com/docs/theming/color-generator - */ - - :root { - /** primary **/ - --ion-color-primary: #3880ff; - --ion-color-primary-rgb: 56, 128, 255; - --ion-color-primary-contrast: #ffffff; - --ion-color-primary-contrast-rgb: 255, 255, 255; - --ion-color-primary-shade: #3171e0; - --ion-color-primary-tint: #4c8dff; - - /** secondary **/ - --ion-color-secondary: #3dc2ff; - --ion-color-secondary-rgb: 61, 194, 255; - --ion-color-secondary-contrast: #ffffff; - --ion-color-secondary-contrast-rgb: 255, 255, 255; - --ion-color-secondary-shade: #36abe0; - --ion-color-secondary-tint: #50c8ff; - - /** tertiary **/ - --ion-color-tertiary: #5260ff; - --ion-color-tertiary-rgb: 82, 96, 255; - --ion-color-tertiary-contrast: #ffffff; - --ion-color-tertiary-contrast-rgb: 255, 255, 255; - --ion-color-tertiary-shade: #4854e0; - --ion-color-tertiary-tint: #6370ff; - - /** success **/ - --ion-color-success: #2dd36f; - --ion-color-success-rgb: 45, 211, 111; - --ion-color-success-contrast: #ffffff; - --ion-color-success-contrast-rgb: 255, 255, 255; - --ion-color-success-shade: #28ba62; - --ion-color-success-tint: #42d77d; - - /** warning **/ - --ion-color-warning: #ffc409; - --ion-color-warning-rgb: 255, 196, 9; - --ion-color-warning-contrast: #000000; - --ion-color-warning-contrast-rgb: 0, 0, 0; - --ion-color-warning-shade: #e0ac08; - --ion-color-warning-tint: #ffca22; - - /** danger **/ - --ion-color-danger: #eb445a; - --ion-color-danger-rgb: 235, 68, 90; - --ion-color-danger-contrast: #ffffff; - --ion-color-danger-contrast-rgb: 255, 255, 255; - --ion-color-danger-shade: #cf3c4f; - --ion-color-danger-tint: #ed576b; - - /** dark **/ - --ion-color-dark: #222428; - --ion-color-dark-rgb: 34, 36, 40; - --ion-color-dark-contrast: #ffffff; - --ion-color-dark-contrast-rgb: 255, 255, 255; - --ion-color-dark-shade: #1e2023; - --ion-color-dark-tint: #383a3e; - - /** medium **/ - --ion-color-medium: #92949c; - --ion-color-medium-rgb: 146, 148, 156; - --ion-color-medium-contrast: #ffffff; - --ion-color-medium-contrast-rgb: 255, 255, 255; - --ion-color-medium-shade: #808289; - --ion-color-medium-tint: #9d9fa6; - - /** light **/ - --ion-color-light: #f4f5f8; - --ion-color-light-rgb: 244, 245, 248; - --ion-color-light-contrast: #000000; - --ion-color-light-contrast-rgb: 0, 0, 0; - --ion-color-light-shade: #d7d8da; - --ion-color-light-tint: #f5f6f9; -} - - /* * Additional Ionic Colors * ---------------------------------------------------------------------------- @@ -259,160 +169,3 @@ .md { } - -/* - * App Theme - * ---------------------------------------------------------------------------- - * Ionic apps can have different themes applied, which can - * then be further customized. These variables come last - * so that the above variables are used by default. - */ - -/* - * Dark Theme - * ---------------------------------------------------------------------------- - */ - -.dark-theme { - --ion-color-primary: #428cff; - --ion-color-primary-rgb: 66,140,255; - --ion-color-primary-contrast: #ffffff; - --ion-color-primary-contrast-rgb: 255,255,255; - --ion-color-primary-shade: #3a7be0; - --ion-color-primary-tint: #5598ff; - - --ion-color-secondary: #50c8ff; - --ion-color-secondary-rgb: 80,200,255; - --ion-color-secondary-contrast: #ffffff; - --ion-color-secondary-contrast-rgb: 255,255,255; - --ion-color-secondary-shade: #46b0e0; - --ion-color-secondary-tint: #62ceff; - - --ion-color-tertiary: #6a64ff; - --ion-color-tertiary-rgb: 106,100,255; - --ion-color-tertiary-contrast: #ffffff; - --ion-color-tertiary-contrast-rgb: 255,255,255; - --ion-color-tertiary-shade: #5d58e0; - --ion-color-tertiary-tint: #7974ff; - - --ion-color-success: #2fdf75; - --ion-color-success-rgb: 47,223,117; - --ion-color-success-contrast: #000000; - --ion-color-success-contrast-rgb: 0,0,0; - --ion-color-success-shade: #29c467; - --ion-color-success-tint: #44e283; - - --ion-color-warning: #ffd534; - --ion-color-warning-rgb: 255,213,52; - --ion-color-warning-contrast: #000000; - --ion-color-warning-contrast-rgb: 0,0,0; - --ion-color-warning-shade: #e0bb2e; - --ion-color-warning-tint: #ffd948; - - --ion-color-danger: #ff4961; - --ion-color-danger-rgb: 255,73,97; - --ion-color-danger-contrast: #ffffff; - --ion-color-danger-contrast-rgb: 255,255,255; - --ion-color-danger-shade: #e04055; - --ion-color-danger-tint: #ff5b71; - - --ion-color-dark: #f4f5f8; - --ion-color-dark-rgb: 244,245,248; - --ion-color-dark-contrast: #000000; - --ion-color-dark-contrast-rgb: 0,0,0; - --ion-color-dark-shade: #d7d8da; - --ion-color-dark-tint: #f5f6f9; - - --ion-color-medium: #989aa2; - --ion-color-medium-rgb: 152,154,162; - --ion-color-medium-contrast: #000000; - --ion-color-medium-contrast-rgb: 0,0,0; - --ion-color-medium-shade: #86888f; - --ion-color-medium-tint: #a2a4ab; - - --ion-color-light: #222428; - --ion-color-light-rgb: 34,36,40; - --ion-color-light-contrast: #ffffff; - --ion-color-light-contrast-rgb: 255,255,255; - --ion-color-light-shade: #1e2023; - --ion-color-light-tint: #383a3e; -} - -/* - * iOS Dark Theme - * ---------------------------------------------------------------------------- - */ - -.dark-theme.ios { - --ion-background-color: #000000; - --ion-background-color-rgb: 0,0,0; - - --ion-text-color: #ffffff; - --ion-text-color-rgb: 255,255,255; - - --ion-color-step-50: #0d0d0d; - --ion-color-step-100: #1a1a1a; - --ion-color-step-150: #262626; - --ion-color-step-200: #333333; - --ion-color-step-250: #404040; - --ion-color-step-300: #4d4d4d; - --ion-color-step-350: #595959; - --ion-color-step-400: #666666; - --ion-color-step-450: #737373; - --ion-color-step-500: #808080; - --ion-color-step-550: #8c8c8c; - --ion-color-step-600: #999999; - --ion-color-step-650: #a6a6a6; - --ion-color-step-700: #b3b3b3; - --ion-color-step-750: #bfbfbf; - --ion-color-step-800: #cccccc; - --ion-color-step-850: #d9d9d9; - --ion-color-step-900: #e6e6e6; - --ion-color-step-950: #f2f2f2; - - --ion-toolbar-background: #0d0d0d; - - --ion-item-background: #000000; -} - - -/* - * Material Design Dark Theme - * ---------------------------------------------------------------------------- - */ - -.dark-theme.md { - --ion-background-color: #121212; - --ion-background-color-rgb: 18,18,18; - - --ion-text-color: #ffffff; - --ion-text-color-rgb: 255,255,255; - - --ion-border-color: #222222; - - --ion-color-step-50: #1e1e1e; - --ion-color-step-100: #2a2a2a; - --ion-color-step-150: #363636; - --ion-color-step-200: #414141; - --ion-color-step-250: #4d4d4d; - --ion-color-step-300: #595959; - --ion-color-step-350: #656565; - --ion-color-step-400: #717171; - --ion-color-step-450: #7d7d7d; - --ion-color-step-500: #898989; - --ion-color-step-550: #949494; - --ion-color-step-600: #a0a0a0; - --ion-color-step-650: #acacac; - --ion-color-step-700: #b8b8b8; - --ion-color-step-750: #c4c4c4; - --ion-color-step-800: #d0d0d0; - --ion-color-step-850: #dbdbdb; - --ion-color-step-900: #e7e7e7; - --ion-color-step-950: #f3f3f3; - - --ion-item-background: #1e1e1e; - - --ion-toolbar-background: #1f1f1f; - - --ion-tab-bar-background: #1f1f1f; -}