Fixes #4561 : Dark mode implementation - Audio Player (#4822)

<!-- READ ME FIRST: Please fill in the explanation section below and
check off every point from the Essential Checklist! -->
## Explanation

Fixes #4561 : Dark mode implementation - Audio Player


<!--
- Explain what your PR does. If this PR fixes an existing bug, please
include
- "Fixes #bugnum:" in the explanation so that GitHub can auto-close the
issue
  - when this PR is merged.
  -->

## Essential Checklist
<!-- Please tick the relevant boxes by putting an "x" in them. -->
- [x] The PR title and explanation each start with "Fix #bugnum: " (If
this PR fixes part of an issue, prefix the title with "Fix part of
#bugnum: ...".)
- [ ] Any changes to
[scripts/assets](https://github.com/oppia/oppia-android/tree/develop/scripts/assets)
files have their rationale included in the PR explanation.
- [x] The PR follows the [style
guide](https://github.com/oppia/oppia-android/wiki/Coding-style-guide).
- [x] The PR does not contain any unnecessary code changes from Android
Studio
([reference](https://github.com/oppia/oppia-android/wiki/Guidance-on-submitting-a-PR#undo-unnecessary-changes)).
- [x] The PR is made from a branch that's **not** called "develop" and
is up-to-date with "develop".
- [x] The PR is **assigned** to the appropriate reviewers
([reference](https://github.com/oppia/oppia-android/wiki/Guidance-on-submitting-a-PR#clarification-regarding-assignees-and-reviewers-section)).

## For UI-specific PRs only

### Audio Player

<img
src="https://user-images.githubusercontent.com/76530270/210343312-a406c318-87fb-4c81-8ea9-20fb0f1a14e4.png"
height="400" style="max-width: 100%"> <img
src="https://user-images.githubusercontent.com/76530270/210343451-ddf373da-d4b4-4ecd-93ad-aa09f2809198.png"
height="400" style="max-width: 100%">



<!-- Delete these section if this PR does not include UI-related
changes. -->
If your PR includes UI-related changes, then:
- Add screenshots for portrait/landscape for both a tablet & phone of
the before & after UI changes
- For the screenshots above, include both English and pseudo-localized
(RTL) screenshots (see [RTL
guide](https://github.com/oppia/oppia-android/wiki/RTL-Guidelines))
- Add a video showing the full UX flow with a screen reader enabled (see
[accessibility
guide](https://github.com/oppia/oppia-android/wiki/Accessibility-(A11y)-Guide))
- Add a screenshot demonstrating that you ran affected Espresso tests
locally & that they're passing

app/src/main/res/drawable/audio_language_availability_background.xml

@@ -4,5 +4,5 @@
   <corners
     android:bottomLeftRadius="@dimen/audio_fragment_corner_radius"
     android:bottomRightRadius="@dimen/audio_fragment_corner_radius" />
-  <solid android:color="@color/color_def_oppia_light_yellow" />
+  <solid android:color="@color/component_color_shared_screen_secondary_background_color" />
 </shape>

app/src/main/res/drawable/audio_seekbar_background.xml

@@ -2,14 +2,14 @@
 <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
   <item android:id="@android:id/background">
     <shape>
-      <solid android:color="@color/color_def_white" />
+      <solid android:color="@color/component_color_shared_white_background_color" />
       <corners android:radius="8dp" />
     </shape>
   </item>
   <item android:id="@android:id/progress">
     <clip>
       <shape>
-        <solid android:color="@color/oppia_accent" />
+        <solid android:color="@color/component_color_audio_fragment_seekbar_color" />
         <corners android:radius="8dp" />
       </shape>
     </clip>

app/src/main/res/drawable/seekbar_thumb.xml

@@ -8,7 +8,7 @@
       <gradient
         android:endColor="@android:color/transparent"
         android:gradientRadius="20"
-        android:startColor="@color/color_def_black_54"
+        android:startColor="@color/component_color_audio_fragment_seekbar_thumb_shadow_color"
         android:type="radial" />
     </shape>
   </item>
@@ -17,7 +17,7 @@
     android:left="8dp"
     android:top="4dp">
     <shape android:shape="oval">
-      <solid android:color="@color/component_color_audio_fragment_thumb_background_color" />
+      <solid android:color="@color/component_color_shared_white_background_color" />
       <corners android:radius="10dp" />
     </shape>
   </item>

app/src/main/res/layout/audio_fragment.xml

@@ -21,9 +21,9 @@
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:layout_gravity="center_horizontal"
-    android:paddingBottom="4dp"
     android:clipToPadding="false"
-    android:gravity="center_vertical">
+    android:gravity="center_vertical"
+    android:paddingBottom="4dp">
 
     <androidx.constraintlayout.widget.ConstraintLayout
       android:id="@+id/audio_bar_container"
@@ -49,7 +49,7 @@
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintTop_toTopOf="parent"
         app:srcCompat="@{viewModel.playStatusLiveData == UiAudioPlayStatus.PLAYING ? @drawable/ic_pause_circle_filled_white_24dp : @drawable/ic_play_circle_filled_white_24dp}"
-        app:tint="@color/component_color_audio_fragment_icon_color" />
+        app:tint="@color/component_color_shared_icon_white_color" />
 
       <SeekBar
         android:id="@+id/audio_progress_seek_bar"
@@ -80,11 +80,11 @@
         android:gravity="center"
         android:onClick="@{(v) -> audioFragment.languageSelectionClicked()}"
         android:padding="12dp"
-        app:tint="@color/component_color_audio_fragment_icon_color"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintTop_toTopOf="parent"
-        app:srcCompat="@drawable/ic_audio_lang_24px" />
+        app:srcCompat="@drawable/ic_audio_lang_24px"
+        app:tint="@color/component_color_shared_icon_white_color" />
 
       <androidx.constraintlayout.widget.Barrier
         android:id="@+id/audio_bar_barrier"
@@ -97,24 +97,25 @@
     <FrameLayout
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
-      android:elevation="4dp"
       android:background="@drawable/audio_language_availability_background"
-      android:paddingBottom="4dp"
       android:clipToPadding="false"
-      app:layout_constraintStart_toStartOf="parent"
+      android:elevation="4dp"
+      android:paddingBottom="4dp"
       app:layout_constraintEnd_toEndOf="parent"
+      app:layout_constraintStart_toStartOf="parent"
       app:layout_constraintTop_toBottomOf="@+id/audio_bar_container">
 
       <TextView
         android:id="@+id/language_unavailable_notice"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_marginStart="8dp"
-        android:layout_marginEnd="8dp"
         android:layout_marginTop="8dp"
+        android:layout_marginEnd="8dp"
         android:layout_marginBottom="4dp"
         android:paddingBottom="4dp"
         android:text="@{viewModel.computeAudioUnavailabilityString(viewModel.selectedLanguageName)}"
+        android:textColor="@color/component_color_shared_primary_text_color"
         android:visibility="@{viewModel.selectedLanguageUnavailable ? View.VISIBLE : View.GONE}" />
     </FrameLayout>
   </androidx.constraintlayout.widget.ConstraintLayout>

app/src/main/res/values-night/color_palette.xml

@@ -119,8 +119,10 @@
   <color name="color_palette_thumbnail_gradient_end_color">@color/color_def_accessible_grey</color>
   <color name="color_palette_thumbnail_gradient_start_color">@color/color_def_white_0</color>
   <color name="color_palette_icon_background_secondary_color">@color/color_def_oppia_turquoise</color>
-  <color name="color_palette_accent_background_color">@color/color_def_oppia_dark_grey</color>
-  <color name="color_palette_seekbar_progress_background_color">@color/color_def_maastricht_blue</color>
+  <color name="color_palette_icon_white_color">@color/color_def_white</color>
+  <color name="color_palette_audio_fragment_background_color">@color/color_def_oppia_metallic_blue</color>
+  <color name="color_palette_seekbar_progress_background_color">@color/color_def_japanese_indigo</color>
+  <color name="color_palette_seekbar_thumb_shadow_color">@color/color_def_stroke_silver</color>
   <color name="color_palette_toolbar_secondary_color">@color/color_def_forest_green</color>
   <color name="color_palette_secondary_dark_background_color">@color/color_def_oppia_light_black</color>
   <color name="color_palette_concept_card_toolbar_color">@color/color_def_dark_pink</color>

app/src/main/res/values/color_palette.xml

@@ -119,8 +119,10 @@
   <color name="color_palette_thumbnail_gradient_end_color">@color/color_def_white</color>
   <color name="color_palette_thumbnail_gradient_start_color">@color/color_def_white_0</color>
   <color name="color_palette_icon_background_secondary_color">@color/color_def_white</color>
-  <color name="color_palette_accent_background_color">@color/color_def_oppia_dark_blue</color>
-  <color name="color_palette_seekbar_progress_background_color">@color/color_def_ocean_blue</color>
+  <color name="color_palette_icon_white_color">@color/color_def_white</color>
+  <color name="color_palette_audio_fragment_background_color">@color/color_def_oppia_dark_blue</color>
+  <color name="color_palette_seekbar_progress_background_color">@color/color_def_stroke_silver</color>
+  <color name="color_palette_seekbar_thumb_shadow_color">@color/color_def_black_54</color>
   <color name="color_palette_toolbar_secondary_color">@color/color_def_oppia_green</color>
   <color name="color_palette_secondary_dark_background_color">@color/color_def_oppia_light_green</color>
   <color name="color_palette_concept_card_toolbar_color">@color/color_def_oppia_brown_dark</color>

app/src/main/res/values/component_colors.xml

@@ -84,6 +84,7 @@
   <color name="component_color_shared_item_highlighted_background_solid_color">@color/color_palette_highlighted_background_color</color>
   <color name="component_color_shared_item_highlighted_background_stroke_color">@color/color_palette_item_background_stroke_color</color>
   <color name="component_color_shared_navbar_header_background_color">@color/color_palette_navbar_header_background_color</color>
+  <color name="component_color_shared_icon_white_color">@color/color_palette_icon_white_color</color>
   <!-- Themes.xml -->
   <color name="component_color_shared_activity_status_bar_color">@color/color_palette_status_bar_color</color>
   <color name="component_color_shared_fragment_status_bar_color">@color/color_palette_fragment_status_bar_color</color>
@@ -214,11 +215,10 @@
   <!-- Concept Card Fragment -->
   <color name="component_color_concept_card_fragment_toolbar_color">@color/color_palette_concept_card_toolbar_color</color>
   <!-- Audio Fragment -->
-  <color name="component_color_audio_fragment_background_color">@color/color_palette_accent_background_color</color>
-  <color name="component_color_audio_fragment_icon_color">@color/color_palette_icon_background_secondary_color</color>
-  <color name="component_color_audio_fragment_thumb_background_color">@color/color_palette_icon_background_secondary_color</color>
+  <color name="component_color_audio_fragment_background_color">@color/color_palette_audio_fragment_background_color</color>
   <color name="component_color_audio_fragment_seekbar_progress_color">@color/color_palette_icon_background_secondary_color</color>
   <color name="component_color_audio_fragment_seekbar_color">@color/color_palette_seekbar_progress_background_color</color>
+  <color name="component_color_audio_fragment_seekbar_thumb_shadow_color">@color/color_palette_seekbar_thumb_shadow_color</color>
   <!-- Profile Progress Activity -->
   <color name="component_color_profile_progress_activity_view_all_text_color">@color/color_palette_view_all_text_color</color>
   <color name="component_color_profile_progress_activity_story_count_card_stroke_color">@color/color_palette_profile_progress_activity_story_count_card_stroke_color</color>