Merge pull request #2247 from crazyserver/MOBILE-3268

MOBILE-3268 styles: Add darkmode to modals

src/app/app.md.scss

@@ -68,6 +68,9 @@ ion-app.app-root.md {
     .action-sheet-title,
     .action-sheet-container > .action-sheet-group:first-child {
       box-shadow: 0 3px 5px $gray;
+      @include darkmode() {
+        box-shadow: 0 3px 5px $black;
+      }
     }
 
     .action-sheet-title {

src/app/app.scss

@@ -668,6 +668,9 @@ ion-app.app-root {
   .action-sheet-wrapper {
     .action-sheet-button.action-sheet-cancel {
       color: $core-action-sheet-cancel-color;
+      @include darkmode() {
+        color: $core-dark-action-sheet-cancel-color;
+      }
     }
     .action-sheet-selected {
       color: $core-color;

src/theme/dark.scss

@@ -16,8 +16,24 @@ $core-dark-login-item-background-color: $core-dark-login-box-background-color !d
 $core-dark-login-button-outline: $core-login-button-outline !default;
 $core-dark-login-loading-color: $core-dark-text-color !default;
 
-ion-app.app-root .ion-page {
+ion-app.app-root {
   @include darkmode() {
+    ion-action-sheet .action-sheet-container .action-sheet-group .action-sheet-button {
+      color: $core-dark-text-color;
+
+      &.action-sheet-selected {
+        color: $core-color;
+      }
+      &.activated {
+        background-color: $black;
+      }
+    }
+
+    .ion-page,
+    ion-popover .popover-content,
+    ion-alert .alert-wrapper,
+    ion-action-sheet .action-sheet-container .action-sheet-group,
+    ion-loading .loading-wrapper {
       color: $core-dark-text-color;
       background-color: $core-dark-item-bg-color;
 
@@ -25,6 +41,10 @@ ion-app.app-root .ion-page {
         color: $core-dark-link-color;
       }
 
+      .alert-message {
+        color: $core-dark-text-color;
+      }
+
       .core-tabs-bar,
       .core-tabs-bar *,
       .core-tabs-bar .tab-slide,
@@ -123,3 +143,4 @@ ion-app.app-root .ion-page {
       }
     }
   }
+}

src/theme/variables.scss

@@ -202,6 +202,7 @@ $core-login-item-background-color: $white !default;
 
 $core-action-sheet-color: $core-color !default;
 $core-action-sheet-cancel-color: $danger !default;
+$core-dark-action-sheet-cancel-color: $danger-dark !default;
 
 // App iOS Variables
 // --------------------------------------------------