Fixes #4738, #4381, #4734: Dark mode implementation - everything befo…

…re Home screen - Onboarding, ProfileChooser, PinPassword, AddProfile, AdminAuth, AdminPin (#4774)  ## Explanation  Dark mode implementation - everything before Home screen - Onboarding, ProfileChooser, PinPassword, AddProfile, AdminAuth, AdminPin Fixes #4738 - Some views have very low visibility on add user profile screen in dark mode [A11y] Fixes #4381 : Different shades of fillColor used in portrait and landscape of ic_onboarding_2.xml Fixes #4734 : Contrast issue in show/hide password icon ## Essential Checklist  - [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 ### Onboarding Screen <img src="https://user-images.githubusercontent.com/9396084/206449915-cfa457dd-bd09-42ba-8140-17879db7a743.png" height="400" /> <img src="https://user-images.githubusercontent.com/9396084/206449951-3b940616-a652-45d5-bc19-a34fb957906d.png" height="400" /> <img src="https://user-images.githubusercontent.com/9396084/206449932-b8f94c2c-d08f-4890-b510-97ac472fbf31.png" height="400" /> <img src="https://user-images.githubusercontent.com/9396084/206449956-90a05426-ee4f-4fea-b4ec-e9474b454031.png" height="400" /> <img src="https://user-images.githubusercontent.com/9396084/206449942-caf05f2f-85b2-4817-8abe-362e1fd94ccb.png" height="400" /> <img src="https://user-images.githubusercontent.com/9396084/206449958-31e43303-af47-4252-a2be-3831a8507446.png" height="400" /> <img src="https://user-images.githubusercontent.com/9396084/206449943-bdd66537-4685-47ee-abc2-fd1d75e643f4.png" height="400" /> <img src="https://user-images.githubusercontent.com/9396084/206449959-24b4a5da-113f-484d-a664-e7a3f00fcd33.png" height="400" /> ### Profile Chooser (Same for dark mode and light mode) <img src="https://user-images.githubusercontent.com/9396084/206450271-e5df8e5e-4c7c-486f-890a-9560762e89be.png" height="400" /> ### Add Admin Pin <img src="https://user-images.githubusercontent.com/9396084/206450496-67e629da-6378-4a9e-8fa5-18d4aad9e581.png" height="400" /> <img src="https://user-images.githubusercontent.com/9396084/206450484-41bc68c0-c86e-4a16-9919-60cb753913d2.png" height="400" /> <img src="https://user-images.githubusercontent.com/9396084/206450501-cd8af9b4-c9ff-4e1f-9309-8209dc4b1221.png" height="400" /> <img src="https://user-images.githubusercontent.com/9396084/206450509-fda81199-5cef-49d3-9c3a-dc19c36fa9db.png" height="400" /> ### Admin Auth <img src="https://user-images.githubusercontent.com/9396084/206450721-8b226358-eb30-4577-8242-13297949028a.png" height="400" /> <img src="https://user-images.githubusercontent.com/9396084/206450695-7ff2009e-9408-4f33-8762-dc861d69e1e7.png" height="400" /> <img src="https://user-images.githubusercontent.com/9396084/206450706-541bd34b-d69b-4bc3-aa65-ca28ee08254b.png" height="400" /> <img src="https://user-images.githubusercontent.com/9396084/206450713-15e46f91-ac27-4bb5-bed7-30c97fe4f6ea.png" height="400" /> ### Pin Password <img src="https://user-images.githubusercontent.com/9396084/206451312-c940013e-1eb0-4160-ab3f-e9734f5d0f99.png" height="400" /> <img src="(https://user-images.githubusercontent.com/9396084/206451325-a846e17f-99c7-48b3-915c-9734a5dff5ed.png" height="400" /> <img src="https://user-images.githubusercontent.com/9396084/206451320-965d86e1-19c8-42f9-aaa0-58bb8d7bf992.png" height="400" /> <img src="https://user-images.githubusercontent.com/9396084/206451333-a0e104f6-89ef-45a9-9e8b-d5e30b55f9b6.png" height="400" /> ### Add Profile <img src="https://user-images.githubusercontent.com/9396084/206451514-8338a850-1d64-451c-9cb8-6c06450dc97c.png" height="400" /> <img src="https://user-images.githubusercontent.com/9396084/206451536-bd9e04b2-1913-4993-9413-264707f9cc03.png" height="400" /> <img src="https://user-images.githubusercontent.com/9396084/206451526-378f439e-b7f6-4c89-a638-fe9e0e2118f9.png" height="400" /> <img src="https://user-images.githubusercontent.com/9396084/206451545-f037a1a3-abfb-4177-9844-2790e0b33f88.png" height="400" /> ### Tablet Design Recording [device-2022-12-08-183826.webm](https://user-images.githubusercontent.com/9396084/206454707-5075dee7-59a9-47db-abe9-eb47e314465e.webm)
oppia · Dec 10, 2022 · 8bb98a4 · 8bb98a4
1 parent 3928c18
commit 8bb98a4
Show file tree

Hide file tree

Showing 48 changed files with 267 additions and 190 deletions.
diff --git a/app/src/main/res/color/shared_checkbox_selector.xml b/app/src/main/res/color/shared_checkbox_selector.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<selector xmlns:android="http://schemas.android.com/apk/res/android">
+  <item android:alpha="0.38" android:color="@color/component_color_shared_checkbox_disabled_color" android:state_checked="false" android:state_enabled="false" />
+  <item android:color="@color/component_color_shared_checkbox_unchecked_color" android:state_checked="false" android:state_enabled="true" />
+  <item android:color="@color/component_color_shared_checkbox_checked_color" android:state_checked="true" />
+</selector>
diff --git a/app/src/main/res/drawable/ic_arrow_forward_black_24dp.xml b/app/src/main/res/drawable/ic_arrow_forward_black_24dp.xml
@@ -1,7 +1,6 @@
 <vector xmlns:android="http://schemas.android.com/apk/res/android"
   android:width="24dp"
   android:height="24dp"
-  android:tint="@color/component_color_onboarding_activity_arrow_color"
   android:viewportWidth="24.0"
   android:viewportHeight="24.0"
   android:autoMirrored="true">

diff --git a/app/src/main/res/drawable/ic_hide_eye_icon.xml b/app/src/main/res/drawable/ic_hide_eye_icon.xml
@@ -1,7 +1,6 @@
 <vector xmlns:android="http://schemas.android.com/apk/res/android"
     android:width="24dp"
     android:height="24dp"
-    android:tint="@color/component_color_pin_password_activity_hide_eye_icon_color"
     android:viewportWidth="24"
     android:viewportHeight="24">
   <path

diff --git a/app/src/main/res/drawable/ic_landscape_onboarding_2.xml b/app/src/main/res/drawable/ic_landscape_onboarding_2.xml
@@ -35,5 +35,5 @@
   </path>
   <path
       android:pathData="M202.2,157.8H167V105H114.2v52.8H79l61.6,61.6ZM79,237v17.6H202.2V237Z"
-      android:fillColor="#02655c"/>
+      android:fillColor="#00645c"/>
 </vector>
diff --git a/app/src/main/res/drawable/ic_landscape_onboarding_2_tablet.xml b/app/src/main/res/drawable/ic_landscape_onboarding_2_tablet.xml
@@ -11,7 +11,7 @@
     <path
         android:pathData="M59.4,149.2C25,168.1 2.5,206.8 -18.7,244c-11.7,20.6 -23,40.8 -35.7,57L-200,155.4L139.4,-184L293.7,-29.7c-0.6,19.7 -7.8,46.5 -29.1,82c-7.2,12.2 -15.8,23.5 -25.7,33.7C186.1,138.6 124.7,113.4 59.4,149.2z">
       <aapt:attr name="android:fillColor">
-        <gradient 
+        <gradient
             android:startY="91.72759"
             android:startX="243.86374"
             android:endY="39.447502"
@@ -25,7 +25,7 @@
     <path
         android:pathData="M20.8,376.2L-200,155.4L139.4,-184L305,-18.4c11.5,37 13.8,77.3 -7.3,112.4c-58,96.6 -182.9,21.5 -246.7,84.1c-29.2,28.6 -25,66.6 -19.4,103.3c5.5,36.4 12.5,71.4 -10.6,94.5L20.8,376.2z">
       <aapt:attr name="android:fillColor">
-        <gradient 
+        <gradient
             android:startY="155.68356"
             android:startX="305.44385"
             android:endY="53.203266"
@@ -42,6 +42,6 @@
         android:pathData="M0,-12h320v360h-320z"/>
     <path
         android:pathData="M221.6,134h-35.2V81.2h-52.8V134H98.4l61.6,61.6L221.6,134zM98.4,213.2v17.6h123.2v-17.6H98.4z"
-        android:fillColor="#02655C"/>
+        android:fillColor="#00645c"/>
   </group>
 </vector>
diff --git a/app/src/main/res/drawable/ic_show_eye_icon.xml b/app/src/main/res/drawable/ic_show_eye_icon.xml
@@ -1,7 +1,6 @@
 <vector xmlns:android="http://schemas.android.com/apk/res/android"
     android:width="24dp"
     android:height="24dp"
-    android:tint="@color/component_color_pin_password_activity_show_eye_icon_color"
     android:viewportWidth="24"
     android:viewportHeight="24">
   <path

diff --git a/app/src/main/res/drawable/primary_rounded_button.xml b/app/src/main/res/drawable/primary_rounded_button.xml
@@ -2,5 +2,5 @@
 <shape xmlns:android="http://schemas.android.com/apk/res/android"
   android:shape="rectangle">
   <corners android:radius="4dp" />
-  <solid android:color="@color/oppia_primary" />
+  <solid android:color="@color/color_palette_primary_button_background_color" />
 </shape>
diff --git a/app/src/main/res/drawable/start_button_transparent_background.xml b/app/src/main/res/drawable/start_button_transparent_background.xml
@@ -5,10 +5,10 @@
       <item>
         <shape>
           <corners android:radius="4dp" />
-          <solid android:color="@color/oppia_disabled_button_background" />
+          <solid android:color="@color/component_color_shared_button_inactive_solid_color" />
           <stroke
             android:width="1dp"
-            android:color="@color/component_color_start_button_transparent_background_stroke_color" />
+            android:color="@color/component_color_shared_button_inactive_stroke_color" />
         </shape>
       </item>
     </layer-list>

diff --git a/app/src/main/res/drawable/state_button_inactive_background.xml b/app/src/main/res/drawable/state_button_inactive_background.xml
@@ -2,8 +2,8 @@
 <shape xmlns:android="http://schemas.android.com/apk/res/android"
   android:shape="rectangle">
   <corners android:radius="@dimen/state_previous_next_button_radius" />
-  <solid android:color="@color/component_color_shared_submit_button_inactive_solid_color" />
+  <solid android:color="@color/component_color_shared_button_inactive_solid_color" />
   <stroke
     android:width="1dp"
-    android:color="@color/component_color_shared_submit_button_inactive_stroke_color" />
+    android:color="@color/component_color_shared_button_inactive_stroke_color" />
 </shape>
diff --git a/app/src/main/res/drawable/state_button_primary_background.xml b/app/src/main/res/drawable/state_button_primary_background.xml
@@ -2,8 +2,8 @@
 <shape xmlns:android="http://schemas.android.com/apk/res/android"
   android:shape="rectangle">
   <corners android:radius="@dimen/spotlight_done_button_corner_radius" />
-  <solid android:color="@color/component_color_continue_button_background_color" />
+  <solid android:color="@color/component_color_shared_button_active_solid_color" />
   <stroke
     android:width="1dp"
-    android:color="@color/component_color_continue_button_border_color" />
+    android:color="@color/component_color_shared_button_active_stroke_color" />
 </shape>
diff --git a/app/src/main/res/layout-land/onboarding_fragment.xml b/app/src/main/res/layout-land/onboarding_fragment.xml
@@ -18,7 +18,7 @@
   <androidx.constraintlayout.widget.ConstraintLayout
     android:layout_width="match_parent"
     android:layout_height="match_parent"
-    android:background="@color/component_color_onboarding_activity_background_color">
+    android:background="@color/component_color_shared_screen_secondary_background_color">
 
     <androidx.viewpager2.widget.ViewPager2
       android:id="@+id/onboarding_slide_view_pager"
@@ -43,6 +43,7 @@
       android:onClick="@{(v) -> presenter.clickOnSkip()}"
       android:text="@string/skip"
       android:textAllCaps="true"
+      android:textColor="@color/component_color_shared_primary_text_color"
       android:visibility="@{viewModel.slideNumber != 3 ? View.VISIBLE: View.GONE, default=visible}"
       app:layout_constraintEnd_toEndOf="parent"
       app:layout_constraintTop_toTopOf="parent" />
@@ -71,9 +72,10 @@
       android:minHeight="48dp"
       android:onClick="@{(v) -> presenter.clickOnNext()}"
       android:padding="12dp"
-      app:srcCompat="@drawable/ic_arrow_forward_black_24dp"
       android:visibility="@{viewModel.slideNumber != 3 ? View.VISIBLE: View.GONE, default=visible}"
       app:layout_constraintBottom_toBottomOf="parent"
-      app:layout_constraintEnd_toEndOf="parent" />
+      app:layout_constraintEnd_toEndOf="parent"
+      app:srcCompat="@drawable/ic_arrow_forward_black_24dp"
+      app:tint="@color/component_color_onboarding_activity_arrow_color" />
   </androidx.constraintlayout.widget.ConstraintLayout>
 </layout>
diff --git a/app/src/main/res/layout-land/onboarding_slide.xml b/app/src/main/res/layout-land/onboarding_slide.xml
@@ -29,11 +29,11 @@
         android:adjustViewBounds="true"
         android:importantForAccessibility="no"
         android:scaleType="fitXY"
-        app:srcCompat="@{viewModel.slideImage}"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintDimensionRatio="H, 10:9"
         app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toTopOf="parent" />
+        app:layout_constraintTop_toTopOf="parent"
+        app:srcCompat="@{viewModel.slideImage}" />
 
       <TextView
         android:id="@+id/slide_title_text_view"
@@ -44,6 +44,7 @@
         android:layout_marginEnd="28dp"
         android:fontFamily="sans-serif-medium"
         android:text="@{viewModel.title}"
+        android:textColor="@color/component_color_shared_primary_text_color"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintHorizontal_bias="1.0"
         app:layout_constraintStart_toEndOf="@+id/slide_image_view"
@@ -57,6 +58,7 @@
         android:layout_marginTop="16dp"
         android:layout_marginEnd="40dp"
         android:text="@{viewModel.description}"
+        android:textColor="@color/component_color_shared_secondary_1_text_color"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintHorizontal_bias="0.0"
         app:layout_constraintStart_toEndOf="@+id/slide_image_view"

diff --git a/app/src/main/res/layout-land/onboarding_slide_final.xml b/app/src/main/res/layout-land/onboarding_slide_final.xml
@@ -30,11 +30,11 @@
         android:adjustViewBounds="true"
         android:importantForAccessibility="no"
         android:scaleType="fitXY"
-        app:srcCompat="@drawable/ic_landscape_onboarding_3"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintDimensionRatio="H, 10:9"
         app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toTopOf="parent" />
+        app:layout_constraintTop_toTopOf="parent"
+        app:srcCompat="@drawable/ic_landscape_onboarding_3" />
 
       <TextView
         android:id="@+id/slide_title_text_view"
@@ -45,6 +45,7 @@
         android:layout_marginEnd="28dp"
         android:fontFamily="sans-serif-medium"
         android:text="@string/onboarding_slide_3_title"
+        android:textColor="@color/component_color_shared_primary_text_color"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintHorizontal_bias="1.0"
         app:layout_constraintStart_toEndOf="@+id/slide_image_view"
@@ -58,6 +59,7 @@
         android:layout_marginTop="16dp"
         android:layout_marginEnd="40dp"
         android:text="@string/onboarding_slide_3_description"
+        android:textColor="@color/color_palette_secondary_1_text_color"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintHorizontal_bias="0.0"
         app:layout_constraintStart_toEndOf="@+id/slide_image_view"
@@ -75,7 +77,7 @@
         android:minHeight="48dp"
         android:onClick="@{(v) -> viewModel.clickOnGetStarted()}"
         android:text="@string/get_started"
-        android:textColor="@color/color_def_white"
+        android:textColor="@color/component_color_shared_primary_button_text_color"
         android:textSize="14sp"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toEndOf="@+id/slide_image_view"
@@ -90,11 +92,12 @@
         android:layout_marginTop="24dp"
         android:layout_marginEnd="28dp"
         android:fontFamily="sans-serif"
+        android:textColor="@color/component_color_shared_primary_text_color"
+        android:textColorLink="@color/component_color_shared_primary_text_color"
         android:textSize="12sp"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toEndOf="@+id/slide_image_view"
         app:layout_constraintTop_toBottomOf="@id/get_started_button" />
-
     </androidx.constraintlayout.widget.ConstraintLayout>
   </ScrollView>
 </layout>
diff --git a/app/src/main/res/layout-land/profile_chooser_add_view.xml b/app/src/main/res/layout-land/profile_chooser_add_view.xml
@@ -35,7 +35,7 @@
         android:layout_marginBottom="8dp"
         app:srcCompat="@{@drawable/ic_add_profile}"
         app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.RoundedShape"
-        app:strokeColor="@color/avatar_border"
+        app:strokeColor="@color/component_color_profile_chooser_activity_avatar_border_color"
         app:strokeWidth="1dp" />
 
       <TextView
@@ -46,7 +46,7 @@
         android:layout_gravity="center"
         android:fontFamily="sans-serif-medium"
         android:text="@{hasProfileEverBeenAddedValue ? @string/profile_chooser_add : @string/set_up_multiple_profiles}"
-        android:textColor="@color/color_def_white"
+        android:textColor="@color/component_color_profile_chooser_activity_white_text_color"
         android:textSize="14sp" />
 
       <TextView
@@ -57,7 +57,7 @@
         android:layout_gravity="center"
         android:fontFamily="sans-serif"
         android:text="@string/set_up_multiple_profiles_description"
-        android:textColor="@color/color_def_white"
+        android:textColor="@color/component_color_profile_chooser_activity_white_text_color"
         android:textSize="12sp"
         android:visibility="@{hasProfileEverBeenAddedValue ? View.GONE : View.VISIBLE}" />
     </LinearLayout>

diff --git a/app/src/main/res/layout-land/profile_chooser_fragment.xml b/app/src/main/res/layout-land/profile_chooser_fragment.xml
@@ -16,7 +16,7 @@
     <androidx.core.widget.NestedScrollView
       android:layout_width="match_parent"
       android:layout_height="match_parent"
-      android:background="@color/profile_chooser_background"
+      android:background="@color/component_color_profile_chooser_activity_background_color"
       android:overScrollMode="never"
       android:scrollbars="none">
 
@@ -33,17 +33,17 @@
           android:paddingStart="4dp"
           android:paddingTop="20dp"
           android:paddingEnd="20dp"
-          app:srcCompat="@drawable/ic_language_icon_grey_24dp"
           android:visibility="gone"
           app:layout_constraintEnd_toEndOf="parent"
-          app:layout_constraintTop_toTopOf="parent" />
+          app:layout_constraintTop_toTopOf="parent"
+          app:srcCompat="@drawable/ic_language_icon_grey_24dp" />
 
         <TextView
           style="@style/Subtitle1ViewCenter"
           android:minHeight="48dp"
           android:paddingTop="20dp"
           android:text="@string/profile_chooser_language"
-          android:textColor="@color/profile_chooser_grey_text"
+          android:textColor="@color/component_color_profile_chooser_activity_secondary_options_color"
           android:visibility="gone"
           app:layout_constraintEnd_toStartOf="@+id/profile_chooser_language_icon"
           app:layout_constraintTop_toTopOf="parent" />
@@ -55,7 +55,7 @@
           android:layout_marginTop="@dimen/profile_chooser_fragment_profile_select_text_margin_top"
           android:layout_marginEnd="36dp"
           android:text="@string/profile_chooser_select"
-          android:textColor="@color/color_def_white"
+          android:textColor="@color/component_color_profile_chooser_activity_white_text_color"
           app:layout_constraintStart_toStartOf="parent"
           app:layout_constraintTop_toTopOf="parent" />
 
@@ -103,7 +103,7 @@
         android:layout_marginBottom="24dp"
         android:minHeight="48dp"
         android:text="@string/profile_chooser_administrator_controls"
-        android:textColor="@color/profile_chooser_grey_text" />
+        android:textColor="@color/component_color_profile_chooser_activity_secondary_options_color" />
 
       <ImageView
         android:id="@+id/profile_chooser_setting_icon"

diff --git a/app/src/main/res/layout-land/profile_chooser_profile_view.xml b/app/src/main/res/layout-land/profile_chooser_profile_view.xml
@@ -41,7 +41,7 @@
         android:layout_height="72dp"
         android:layout_marginBottom="8dp"
         app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.RoundedShape"
-        app:strokeColor="@color/avatar_border"
+        app:strokeColor="@color/component_color_profile_chooser_activity_avatar_border_color"
         app:strokeWidth="1dp"
         profile:src="@{viewModel.profile.avatar}" />
 
@@ -58,14 +58,14 @@
           android:maxLines="2"
           android:singleLine="false"
           android:text="@{viewModel.profile.name}"
-          android:textColor="@color/color_def_white" />
+          android:textColor="@color/component_color_profile_chooser_activity_white_text_color" />
 
         <TextView
           android:id="@+id/profile_last_visited"
           style="@style/SubtitleLight1Center"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
-          android:textColor="@color/color_def_white"
+          android:textColor="@color/component_color_profile_chooser_activity_white_text_color"
           android:visibility="@{viewModel.profile.lastLoggedInTimestampMs > 0 ? View.VISIBLE : View.GONE}"
           profile:lastVisited="@{viewModel.profile.lastLoggedInTimestampMs}" />
 
@@ -75,7 +75,7 @@
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="@string/profile_chooser_admin"
-          android:textColor="@color/color_def_white"
+          android:textColor="@color/component_color_profile_chooser_activity_white_text_color"
           android:visibility="@{viewModel.profile.isAdmin ? View.VISIBLE : View.GONE}" />
       </LinearLayout>
     </LinearLayout>
@@ -86,7 +86,7 @@
       android:layout_height="match_parent"
       android:layout_marginTop="@dimen/profile_chooser_profile_view_view_margin_top"
       android:layout_gravity="bottom"
-      android:background="@color/oppia_profile_chooser_divider"
+      android:background="@color/component_color_shared_divider_color"
       android:visibility="@{hasProfileEverBeenAddedValue ? View.GONE : View.VISIBLE}"
       app:layout_constraintBottom_toBottomOf="@+id/profile_chooser_item"
       app:layout_constraintEnd_toEndOf="parent"

diff --git a/app/src/main/res/layout-sw600dp-land/onboarding_fragment.xml b/app/src/main/res/layout-sw600dp-land/onboarding_fragment.xml
@@ -18,7 +18,7 @@
   <androidx.constraintlayout.widget.ConstraintLayout
     android:layout_width="match_parent"
     android:layout_height="match_parent"
-    android:background="@color/component_color_onboarding_activity_background_color">
+    android:background="@color/component_color_shared_screen_secondary_background_color">
 
     <androidx.viewpager2.widget.ViewPager2
       android:id="@+id/onboarding_slide_view_pager"
@@ -45,7 +45,7 @@
         android:layout_width="match_parent"
         android:layout_height="1dp"
         android:layout_marginBottom="16dp"
-        android:background="@color/oppia_onboarding_divider"
+        android:background="@color/component_color_shared_divider_color"
         app:layout_constraintBottom_toTopOf="@+id/slide_dots_container" />
 
       <LinearLayout
@@ -75,11 +75,12 @@
         android:minHeight="48dp"
         android:onClick="@{(v) -> presenter.clickOnNext()}"
         android:scaleType="center"
-        app:srcCompat="@drawable/ic_arrow_forward_black_24dp"
         android:visibility="@{viewModel.slideNumber != 3 ? View.VISIBLE: View.GONE, default=visible}"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintTop_toTopOf="parent" />
+        app:layout_constraintTop_toTopOf="parent"
+        app:srcCompat="@drawable/ic_arrow_forward_black_24dp"
+        app:tint="@color/component_color_onboarding_activity_arrow_color" />
 
       <TextView
         android:id="@+id/skip_text_view"
@@ -90,6 +91,7 @@
         android:onClick="@{(v) -> presenter.clickOnSkip()}"
         android:text="@string/skip"
         android:textAllCaps="true"
+        android:textColor="@color/component_color_shared_primary_text_color"
         android:visibility="@{viewModel.slideNumber != (viewModel.totalNumberOfSlides - 1) ? View.VISIBLE: View.GONE, default=visible}"
         app:layout_constraintBottom_toBottomOf="@+id/slide_dots_container"
         app:layout_constraintStart_toStartOf="parent"