Fixes Part Of #4194: Added dark mode support to DrawerFragment, Conce…

…ptCardFragment and AudioFragment (#4395) * added dark mode * Rearranged code in concept_card_fragment.xml * corrected
oppia · Jul 11, 2022 · 3441214 · 3441214
1 parent 4349295
commit 3441214
Show file tree

Hide file tree

Showing 12 changed files with 79 additions and 16 deletions.
diff --git a/app/src/main/res/color/drawer_item.xml b/app/src/main/res/color/drawer_item.xml
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
 <selector xmlns:android="http://schemas.android.com/apk/res/android">
-  <item android:color="@color/highlighted_nav_menu_item" android:state_checked="true" />
-  <item android:color="@color/color_def_black" />
+  <item android:color="@color/component_color_drawer_fragment_selected_text_color" android:state_checked="true" />
+  <item android:color="@color/component_color_drawer_fragment_text_color" />
 </selector>
diff --git a/app/src/main/res/drawable/audio_background.xml b/app/src/main/res/drawable/audio_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/audio_component_background" />
+  <solid android:color="@color/component_color_audio_fragment_background_color" />
 </shape>
diff --git a/app/src/main/res/drawable/seekbar_thumb.xml b/app/src/main/res/drawable/seekbar_thumb.xml
@@ -17,7 +17,7 @@
     android:left="8dp"
     android:top="4dp">
     <shape android:shape="oval">
-      <solid android:color="@color/color_def_white" />
+      <solid android:color="@color/component_color_audio_fragment_thumb_background_color" />
       <corners android:radius="10dp" />
     </shape>
   </item>

diff --git a/app/src/main/res/layout/audio_fragment.xml b/app/src/main/res/layout/audio_fragment.xml
@@ -36,6 +36,7 @@
       android:onClick="@{(v) -> viewModel.togglePlayPause(viewModel.playStatusLiveData)}"
       android:padding="12dp"
       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:layout_constraintBottom_toBottomOf="parent"
       app:layout_constraintStart_toStartOf="parent"
       app:layout_constraintTop_toTopOf="parent" />
@@ -70,6 +71,7 @@
       android:onClick="@{(v) -> audioFragment.languageSelectionClicked()}"
       android:padding="12dp"
       app:srcCompat="@drawable/ic_audio_lang_24px"
+      app:tint="@color/component_color_audio_fragment_icon_color"
       app:layout_constraintBottom_toBottomOf="parent"
       app:layout_constraintEnd_toEndOf="parent"
       app:layout_constraintTop_toTopOf="parent" />

diff --git a/app/src/main/res/layout/concept_card_fragment.xml b/app/src/main/res/layout/concept_card_fragment.xml
@@ -13,13 +13,13 @@
   <androidx.constraintlayout.widget.ConstraintLayout
     android:layout_width="match_parent"
     android:layout_height="match_parent"
-    android:background="@color/concept_card_background">
+    android:background="@color/component_color_concept_card_fragment_background_color">
 
     <androidx.appcompat.widget.Toolbar
       android:id="@+id/concept_card_toolbar"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
-      android:background="@color/concept_toolbar_background"
+      android:background="@color/component_color_concept_card_fragment_toolbar_color"
       app:layout_constraintEnd_toEndOf="parent"
       app:layout_constraintStart_toStartOf="parent"
       app:layout_constraintTop_toTopOf="parent"
@@ -58,15 +58,16 @@
             android:layout_marginEnd="@dimen/concept_card_heading_text_margin_end"
             android:fontFamily="sans-serif-medium"
             android:text="@{viewModel.conceptCardLiveData.conceptCard.skillDescription}"
-            android:textColor="@color/oppia_primary_text"
+            android:textColor="@color/component_color_concept_card_fragment_text_color"
             android:textSize="20sp" />
 
           <TextView
             android:id="@+id/concept_card_explanation_text"
             style="@style/Body"
             android:layout_marginStart="@dimen/concept_card_explanation_text_margin_start"
             android:layout_marginTop="@dimen/concept_card_explanation_text_margin_top"
-            android:layout_marginEnd="@dimen/concept_card_explanation_text_margin_end" />
+            android:layout_marginEnd="@dimen/concept_card_explanation_text_margin_end"
+            android:textColor="@color/component_color_concept_card_fragment_text_color" />
         </LinearLayout>
         <!-- TODO(#352): Show worked examples in Concept Card. -->
       </ScrollView>

diff --git a/app/src/main/res/layout/drawer_fragment.xml b/app/src/main/res/layout/drawer_fragment.xml
@@ -25,6 +25,7 @@
       <LinearLayout
         android:layout_width="match_parent"
         android:layout_height="match_parent"
+        android:background="@color/component_color_drawer_fragment_background_color"
         android:orientation="vertical">
 
         <com.google.android.material.navigation.NavigationView
@@ -35,6 +36,7 @@
           android:fitsSystemWindows="true"
           android:overScrollMode="never"
           android:scrollbars="none"
+          android:background="@color/component_color_drawer_fragment_background_color"
           app:elevation="0dp"
           app:itemBackground="@android:color/transparent"
           app:itemIconTint="@color/drawer_item"
@@ -66,7 +68,7 @@
             android:layout_height="24dp"
             android:layout_gravity="center_vertical"
             app:srcCompat="@drawable/ic_baseline_code_24"
-            android:tint="@{footerViewModel.isDeveloperOptionsSelected ? @color/highlighted_developer_options_nav_menu_item : @color/oppia_primary_text_dark}"/>
+            android:tint="@{footerViewModel.isDeveloperOptionsSelected ? @color/component_color_drawer_fragment_developer_options_selected_image_color : @color/component_color_drawer_fragment_developer_options_image_color}"/>
 
           <TextView
             android:layout_width="match_parent"
@@ -75,7 +77,7 @@
             android:layout_marginStart="12dp"
             android:fontFamily="sans-serif-medium"
             android:text="@string/developer_options"
-            android:textColor="@{footerViewModel.isDeveloperOptionsSelected ? @color/highlighted_developer_options_nav_menu_item : @color/oppia_primary_text_dark}"
+            android:textColor="@{footerViewModel.isDeveloperOptionsSelected ? @color/component_color_drawer_fragment_developer_options_selected_text_color : @color/component_color_drawer_fragment_developer_options_text_color}"
             android:textSize="14sp" />
         </LinearLayout>
 
@@ -97,7 +99,7 @@
             android:layout_height="24dp"
             android:layout_gravity="center_vertical"
             app:srcCompat="@drawable/ic_admin_settings_icon_brown_24dp"
-            android:tint="@{footerViewModel.isAdministratorControlsSelected ? @color/highlighted_nav_menu_item : @color/oppia_primary_text_dark}" />
+            android:tint="@{footerViewModel.isAdministratorControlsSelected ? @color/component_color_drawer_fragment_admin_controls_selected_image_color : @color/component_color_drawer_fragment_admin_controls_image_color}" />
 
           <TextView
             android:layout_width="match_parent"
@@ -106,7 +108,7 @@
             android:layout_marginStart="12dp"
             android:fontFamily="sans-serif-medium"
             android:text="@string/administrator_controls"
-            android:textColor="@{footerViewModel.isAdministratorControlsSelected ? @color/highlighted_nav_menu_item : @color/oppia_primary_text_dark}"
+            android:textColor="@{footerViewModel.isAdministratorControlsSelected ? @color/component_color_drawer_fragment_admin_controls_selected_text_color : @color/component_color_drawer_fragment_admin_controls_text_color}"
             android:textSize="14sp" />
         </LinearLayout>
       </LinearLayout>

diff --git a/app/src/main/res/values-night/color_palette.xml b/app/src/main/res/values-night/color_palette.xml
@@ -45,6 +45,18 @@
   <color name="color_palette_error_text_color">@color/color_def_oppia_pink</color>
   <color name="color_palette_show_eye_icon_color">@color/color_def_forest_green</color>
   <color name="color_palette_hide_eye_icon_color">@color/color_def_forest_green</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_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>
+  <color name="color_palette_menu_selected_text_color">@color/color_def_oppia_pink</color>
+  <color name="color_palette_developer_option_menu_selected_color">@color/color_def_persian_blue</color>
+  <color name="color_palette_underline_view_color">@color/color_def_bright_green</color>
+  <color name="color_palette_menu_text_color">@color/color_def_white</color>
+  <color name="color_palette_secondary_container_background_color">@color/color_def_oppia_metallic_blue</color>
+  <color name="color_palette_concept_status_bar_color">@color/color_def_dark_purple</color>
   <color name="color_palette_disabled_button_background_color">@color/color_def_black_grey</color>
   <color name="color_palette_back_arrow_button_color">@color/color_def_oppia_turquoise</color>
   <color name="color_palette_replay_button_color">@color/color_def_dark_pink</color>

diff --git a/app/src/main/res/values-v21/styles.xml b/app/src/main/res/values-v21/styles.xml
@@ -9,9 +9,9 @@
   </style>
 
   <style name="AudioSeekBar" parent="Widget.AppCompat.SeekBar">
-    <item name="android:progressBackgroundTint">@color/progress_background_tint</item>
-    <item name="android:progressTint">@color/color_def_white</item>
-    <item name="android:colorControlActivated">@color/progress_background_tint</item>
+    <item name="android:progressBackgroundTint">@color/component_color_audio_fragment_seekbar_color</item>
+    <item name="android:progressTint">@color/component_color_audio_fragment_seekbar_progress_color</item>
+    <item name="android:colorControlActivated">@color/component_color_audio_fragment_seekbar_color</item>
   </style>
 
   <style name="ReadingTextSizeSeekBar" parent="Widget.AppCompat.SeekBar">

diff --git a/app/src/main/res/values/color_defs.xml b/app/src/main/res/values/color_defs.xml
@@ -57,6 +57,17 @@
   <color name="color_def_yellow_ivory">#FFFFF0</color>
   <color name="color_def_chooser_grey">#999999</color>
   <color name="color_def_green">#02655c</color>
+  <color name="color_def_error">#923026</color>
+  <color name="color_def_maastricht_blue">#0e162f</color>
+  <color name="color_def_ocean_blue">#081661</color>
+  <color name="color_def_dark_pink">#8A3D69</color>
+  <color name="color_def_persian_blue">#00609C</color>
+  <color name="color_def_bright_green">#009C8A</color>
+  <color name="color_def_grape_violet">#674172</color>
+  <color name="color_def_bright_violet">#7659B6</color>
+  <color name="color_def_teal_blue">#2F6687</color>
+  <color name="color_def_dark_red">#A6503A</color>
+  <color name="color_def_dark_purple">#441530</color>
   <color name="color_def_error_text">#923026</color>
   <color name="color_def_black_grey">#33999999</color>
   <color name="color_def_dark_pink">#8A3D69</color>

diff --git a/app/src/main/res/values/color_palette.xml b/app/src/main/res/values/color_palette.xml
@@ -45,6 +45,18 @@
   <color name="color_palette_error_text_color">@color/color_def_error_text</color>
   <color name="color_palette_show_eye_icon_color">@color/color_def_accessible_grey</color>
   <color name="color_palette_hide_eye_icon_color">@color/color_def_accessible_grey</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_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>
+  <color name="color_palette_menu_selected_text_color">@color/color_def_oppia_brown_dark</color>
+  <color name="color_palette_developer_option_menu_selected_color">@color/color_def_persian_blue</color>
+  <color name="color_palette_underline_view_color">@color/color_def_oppia_light_brown</color>
+  <color name="color_palette_menu_text_color">@color/color_def_black</color>
+  <color name="color_palette_secondary_container_background_color">@color/color_def_teal_blue</color>
+  <color name="color_palette_concept_status_bar_color">@color/color_def_dark_red</color>
   <color name="color_palette_disabled_button_background_color">@color/color_def_black_grey</color>
   <color name="color_palette_back_arrow_button_color">@color/color_def_oppia_dark_blue</color>
   <color name="color_palette_replay_button_color">@color/color_def_oppia_brown_dark</color>

diff --git a/app/src/main/res/values/component_colors.xml b/app/src/main/res/values/component_colors.xml
@@ -176,4 +176,27 @@
   <color name="component_color_math_expression_parser_activity_radio_buttons_color">@color/color_palette_dark_text_color</color>
   <color name="component_color_math_expression_parser_activity_edit_text_color">@color/color_palette_dark_text_color</color>
   <color name="component_color_math_expression_parser_activity_hint_text_color">@color/color_palette_hint_text_color</color>
+  <!-- Drawer Fragment -->
+  <color name="component_color_drawer_fragment_background_color">@color/color_palette_primary_container_background_color</color>
+  <color name="component_color_drawer_fragment_selected_text_color">@color/color_palette_menu_selected_text_color</color>
+  <color name="component_color_drawer_fragment_text_color">@color/color_palette_menu_text_color</color>
+  <color name="component_color_drawer_fragment_developer_options_text_color">@color/color_palette_dark_text_color</color>
+  <color name="component_color_drawer_fragment_developer_options_selected_text_color">@color/color_palette_developer_option_menu_selected_color</color>
+  <color name="component_color_drawer_fragment_developer_options_image_color">@color/color_palette_dark_text_color</color>
+  <color name="component_color_drawer_fragment_developer_options_selected_image_color">@color/color_palette_developer_option_menu_selected_color</color>
+  <color name="component_color_drawer_fragment_admin_controls_text_color">@color/color_palette_dark_text_color</color>
+  <color name="component_color_drawer_fragment_admin_controls_selected_text_color">@color/color_palette_menu_selected_text_color</color>
+  <color name="component_color_drawer_fragment_admin_controls_image_color">@color/color_palette_dark_text_color</color>
+  <color name="component_color_drawer_fragment_admin_controls_selected_image_color">@color/color_palette_menu_selected_text_color</color>
+  <!-- Concept Card Fragment -->
+  <color name="component_color_concept_card_fragment_toolbar_color">@color/color_palette_concept_card_toolbar_color</color>
+  <color name="component_color_concept_card_fragment_status_bar_color">@color/color_palette_concept_status_bar_color</color>
+  <color name="component_color_concept_card_fragment_background_color">@color/color_palette_background_color</color>
+  <color name="component_color_concept_card_fragment_text_color">@color/color_palette_highlighted_text_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_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>
 </resources>
diff --git a/app/src/main/res/values/styles.xml b/app/src/main/res/values/styles.xml
@@ -21,7 +21,7 @@
 
   <style name="FullScreenDialogStyle" parent="Theme.MaterialComponents.Dialog.Bridge">
     <item name="android:windowNoTitle">true</item>
-    <item name="colorPrimaryDark">@color/concept_toolbar_heading</item>
+    <item name="colorPrimaryDark">@color/component_color_concept_card_fragment_status_bar_color</item>
     <!-- Set this to true if you want Full Screen without status bar -->
     <item name="android:windowFullscreen">false</item>
     <item name="android:windowIsFloating">false</item>