Dark mode implementation - Non Visible Layouts (Topic and Practice Fr…

…agments) (oppia#4870)

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


Dark mode implementation - Non Visible Layouts (Topic and Practice
Fragments)


<!--
- 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

### Info Fragment

<img
src="https://user-images.githubusercontent.com/76530270/216989746-47b0dc3c-7073-49e1-898a-c698c176b13c.png"
height="400" style="max-width: 100%"> <img
src="https://user-images.githubusercontent.com/76530270/216989760-b4df59ba-3d3f-4a49-8592-fa916cf1d70c.png"
height="400" style="max-width: 100%">


### Practice Fragment

<img
src="https://user-images.githubusercontent.com/76530270/216990071-20b23217-4f6d-459a-b73b-81e3d9f7f203.png"
height="400" style="max-width: 100%"> <img
src="https://user-images.githubusercontent.com/76530270/216990075-0b9b7b45-5879-46a9-8cf1-a7e6c62bb19a.png"
height="400" style="max-width: 100%">

<img
src="https://user-images.githubusercontent.com/76530270/216990380-f7e51039-f6e7-4c8b-b8c1-3198f1bba5dc.png"
height="400" style="max-width: 100%"> <img
src="https://user-images.githubusercontent.com/76530270/216990382-1a5512db-7c3d-448b-bb9d-e64480dea914.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/layout-land/topic_info_fragment.xml

@@ -14,7 +14,7 @@
   <ScrollView
     android:layout_width="match_parent"
     android:layout_height="match_parent"
-    android:background="@color/color_def_white"
+    android:background="@color/component_color_shared_screen_primary_background_color"
     android:overScrollMode="never"
     android:scrollbars="none">
 
@@ -34,7 +34,7 @@
         android:layout_marginEnd="72dp"
         android:fontFamily="sans-serif"
         android:text="@{viewModel.topicTitle}"
-        android:textColor="@color/oppia_primary_text"
+        android:textColor="@color/component_color_shared_primary_text_color"
         android:textSize="24sp"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintHorizontal_bias="0.0"
@@ -51,7 +51,7 @@
         android:layout_marginEnd="72dp"
         android:fontFamily="sans-serif"
         android:text="@{viewModel.storyCountText}"
-        android:textColor="@color/oppia_primary_text"
+        android:textColor="@color/component_color_shared_primary_text_color"
         android:textSize="16sp"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintHorizontal_bias="0.0"
@@ -84,7 +84,7 @@
         android:onClick="@{(v) -> viewModel.clickSeeMore()}"
         android:paddingTop="8dp"
         android:text="@{viewModel.isDescriptionExpanded() ? @string/see_less : @string/see_more}"
-        android:textColor="@color/oppia_primary"
+        android:textColor="@color/component_color_shared_active_text_color"
         android:textSize="16sp"
         android:textStyle="bold"
         android:visibility="@{viewModel.isSeeMoreVisible() ? View.VISIBLE : View.GONE}"
@@ -101,10 +101,11 @@
         android:layout_marginTop="24dp"
         android:layout_marginEnd="72dp"
         android:layout_marginBottom="32dp"
-        app:srcCompat="@{viewModel.downloadStatusIndicatorDrawableResourceId, default=@drawable/ic_available_offline_primary_24dp}"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toBottomOf="@+id/see_more_text_view" />
+        app:layout_constraintTop_toBottomOf="@+id/see_more_text_view"
+        app:srcCompat="@{viewModel.downloadStatusIndicatorDrawableResourceId, default=@drawable/ic_available_offline_primary_24dp}"
+        app:tint="@color/component_color_topic_info_fragment_download_status_image_color" />
 
       <TextView
         android:id="@+id/download_story_count_text_view"
@@ -114,7 +115,7 @@
         android:layout_marginStart="12dp"
         android:fontFamily="sans-serif"
         android:text="@string/topic_downloaded"
-        android:textColor="@color/oppia_primary_text"
+        android:textColor="@color/component_color_shared_download_story_text_color"
         android:textSize="18sp"
         app:layout_constraintBottom_toBottomOf="@+id/download_status_image_view"
         app:layout_constraintHorizontal_bias="0.0"
@@ -130,7 +131,7 @@
         android:layout_marginEnd="72dp"
         android:fontFamily="sans-serif"
         android:text="@{viewModel.topicSizeText}"
-        android:textColor="@color/oppia_primary_text"
+        android:textColor="@color/component_color_shared_download_story_text_color"
         android:textSize="18sp"
         android:textStyle="italic"
         app:layout_constraintBottom_toBottomOf="@+id/download_status_image_view"

app/src/main/res/layout-sw600dp-land/resume_lesson_fragment.xml

@@ -21,7 +21,7 @@
       android:layout_width="0dp"
       android:layout_height="match_parent"
       android:layout_weight="1"
-      android:background="@color/component_color_resume_lesson_topic_thumbnail_background_color"
+      android:background="@color/component_color_shared_topic_thumbnail_background_color"
       app:layout_constraintBottom_toBottomOf="parent"
       app:layout_constraintEnd_toEndOf="parent"
       app:layout_constraintStart_toStartOf="@+id/guideline6"

app/src/main/res/layout-sw600dp-land/topic_info_fragment.xml

@@ -31,8 +31,8 @@
           android:layout_marginStart="64dp"
           android:layout_marginEnd="64dp"
           android:fontFamily="sans-serif"
-          android:textColor="@color/oppia_primary_text"
           android:text="@{viewModel.topicTitle}"
+          android:textColor="@color/component_color_shared_primary_text_color"
           android:textSize="24sp"
           app:layout_constraintEnd_toEndOf="parent"
           app:layout_constraintHorizontal_bias="0.0"
@@ -48,7 +48,7 @@
           android:layout_marginEnd="64dp"
           android:fontFamily="sans-serif"
           android:text="@{viewModel.storyCountText}"
-          android:textColor="@color/oppia_primary_text"
+          android:textColor="@color/component_color_shared_primary_text_color"
           android:textSize="16sp"
           app:layout_constraintEnd_toEndOf="parent"
           app:layout_constraintHorizontal_bias="0.0"
@@ -80,7 +80,7 @@
           android:onClick="@{(v) -> viewModel.clickSeeMore()}"
           android:paddingTop="8dp"
           android:text="@{viewModel.isDescriptionExpanded() ? @string/see_less : @string/see_more}"
-          android:textColor="@color/oppia_primary"
+          android:textColor="@color/component_color_shared_active_text_color"
           android:textSize="16sp"
           android:textStyle="bold"
           android:visibility="@{viewModel.isSeeMoreVisible() ? View.VISIBLE : View.GONE}"
@@ -95,10 +95,11 @@
           android:layout_height="20dp"
           android:layout_marginStart="64dp"
           android:layout_marginTop="32dp"
-          app:srcCompat="@{viewModel.downloadStatusIndicatorDrawableResourceId, default=@drawable/ic_available_offline_primary_24dp}"
           app:layout_constraintBottom_toBottomOf="parent"
           app:layout_constraintStart_toStartOf="parent"
-          app:layout_constraintTop_toBottomOf="@+id/see_more_text_view" />
+          app:layout_constraintTop_toBottomOf="@+id/see_more_text_view"
+          app:srcCompat="@{viewModel.downloadStatusIndicatorDrawableResourceId, default=@drawable/ic_available_offline_primary_24dp}"
+          app:tint="@color/component_color_topic_info_fragment_download_status_image_color" />
 
         <TextView
           android:id="@+id/download_story_count_text_view"
@@ -108,7 +109,7 @@
           android:layout_marginStart="12dp"
           android:fontFamily="sans-serif"
           android:text="@string/topic_downloaded"
-          android:textColor="@color/oppia_primary_text"
+          android:textColor="@color/component_color_shared_download_story_text_color"
           android:textSize="18sp"
           app:layout_constraintBottom_toBottomOf="@+id/download_status_image_view"
           app:layout_constraintHorizontal_bias="0.0"
@@ -123,7 +124,7 @@
           android:layout_marginEnd="32dp"
           android:fontFamily="sans-serif"
           android:text="@{viewModel.topicSizeText}"
-          android:textColor="@color/oppia_primary_text"
+          android:textColor="@color/component_color_shared_download_story_text_color"
           android:textSize="18sp"
           android:textStyle="italic"
           app:layout_constraintBottom_toBottomOf="@+id/download_status_image_view"
@@ -137,7 +138,7 @@
       android:layout_width="0dp"
       android:layout_height="match_parent"
       android:layout_weight="1"
-      android:background="@color/topic_thumbnail_background"
+      android:background="@color/component_color_shared_topic_thumbnail_background_color"
       app:layout_constraintBottom_toBottomOf="parent"
       app:layout_constraintEnd_toEndOf="parent"
       app:layout_constraintStart_toStartOf="@+id/guideline6"

app/src/main/res/layout-sw600dp-port/topic_info_fragment.xml

@@ -12,7 +12,7 @@
   <ScrollView
     android:layout_width="match_parent"
     android:layout_height="match_parent"
-    android:background="@color/color_def_white"
+    android:background="@color/component_color_shared_screen_primary_background_color"
     android:overScrollMode="never"
     android:scrollbars="none">
 
@@ -52,7 +52,7 @@
         android:layout_marginEnd="120dp"
         android:fontFamily="sans-serif"
         android:text="@{viewModel.topicTitle}"
-        android:textColor="@color/oppia_primary_text"
+        android:textColor="@color/component_color_shared_primary_text_color"
         android:textSize="24sp"
         app:layout_constraintBottom_toBottomOf="@+id/topic_thumbnail_image_view"
         app:layout_constraintEnd_toEndOf="parent"
@@ -69,7 +69,7 @@
         android:layout_marginEnd="120dp"
         android:fontFamily="sans-serif"
         android:text="@{viewModel.storyCountText}"
-        android:textColor="@color/oppia_primary_text"
+        android:textColor="@color/component_color_shared_primary_text_color"
         android:textSize="16sp"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintHorizontal_bias="0.0"
@@ -101,7 +101,7 @@
         android:onClick="@{(v) -> viewModel.clickSeeMore()}"
         android:paddingTop="8dp"
         android:text="@{viewModel.isDescriptionExpanded() ? @string/see_less : @string/see_more}"
-        android:textColor="@color/oppia_primary"
+        android:textColor="@color/component_color_shared_active_text_color"
         android:textSize="16sp"
         android:textStyle="bold"
         android:visibility="@{viewModel.isSeeMoreVisible() ? View.VISIBLE : View.GONE}"
@@ -116,9 +116,10 @@
         android:layout_height="20dp"
         android:layout_marginStart="120dp"
         android:layout_marginTop="24dp"
-        app:srcCompat="@{viewModel.downloadStatusIndicatorDrawableResourceId, default=@drawable/ic_available_offline_primary_24dp}"
         app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toBottomOf="@+id/see_more_text_view" />
+        app:layout_constraintTop_toBottomOf="@+id/see_more_text_view"
+        app:srcCompat="@{viewModel.downloadStatusIndicatorDrawableResourceId, default=@drawable/ic_available_offline_primary_24dp}"
+        app:tint="@color/component_color_topic_info_fragment_download_status_image_color" />
 
       <TextView
         android:id="@+id/download_story_count_text_view"
@@ -128,7 +129,7 @@
         android:layout_marginStart="12dp"
         android:fontFamily="sans-serif"
         android:text="@string/topic_downloaded"
-        android:textColor="@color/oppia_primary_text"
+        android:textColor="@color/component_color_shared_download_story_text_color"
         android:textSize="18sp"
         app:layout_constraintBottom_toBottomOf="@+id/download_status_image_view"
         app:layout_constraintHorizontal_bias="0.0"
@@ -144,7 +145,7 @@
         android:layout_marginEnd="32dp"
         android:fontFamily="sans-serif"
         android:text="@{viewModel.topicSizeText}"
-        android:textColor="@color/oppia_primary_text"
+        android:textColor="@color/component_color_shared_download_story_text_color"
         android:textSize="18sp"
         android:textStyle="italic"
         app:layout_constraintBottom_toBottomOf="@+id/download_status_image_view"

app/src/main/res/layout-sw600dp/topic_practice_fragment.xml

@@ -13,7 +13,7 @@
     android:id="@+id/topic_practice_skill_list"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
-    android:background="@color/oppia_background"
+    android:background="@color/component_color_shared_screen_quaternary_background_color"
     android:clipToPadding="false"
     android:overScrollMode="never"
     android:paddingBottom="112dp"

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

@@ -14,7 +14,7 @@
   <ScrollView
     android:layout_width="match_parent"
     android:layout_height="match_parent"
-    android:background="@color/component_color_topic_info_fragment_background_color"
+    android:background="@color/component_color_shared_screen_primary_background_color"
     android:overScrollMode="never"
     android:scrollbars="none">
 
@@ -56,7 +56,7 @@
         android:layout_marginBottom="8dp"
         android:fontFamily="sans-serif"
         android:text="@{viewModel.topicTitle}"
-        android:textColor="@color/component_color_topic_info_fragment_topic_name_text_color"
+        android:textColor="@color/component_color_shared_primary_text_color"
         android:textSize="24sp"
         app:layout_constraintBottom_toBottomOf="@+id/topic_thumbnail_image_view"
         app:layout_constraintEnd_toEndOf="parent"
@@ -73,7 +73,7 @@
         android:layout_marginEnd="32dp"
         android:fontFamily="sans-serif"
         android:text="@{viewModel.storyCountText}"
-        android:textColor="@color/component_color_topic_info_fragment_story_count_text_color"
+        android:textColor="@color/component_color_shared_primary_text_color"
         android:textSize="16sp"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintHorizontal_bias="0.0"
@@ -106,7 +106,7 @@
         android:onClick="@{(v) -> viewModel.clickSeeMore()}"
         android:paddingTop="8dp"
         android:text="@{viewModel.isDescriptionExpanded() ? @string/see_less : @string/see_more}"
-        android:textColor="@color/component_color_topic_info_fragment_see_more_text_color"
+        android:textColor="@color/component_color_shared_active_text_color"
         android:textSize="16sp"
         android:textStyle="bold"
         android:visibility="@{viewModel.isSeeMoreVisible() ? View.VISIBLE : View.GONE}"
@@ -122,10 +122,10 @@
         android:layout_marginStart="32dp"
         android:layout_marginTop="24dp"
         android:layout_marginBottom="32dp"
-        app:srcCompat="@{viewModel.downloadStatusIndicatorDrawableResourceId, default=@drawable/ic_available_offline_primary_24dp}"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintTop_toBottomOf="@+id/see_more_text_view"
+        app:srcCompat="@{viewModel.downloadStatusIndicatorDrawableResourceId, default=@drawable/ic_available_offline_primary_24dp}"
         app:tint="@color/component_color_topic_info_fragment_download_status_image_color" />
 
       <TextView
@@ -136,7 +136,7 @@
         android:layout_marginStart="12dp"
         android:fontFamily="sans-serif"
         android:text="@string/topic_downloaded"
-        android:textColor="@color/component_color_topic_info_fragment_download_story_count_text_color"
+        android:textColor="@color/component_color_shared_download_story_text_color"
         android:textSize="18sp"
         app:layout_constraintBottom_toBottomOf="@+id/download_status_image_view"
         app:layout_constraintHorizontal_bias="0.0"
@@ -152,7 +152,7 @@
         android:layout_marginEnd="32dp"
         android:fontFamily="sans-serif"
         android:text="@{viewModel.topicSizeText}"
-        android:textColor="@color/component_color_topic_info_fragment_download_story_size_text_color"
+        android:textColor="@color/component_color_shared_download_story_text_color"
         android:textSize="18sp"
         android:textStyle="italic"
         app:layout_constraintBottom_toBottomOf="@+id/download_status_image_view"

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

@@ -31,7 +31,7 @@
       android:fontFamily="sans-serif-medium"
       android:minHeight="@dimen/clickable_item_min_height"
       android:text="@string/topic_practice_start"
-      android:textColor="@{isSubmitButtonActive ? @color/color_def_white : @color/submit_button_text_inactive}"
+      android:textColor="@{isSubmitButtonActive ? @color/component_color_shared_submit_text_active_color : @color/component_color_shared_submit_text_inactive_color}"
       app:layout_constraintBottom_toBottomOf="parent"
       app:layout_constraintEnd_toEndOf="parent"
       app:layout_constraintStart_toStartOf="parent"

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

@@ -13,7 +13,7 @@
     android:id="@+id/topic_practice_skill_list"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
-    android:background="@color/component_color_topic_practice_fragment_background_color"
+    android:background="@color/component_color_shared_screen_quaternary_background_color"
     android:clipToPadding="false"
     android:overScrollMode="never"
     android:paddingStart="@dimen/topic_practice_fragment_padding_start"

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

@@ -51,7 +51,7 @@
           android:minHeight="@dimen/clickable_item_min_height"
           android:text="@{viewModel.subtopicTitle}"
           android:textAlignment="viewStart"
-          android:textColor="@color/component_color_shared_secondary_4_text_color"
+          android:textColor="@color/component_color_shared_primary_text_color"
           android:textSize="16sp"
           app:drawableStartCompat="@android:color/transparent"
           app:layout_constraintBottom_toBottomOf="parent"

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

@@ -54,7 +54,7 @@
   <color name="color_palette_item_selection_selected_text_color">@color/color_def_white</color>
   <color name="color_palette_item_selection_unselected_text_color">@color/color_def_oppia_turquoise</color>
   <color name="color_palette_forgot_pin_color">@color/color_def_oppia_turquoise</color>
-  <color name="color_palette_show_text_color">@color/color_def_oppia_turquoise</color>
+  <color name="color_palette_shared_download_story_text_color">@color/color_def_oppia_turquoise</color>
   <color name="color_palette_error_text_color">@color/color_def_oppia_pink</color>
   <color name="color_palette_show_hide_color">@color/color_def_oppia_turquoise</color>
   <color name="color_palette_info_icon_color">@color/color_def_oppia_silver</color>

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

@@ -57,7 +57,7 @@
   <color name="color_palette_multiple_choice_selected_color">@color/color_def_oppia_dark_blue</color>
   <color name="color_palette_multiple_choice_selected_text_color">@color/color_def_oppia_dark_blue</color>
   <color name="color_palette_forgot_pin_color">@color/color_def_oppia_green</color>
-  <color name="color_palette_show_text_color">@color/color_def_accessible_grey</color>
+  <color name="color_palette_shared_download_story_text_color">@color/color_def_accessible_grey</color>
   <color name="color_palette_error_text_color">@color/color_def_error_text</color>
   <color name="color_palette_show_hide_color">@color/color_def_oppia_green</color>
   <color name="color_palette_info_icon_color">@color/color_def_chooser_grey</color>