From a8daaf97ba811e9104e599d843804e435f714ca7 Mon Sep 17 00:00:00 2001 From: amandaesmith3 Date: Wed, 10 Jan 2024 09:12:40 -0600 Subject: [PATCH 1/3] refactor: use imported dark theme instead of hard-coded styles --- src/app/app.component.html | 2 +- src/global.scss | 12 +++ src/theme/variables.scss | 157 ------------------------------------- 3 files changed, 13 insertions(+), 158 deletions(-) diff --git a/src/app/app.component.html b/src/app/app.component.html index 163faf394..d000622ce 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,4 +1,4 @@ - + diff --git a/src/global.scss b/src/global.scss index 08834edb8..93a647263 100644 --- a/src/global.scss +++ b/src/global.scss @@ -33,3 +33,15 @@ */ @import "./app/app"; + + +/** + * Ionic Dark Theme + * ----------------------------------------------------- + * For more info, please see: + * https://ionicframework.com/docs/theming/dark-mode + */ + +/* @import "~@ionic/angular/css/themes/dark.always.css"; */ +@import "~@ionic/angular/css/themes/dark.class.css"; +/* @import "~@ionic/angular/css/themes/dark.system.css"; */ diff --git a/src/theme/variables.scss b/src/theme/variables.scss index 7bb20392f..1d9ca7ae6 100644 --- a/src/theme/variables.scss +++ b/src/theme/variables.scss @@ -259,160 +259,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; -} From 70f230854dcb1b95c760e547ebdd8066f492211c Mon Sep 17 00:00:00 2001 From: amandaesmith3 Date: Wed, 10 Jan 2024 09:24:46 -0600 Subject: [PATCH 2/3] lint --- src/global.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/global.scss b/src/global.scss index 93a647263..ab7694787 100644 --- a/src/global.scss +++ b/src/global.scss @@ -42,6 +42,6 @@ * https://ionicframework.com/docs/theming/dark-mode */ -/* @import "~@ionic/angular/css/themes/dark.always.css"; */ +// @import "~@ionic/angular/css/themes/dark.always.css"; +// @import "~@ionic/angular/css/themes/dark.system.css"; @import "~@ionic/angular/css/themes/dark.class.css"; -/* @import "~@ionic/angular/css/themes/dark.system.css"; */ From c96dfbad66d65429e1bdb50716186dc55e7f272c Mon Sep 17 00:00:00 2001 From: amandaesmith3 Date: Wed, 10 Jan 2024 09:46:23 -0600 Subject: [PATCH 3/3] update Ionic to AA contrast dev build --- package-lock.json | 89 +++++++++++++++++++---------------------------- package.json | 2 +- 2 files changed, 36 insertions(+), 55 deletions(-) diff --git a/package-lock.json b/package-lock.json index 3089fe05c..2b2298dfe 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": "^7.6.2-dev.11704729332.13b412c8", "@ionic/storage-angular": "^4.0.0", "cordova-plugin-inappbrowser": "5.0.0", "core-js": "^3.6.4", @@ -3951,11 +3951,11 @@ "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": "7.6.2-dev.11704729332.13b412c8", + "resolved": "https://registry.npmjs.org/@ionic/angular/-/angular-7.6.2-dev.11704729332.13b412c8.tgz", + "integrity": "sha512-H1x788W/zIr9vc0G0sDJgkjgbpvhQEanzqFO5SgQEhCGJQd/J826QLXHGj+BSVfUVwM/SPjb5uJMTm2MD6VQRg==", "dependencies": { - "@ionic/core": "7.0.0", + "@ionic/core": "7.6.2-dev.11704729332.13b412c8", "ionicons": "^7.0.0", "jsonc-parser": "^3.0.0", "tslib": "^2.3.0" @@ -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": "7.6.2-dev.11704729332.13b412c8", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.6.2-dev.11704729332.13b412c8.tgz", + "integrity": "sha512-n48906/PWgZura8K+Garvibes80E1Lg118P2onwlI898LQV8+xW7ART55x1gx75KiXiC3el0FexBF1HA+hQ2cQ==", "dependencies": { - "@stencil/core": "^3.1.0", - "ionicons": "^7.1.0", + "@stencil/core": "^4.8.2", + "ionicons": "^7.2.1", "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.9.1", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.9.1.tgz", + "integrity": "sha512-FB3vQR2xbX8RkiKdvBRj6jAe2VunKgB4U5hWSbpdcg/GhZrwOhsEgkGUGa8hGm9bgEUpIu16in1zFqziPyBEFw==", "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.2.2", + "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.2.2.tgz", + "integrity": "sha512-I3iYIfc9Q9FRifWyFSwTAvbEABWlWY32i0sAVDDPGYnaIZVugkLCZFbEcrphW6ixVPg8tt1oLwalo/JJwbEqnA==", "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": "7.6.2-dev.11704729332.13b412c8", + "resolved": "https://registry.npmjs.org/@ionic/angular/-/angular-7.6.2-dev.11704729332.13b412c8.tgz", + "integrity": "sha512-H1x788W/zIr9vc0G0sDJgkjgbpvhQEanzqFO5SgQEhCGJQd/J826QLXHGj+BSVfUVwM/SPjb5uJMTm2MD6VQRg==", "requires": { - "@ionic/core": "7.0.0", + "@ionic/core": "7.6.2-dev.11704729332.13b412c8", "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": "7.6.2-dev.11704729332.13b412c8", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.6.2-dev.11704729332.13b412c8.tgz", + "integrity": "sha512-n48906/PWgZura8K+Garvibes80E1Lg118P2onwlI898LQV8+xW7ART55x1gx75KiXiC3el0FexBF1HA+hQ2cQ==", "requires": { - "@stencil/core": "^3.1.0", - "ionicons": "^7.1.0", + "@stencil/core": "^4.8.2", + "ionicons": "^7.2.1", "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.9.1", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.9.1.tgz", + "integrity": "sha512-FB3vQR2xbX8RkiKdvBRj6jAe2VunKgB4U5hWSbpdcg/GhZrwOhsEgkGUGa8hGm9bgEUpIu16in1zFqziPyBEFw==" }, "@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.2.2", + "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.2.2.tgz", + "integrity": "sha512-I3iYIfc9Q9FRifWyFSwTAvbEABWlWY32i0sAVDDPGYnaIZVugkLCZFbEcrphW6ixVPg8tt1oLwalo/JJwbEqnA==", "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..8df2ffe0b 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": "^7.6.2-dev.11704729332.13b412c8", "@ionic/storage-angular": "^4.0.0", "cordova-plugin-inappbrowser": "5.0.0", "core-js": "^3.6.4",