Fix contrast for failed message on sync page in dark theme (#3794)

Author: RaymondLuong3

src/SIL.XForge.Scripture/ClientApp/src/app/sync/_sync-theme.scss

@@ -0,0 +1,13 @@
+@use '@angular/material' as mat;
+
+@mixin color($theme) {
+  $is-dark: mat.get-theme-type($theme) == dark;
+
+  --sf-sync-warning-message-color: #{mat.get-theme-color($theme, neutral, if($is-dark, 70, 40))};
+}
+
+@mixin theme($theme) {
+  @if mat.theme-has($theme, color) {
+    @include color($theme);
+  }
+}

src/SIL.XForge.Scripture/ClientApp/src/app/sync/sync.component.scss

@@ -77,5 +77,5 @@ app-sync-progress {
 #sync-disabled-message,
 #sync-failure-support-message {
   max-width: 40rem;
-  color: variables.$lighterTextColor;
+  color: var(--sf-sync-warning-message-color);
 }

src/SIL.XForge.Scripture/ClientApp/src/material-styles.scss

@@ -17,6 +17,7 @@
 @use 'src/app/shared/book-multi-select/book-multi-select-theme' as sf-book-multi-select;
 @use 'src/app/shared/json-viewer/json-viewer-theme' as sf-json-viewer;
 @use 'src/app/shared/audio-recorder-dialog/audio-recorder-dialog-theme' as sf-audio-recorder-dialog;
+@use 'src/app/sync/sync-theme' as sf-sync;
 @use 'src/app/translate/draft-generation/draft-generation-steps/draft-generation-steps-theme' as
   sf-draft-generation-steps;
 @use 'src/app/translate/draft-generation/confirm-sources/confirm-sources-theme' as sf-confirm-sources;
@@ -87,6 +88,7 @@
   @include sf-draft-jobs.theme($theme);
   @include sf-job-details-dialog.theme($theme);
   @include sf-onboarding-requests.theme($theme);
+  @include sf-sync.theme($theme);
 
   // Custom variables
   --sf-disabled-foreground: #{mat.get-theme-color($theme, neutral, 70)};