fix(mobile): input dark mode support

sign · Sep 11, 2023 · 7c8871b · 7c8871b
1 parent 63a25d0
commit 7c8871b
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 3 deletions.
diff --git a/src/app/pages/translate/pose-viewers/skeleton-pose-viewer/skeleton-pose-viewer.component.ts b/src/app/pages/translate/pose-viewers/skeleton-pose-viewer/skeleton-pose-viewer.component.ts
@@ -35,7 +35,7 @@ export class SkeletonPoseViewerComponent extends BasePoseViewerComponent impleme
 
           // Some browsers videos can't have a transparent background
           const isTransparencySupported = 'chrome' in window; // transparency is currently not supported in firefox and safari
-          if (this.mediaRecorder && !isTransparencySupported && !this.colorSchemeMedia.matches) {
+          if (this.mediaRecorder && !isTransparencySupported) {
             // Make the video background the same as the element's background
             const el = document.querySelector('app-signed-language-output');
             this.background = getComputedStyle(el).backgroundColor;

diff --git a/...ges/translate/spoken-to-signed/spoken-language-input/spoken-language-input.component.scss b/...ges/translate/spoken-to-signed/spoken-language-input/spoken-language-input.component.scss
@@ -46,13 +46,17 @@ textarea#desktop {
 ion-textarea#mobile {
   margin-top: 6px;
   margin-bottom: 6px;
-  background-color: #fff;
   border-radius: 20px;
   --padding-start: 10px;
   --highlight-color: var(--ion-color-primary);
 
-  /* Address strange height on iOS */
   &.sc-ion-textarea-ios-h {
+    /* Address strange height on iOS */
     min-height: initial;
+
+    background-color: white;
+    @media (prefers-color-scheme: dark) {
+      background-color: #202124;
+    }
   }
 }