diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
index 45a6ce701da..adcef3bf43a 100644
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -53,7 +53,6 @@ gradlew.bat @BenHenning
 # All resource files.
 /app/src/main/res/**/*.xml @rt4914
 /utility/src/main/res/**/*.xml @rt4914
-/app/src/main/res/values/colors_migrating.xml @rt4914
 
 # App UI strings.
 /app/src/main/res/values*/strings.xml @BenHenning
diff --git a/app/src/main/java/org/oppia/android/app/drawer/NavigationDrawerFragmentPresenter.kt b/app/src/main/java/org/oppia/android/app/drawer/NavigationDrawerFragmentPresenter.kt
index 1caee17fa2d..2f45b29a533 100644
--- a/app/src/main/java/org/oppia/android/app/drawer/NavigationDrawerFragmentPresenter.kt
+++ b/app/src/main/java/org/oppia/android/app/drawer/NavigationDrawerFragmentPresenter.kt
@@ -419,7 +419,7 @@ class NavigationDrawerFragmentPresenter @Inject constructor(
           super.onDrawerOpened(drawerView)
           fragment.activity!!.invalidateOptionsMenu()
           StatusBarColor.statusBarColorUpdate(
-            R.color.slide_drawer_open_status_bar,
+            R.color.component_color_shared_slide_drawer_open_status_bar_color,
             activity,
             false
           )
@@ -429,7 +429,7 @@ class NavigationDrawerFragmentPresenter @Inject constructor(
           super.onDrawerClosed(drawerView)
           fragment.activity!!.invalidateOptionsMenu()
           StatusBarColor.statusBarColorUpdate(
-            R.color.oppia_primary_dark,
+            R.color.component_color_shared_activity_status_bar_color,
             activity,
             false
           )
@@ -456,7 +456,7 @@ class NavigationDrawerFragmentPresenter @Inject constructor(
           super.onDrawerOpened(drawerView)
           fragment.activity!!.invalidateOptionsMenu()
           StatusBarColor.statusBarColorUpdate(
-            R.color.slide_drawer_open_status_bar,
+            R.color.component_color_shared_slide_drawer_open_status_bar_color,
             activity,
             false
           )
@@ -466,7 +466,7 @@ class NavigationDrawerFragmentPresenter @Inject constructor(
           super.onDrawerClosed(drawerView)
           fragment.activity!!.invalidateOptionsMenu()
           StatusBarColor.statusBarColorUpdate(
-            R.color.oppia_primary_dark,
+            R.color.component_color_shared_activity_status_bar_color,
             activity,
             false
           )
diff --git a/app/src/main/java/org/oppia/android/app/onboarding/OnboardingFragmentPresenter.kt b/app/src/main/java/org/oppia/android/app/onboarding/OnboardingFragmentPresenter.kt
index 4fc99927934..1551e6c4199 100644
--- a/app/src/main/java/org/oppia/android/app/onboarding/OnboardingFragmentPresenter.kt
+++ b/app/src/main/java/org/oppia/android/app/onboarding/OnboardingFragmentPresenter.kt
@@ -169,27 +169,27 @@ class OnboardingFragmentPresenter @Inject constructor(
   private fun onboardingStatusBarColorUpdate(position: Int) {
     when (position) {
       0 -> StatusBarColor.statusBarColorUpdate(
-        R.color.onboarding_1_status_bar,
+        R.color.component_color_onboarding_1_status_bar_color,
         activity,
         false
       )
       1 -> StatusBarColor.statusBarColorUpdate(
-        R.color.onboarding_2_status_bar,
+        R.color.component_color_onboarding_2_status_bar_color,
         activity,
         false
       )
       2 -> StatusBarColor.statusBarColorUpdate(
-        R.color.onboarding_3_status_bar,
+        R.color.component_color_onboarding_3_status_bar_color,
         activity,
         false
       )
       3 -> StatusBarColor.statusBarColorUpdate(
-        R.color.onboarding_4_status_bar,
+        R.color.component_color_onboarding_4_status_bar_color,
         activity,
         false
       )
       else -> StatusBarColor.statusBarColorUpdate(
-        R.color.oppia_primary_dark,
+        R.color.component_color_shared_activity_status_bar_color,
         activity,
         false
       )
diff --git a/app/src/main/java/org/oppia/android/app/profile/AddProfileActivityPresenter.kt b/app/src/main/java/org/oppia/android/app/profile/AddProfileActivityPresenter.kt
index 3937481cbdc..12e079fd465 100644
--- a/app/src/main/java/org/oppia/android/app/profile/AddProfileActivityPresenter.kt
+++ b/app/src/main/java/org/oppia/android/app/profile/AddProfileActivityPresenter.kt
@@ -105,7 +105,11 @@ class AddProfileActivityPresenter @Inject constructor(
           isFirstResource: Boolean
         ): Boolean {
           uploadImageView.setColorFilter(
-            ResourcesCompat.getColor(activity.resources, R.color.avatar_background_11, null),
+            ResourcesCompat.getColor(
+              activity.resources,
+              R.color.color_def_avatar_background_11,
+              null
+            ),
             PorterDuff.Mode.DST_OVER
           )
           return false
diff --git a/app/src/main/java/org/oppia/android/app/profile/ProfileChooserFragmentPresenter.kt b/app/src/main/java/org/oppia/android/app/profile/ProfileChooserFragmentPresenter.kt
index 1dfcbff875a..eefe86c8c99 100644
--- a/app/src/main/java/org/oppia/android/app/profile/ProfileChooserFragmentPresenter.kt
+++ b/app/src/main/java/org/oppia/android/app/profile/ProfileChooserFragmentPresenter.kt
@@ -31,30 +31,30 @@ import org.oppia.android.util.statusbar.StatusBarColor
 import javax.inject.Inject
 
 private val COLORS_LIST = listOf(
-  R.color.avatar_background_1,
-  R.color.avatar_background_2,
-  R.color.avatar_background_3,
-  R.color.avatar_background_4,
-  R.color.avatar_background_5,
-  R.color.avatar_background_6,
-  R.color.avatar_background_7,
-  R.color.avatar_background_8,
-  R.color.avatar_background_9,
-  R.color.avatar_background_10,
-  R.color.avatar_background_11,
-  R.color.avatar_background_12,
-  R.color.avatar_background_13,
-  R.color.avatar_background_14,
-  R.color.avatar_background_15,
-  R.color.avatar_background_16,
-  R.color.avatar_background_17,
-  R.color.avatar_background_18,
-  R.color.avatar_background_19,
-  R.color.avatar_background_20,
-  R.color.avatar_background_21,
-  R.color.avatar_background_22,
-  R.color.avatar_background_23,
-  R.color.avatar_background_24
+  R.color.color_def_avatar_background_1,
+  R.color.color_def_avatar_background_2,
+  R.color.color_def_avatar_background_3,
+  R.color.color_def_avatar_background_4,
+  R.color.color_def_avatar_background_5,
+  R.color.color_def_avatar_background_6,
+  R.color.color_def_avatar_background_7,
+  R.color.color_def_avatar_background_8,
+  R.color.color_def_avatar_background_9,
+  R.color.color_def_avatar_background_10,
+  R.color.color_def_avatar_background_11,
+  R.color.color_def_avatar_background_12,
+  R.color.color_def_avatar_background_13,
+  R.color.color_def_avatar_background_14,
+  R.color.color_def_avatar_background_15,
+  R.color.color_def_avatar_background_16,
+  R.color.color_def_avatar_background_17,
+  R.color.color_def_avatar_background_18,
+  R.color.color_def_avatar_background_19,
+  R.color.color_def_avatar_background_20,
+  R.color.color_def_avatar_background_21,
+  R.color.color_def_avatar_background_22,
+  R.color.color_def_avatar_background_23,
+  R.color.color_def_avatar_background_24
 )
 
 /** The presenter for [ProfileChooserFragment]. */
@@ -77,7 +77,9 @@ class ProfileChooserFragmentPresenter @Inject constructor(
 
   /** Binds ViewModel and sets up RecyclerView Adapter. */
   fun handleCreateView(inflater: LayoutInflater, container: ViewGroup?): View? {
-    StatusBarColor.statusBarColorUpdate(R.color.profile_status_bar, activity, false)
+    StatusBarColor.statusBarColorUpdate(
+      R.color.component_color_shared_profile_status_bar_color, activity, false
+    )
     binding = ProfileChooserFragmentBinding.inflate(
       inflater,
       container,
diff --git a/app/src/main/java/org/oppia/android/app/profileprogress/ProfilePictureActivityPresenter.kt b/app/src/main/java/org/oppia/android/app/profileprogress/ProfilePictureActivityPresenter.kt
index 9a487c48a1a..cd9398374aa 100644
--- a/app/src/main/java/org/oppia/android/app/profileprogress/ProfilePictureActivityPresenter.kt
+++ b/app/src/main/java/org/oppia/android/app/profileprogress/ProfilePictureActivityPresenter.kt
@@ -31,7 +31,9 @@ class ProfilePictureActivityPresenter @Inject constructor(
   private lateinit var profileId: ProfileId
 
   fun handleOnCreate(internalProfileId: Int) {
-    StatusBarColor.statusBarColorUpdate(R.color.profile_status_bar, activity, false)
+    StatusBarColor.statusBarColorUpdate(
+      R.color.component_color_shared_profile_status_bar_color, activity, false
+    )
     val binding = DataBindingUtil
       .setContentView<ProfilePictureActivityBinding>(
         activity,
diff --git a/app/src/main/java/org/oppia/android/app/spotlight/SpotlightFragment.kt b/app/src/main/java/org/oppia/android/app/spotlight/SpotlightFragment.kt
index 689c8320f3e..5e6be96804e 100644
--- a/app/src/main/java/org/oppia/android/app/spotlight/SpotlightFragment.kt
+++ b/app/src/main/java/org/oppia/android/app/spotlight/SpotlightFragment.kt
@@ -154,7 +154,7 @@ class SpotlightFragment : InjectableFragment(), SpotlightNavigationListener, Spo
     if (targetList.isNullOrEmpty()) return
     spotlight = Spotlight.Builder(activity)
       .setTargets(targetList)
-      .setBackgroundColorRes(R.color.spotlight_overlay_background)
+      .setBackgroundColorRes(R.color.component_color_shared_close_spotlight_button_color)
       .setDuration(500L)
       .setAnimation(AccelerateInterpolator(0.5f))
       .setOnSpotlightListener(object : OnSpotlightListener {
diff --git a/app/src/main/java/org/oppia/android/app/walkthrough/WalkthroughActivityPresenter.kt b/app/src/main/java/org/oppia/android/app/walkthrough/WalkthroughActivityPresenter.kt
index c940c3db94d..9f7733df2fc 100644
--- a/app/src/main/java/org/oppia/android/app/walkthrough/WalkthroughActivityPresenter.kt
+++ b/app/src/main/java/org/oppia/android/app/walkthrough/WalkthroughActivityPresenter.kt
@@ -29,7 +29,11 @@ class WalkthroughActivityPresenter @Inject constructor(
       presenter = this@WalkthroughActivityPresenter
       lifecycleOwner = activity
     }
-    StatusBarColor.statusBarColorUpdate(R.color.walkthrough_status_bar, activity, true)
+    StatusBarColor.statusBarColorUpdate(
+      R.color.component_color_walkthrough_activity_status_bar_color,
+      activity,
+      true
+    )
     val currentFragmentIndex = getWalkthroughViewModel().currentProgress.get()?.minus(1)
 
     if (currentFragmentIndex == -1 && getWalkthroughWelcomeFragment() == null) {
diff --git a/app/src/main/res/drawable-ldrtl/bottom_left_rounded_rect_coming_soon_background.xml b/app/src/main/res/drawable-ldrtl/bottom_left_rounded_rect_coming_soon_background.xml
index 801d7144094..d6b114b0902 100644
--- a/app/src/main/res/drawable-ldrtl/bottom_left_rounded_rect_coming_soon_background.xml
+++ b/app/src/main/res/drawable-ldrtl/bottom_left_rounded_rect_coming_soon_background.xml
@@ -7,7 +7,7 @@
     android:topRightRadius="0dp" />
   <gradient
     android:angle="360"
-    android:endColor="@color/coming_soon_end"
-    android:startColor="@color/coming_soon_start"
+    android:endColor="@color/component_color_coming_soon_rect_background_end_color"
+    android:startColor="@color/component_color_coming_soon_rect_background_start_color"
     android:type="linear" />
 </shape>
diff --git a/app/src/main/res/drawable/bottom_left_rounded_rect_coming_soon_background.xml b/app/src/main/res/drawable/bottom_left_rounded_rect_coming_soon_background.xml
index 1e583977b52..03560a4e2b1 100644
--- a/app/src/main/res/drawable/bottom_left_rounded_rect_coming_soon_background.xml
+++ b/app/src/main/res/drawable/bottom_left_rounded_rect_coming_soon_background.xml
@@ -7,7 +7,7 @@
     android:topRightRadius="4dp" />
   <gradient
     android:angle="360"
-    android:endColor="@color/coming_soon_end"
-    android:startColor="@color/coming_soon_start"
+    android:endColor="@color/component_color_coming_soon_rect_background_end_color"
+    android:startColor="@color/component_color_coming_soon_rect_background_start_color"
     android:type="linear" />
 </shape>
diff --git a/app/src/main/res/drawable/bottom_left_rounded_rect_primary_background.xml b/app/src/main/res/drawable/bottom_left_rounded_rect_primary_background.xml
deleted file mode 100644
index d924e608c60..00000000000
--- a/app/src/main/res/drawable/bottom_left_rounded_rect_primary_background.xml
+++ /dev/null
@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<shape xmlns:android="http://schemas.android.com/apk/res/android">
-  <corners android:bottomRightRadius="0dp"
-    android:bottomLeftRadius="12dp"
-    android:topLeftRadius="0dp"
-    android:topRightRadius="4dp"/>
-  <solid android:color="@color/oppia_primary"/>
-</shape>
diff --git a/app/src/main/res/drawable/edit_text_red_border.xml b/app/src/main/res/drawable/edit_text_red_border.xml
deleted file mode 100644
index 17c79f6a5c8..00000000000
--- a/app/src/main/res/drawable/edit_text_red_border.xml
+++ /dev/null
@@ -1,13 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<shape xmlns:android="http://schemas.android.com/apk/res/android">
-  <stroke
-    android:width="1dp"
-    android:color="@color/edit_text_error" />
-  <corners android:radius="4dp" />
-  <solid android:color="@color/color_def_white" />
-  <padding
-    android:left="10dp"
-    android:top="6dp"
-    android:right="10dp"
-    android:bottom="6dp" />
-</shape>
diff --git a/app/src/main/res/drawable/lesson_thumbnail_default.xml b/app/src/main/res/drawable/lesson_thumbnail_default.xml
deleted file mode 100644
index 375130555db..00000000000
--- a/app/src/main/res/drawable/lesson_thumbnail_default.xml
+++ /dev/null
@@ -1,4 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
-  <solid android:color="@color/oppia_primary" />
-</shape>
diff --git a/app/src/main/res/drawable/profile_chooser_divider.xml b/app/src/main/res/drawable/profile_chooser_divider.xml
index a13bd2fa5a1..84a6b07c394 100644
--- a/app/src/main/res/drawable/profile_chooser_divider.xml
+++ b/app/src/main/res/drawable/profile_chooser_divider.xml
@@ -2,5 +2,5 @@
 <shape xmlns:android="http://schemas.android.com/apk/res/android"
   android:shape="rectangle">
   <size android:height="1dp" />
-  <solid android:color="@color/oppia_profile_chooser_divider" />
+  <solid android:color="@color/component_color_shared_divider_color" />
 </shape>
diff --git a/app/src/main/res/drawable/reading_text_size_seekbar_thumb.xml b/app/src/main/res/drawable/reading_text_size_seekbar_thumb.xml
deleted file mode 100644
index 5e4117bd915..00000000000
--- a/app/src/main/res/drawable/reading_text_size_seekbar_thumb.xml
+++ /dev/null
@@ -1,10 +0,0 @@
-<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
-  <item>
-    <shape android:shape="oval">
-      <size
-        android:width="12dp"
-        android:height="12dp" />
-      <solid android:color="@color/oppia_primary_light"/>
-    </shape>
-  </item>
-</layer-list>
diff --git a/app/src/main/res/drawable/rounded_corners_progress_bar.xml b/app/src/main/res/drawable/rounded_corners_progress_bar.xml
index 5465e2350e3..f388452e424 100644
--- a/app/src/main/res/drawable/rounded_corners_progress_bar.xml
+++ b/app/src/main/res/drawable/rounded_corners_progress_bar.xml
@@ -3,7 +3,7 @@
   <item android:id="@android:id/background">
     <shape>
       <corners android:radius="8dp"/>
-      <solid android:color="@color/color_def_grey"/>
+      <solid android:color="@color/component_color_walkthrough_activity_rounded_corners_color"/>
     </shape>
   </item>
 
@@ -16,7 +16,7 @@
     <scale android:scaleWidth="100%">
       <shape>
         <corners android:radius="8dp"/>
-        <solid android:color="@color/oppia_primary_dark"/>
+        <solid android:color="@color/component_color_shared_dialogs_secondary_color"/>
       </shape>
     </scale>
   </item>
diff --git a/app/src/main/res/drawable/seekbar_progress.xml b/app/src/main/res/drawable/seekbar_progress.xml
index be1a035b148..8815c02f884 100644
--- a/app/src/main/res/drawable/seekbar_progress.xml
+++ b/app/src/main/res/drawable/seekbar_progress.xml
@@ -3,5 +3,5 @@
   android:shape="line">
   <stroke
     android:width="4dp"
-    android:color="@color/oppia_primary" />
+    android:color="@color/component_color_shared_secondary_6_text_color" />
 </shape>
diff --git a/app/src/main/res/drawable/start_button_primary_background.xml b/app/src/main/res/drawable/start_button_primary_background.xml
deleted file mode 100644
index dd6d1885805..00000000000
--- a/app/src/main/res/drawable/start_button_primary_background.xml
+++ /dev/null
@@ -1,19 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<selector xmlns:android="http://schemas.android.com/apk/res/android">
-  <item>
-    <layer-list>
-      <item android:right="2dp" android:top="2dp">
-        <shape>
-          <corners android:radius="4dp" />
-          <solid android:color="@color/oppia_disabled_button_background" />
-        </shape>
-      </item>
-      <item android:bottom="2dp">
-        <shape>
-          <solid android:color="@color/oppia_primary" />
-          <corners android:radius="4dp" />
-        </shape>
-      </item>
-    </layer-list>
-  </item>
-</selector>
diff --git a/app/src/main/res/layout-land/walkthrough_final_fragment.xml b/app/src/main/res/layout-land/walkthrough_final_fragment.xml
index 15a19eb25c1..1ae0bbbaed0 100644
--- a/app/src/main/res/layout-land/walkthrough_final_fragment.xml
+++ b/app/src/main/res/layout-land/walkthrough_final_fragment.xml
@@ -23,10 +23,10 @@
       android:layout_width="180dp"
       android:layout_height="180dp"
       android:layout_marginStart="28dp"
-      app:srcCompat="@drawable/ic_portrait_onboarding_0"
       app:layout_constraintBottom_toBottomOf="parent"
       app:layout_constraintStart_toStartOf="parent"
-      app:layout_constraintTop_toTopOf="parent" />
+      app:layout_constraintTop_toTopOf="parent"
+      app:srcCompat="@drawable/ic_portrait_onboarding_0" />
 
     <LinearLayout
       android:id="@+id/walkthrough_button_container"
@@ -56,7 +56,7 @@
           android:layout_gravity="center_horizontal"
           android:fontFamily="sans-serif"
           android:text="@string/no"
-          android:textColor="@color/oppia_primary_text"
+          android:textColor="@color/component_color_shared_primary_text_color"
           android:textSize="20sp" />
 
         <TextView
@@ -67,7 +67,7 @@
           android:layout_marginTop="40dp"
           android:fontFamily="sans-serif"
           android:text="@string/pick_a_different_topic"
-          android:textColor="@color/oppia_primary_text"
+          android:textColor="@color/component_color_shared_primary_text_color"
           android:textSize="12sp" />
       </com.google.android.material.card.MaterialCardView>
 
@@ -89,7 +89,7 @@
           android:layout_gravity="center_horizontal"
           android:fontFamily="sans-serif"
           android:text="@string/yes"
-          android:textColor="@color/oppia_primary"
+          android:textColor="@color/component_color_shared_secondary_6_text_color"
           android:textSize="20sp" />
 
         <TextView
@@ -100,7 +100,7 @@
           android:layout_marginTop="40dp"
           android:fontFamily="sans-serif"
           android:text="@string/lets_get_started"
-          android:textColor="@color/oppia_primary"
+          android:textColor="@color/component_color_shared_secondary_6_text_color"
           android:textSize="12sp" />
       </com.google.android.material.card.MaterialCardView>
     </LinearLayout>
@@ -113,7 +113,7 @@
       android:layout_marginTop="4dp"
       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="20sp"
       app:layout_constraintEnd_toEndOf="parent"
       app:layout_constraintStart_toEndOf="@+id/walkthrough_final_image_view"
@@ -126,7 +126,7 @@
       android:layout_height="wrap_content"
       android:fontFamily="sans-serif"
       android:text="@string/great"
-      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_constraintStart_toEndOf="@+id/walkthrough_final_image_view"
diff --git a/app/src/main/res/layout-land/walkthrough_welcome_fragment.xml b/app/src/main/res/layout-land/walkthrough_welcome_fragment.xml
index 49161635f88..7ac43a97c01 100644
--- a/app/src/main/res/layout-land/walkthrough_welcome_fragment.xml
+++ b/app/src/main/res/layout-land/walkthrough_welcome_fragment.xml
@@ -30,7 +30,7 @@
         android:layout_height="wrap_content"
         android:fontFamily="sans-serif"
         android:text="@{viewModel.profileName}"
-        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_constraintStart_toEndOf="@+id/walkthrough_welcome_image_view"
@@ -47,7 +47,7 @@
         android:layout_marginEnd="56dp"
         android:fontFamily="sans-serif"
         android:text="@string/walkthrough_welcome_description"
-        android:textColor="@color/oppia_primary_text"
+        android:textColor="@color/component_color_shared_primary_text_color"
         android:textSize="20sp"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toEndOf="@+id/walkthrough_welcome_image_view"
@@ -58,10 +58,10 @@
         android:layout_width="180dp"
         android:layout_height="180dp"
         android:layout_marginStart="56dp"
-        app:srcCompat="@drawable/ic_portrait_onboarding_0"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toTopOf="parent" />
+        app:layout_constraintTop_toTopOf="parent"
+        app:srcCompat="@drawable/ic_portrait_onboarding_0" />
 
       <Button
         android:id="@+id/walkthrough_welcome_next_button"
diff --git a/app/src/main/res/layout/coming_soon_topic_list.xml b/app/src/main/res/layout/coming_soon_topic_list.xml
index 037ec962951..62f2463a465 100644
--- a/app/src/main/res/layout/coming_soon_topic_list.xml
+++ b/app/src/main/res/layout/coming_soon_topic_list.xml
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
-<layout xmlns:tools="http://schemas.android.com/tools"
-  xmlns:android="http://schemas.android.com/apk/res/android"
-  xmlns:app="http://schemas.android.com/apk/res-auto">
+<layout xmlns:android="http://schemas.android.com/apk/res/android"
+  xmlns:app="http://schemas.android.com/apk/res-auto"
+  xmlns:tools="http://schemas.android.com/tools">
 
   <data>
 
@@ -15,9 +15,9 @@
   <androidx.constraintlayout.widget.ConstraintLayout
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
+    android:layout_marginTop="@dimen/coming_soon_topic_list_constraint_layout_margin_top"
     android:paddingStart="@dimen/coming_soon_topic_list_constraint_layout_padding_start"
-    android:paddingEnd="@dimen/coming_soon_topic_list_constraint_layout_padding_end"
-    android:layout_marginTop="@dimen/coming_soon_topic_list_constraint_layout_margin_top">
+    android:paddingEnd="@dimen/coming_soon_topic_list_constraint_layout_padding_end">
 
     <TextView
       android:id="@+id/coming_soon_topic_text_view"
@@ -27,11 +27,11 @@
       android:fontFamily="sans-serif-medium"
       android:gravity="center|start"
       android:minHeight="48dp"
-      android:text="@string/coming_soon"
-      android:textColor="@color/oppia_primary_text"
-      android:textSize="18sp"
       android:paddingStart="@dimen/coming_soon_text_padding_start"
       android:paddingEnd="@dimen/coming_soon_text_padding_end"
+      android:text="@string/coming_soon"
+      android:textColor="@color/component_color_shared_primary_text_color"
+      android:textSize="18sp"
       app:layout_constraintEnd_toEndOf="parent"
       app:layout_constraintTop_toTopOf="parent" />
 
@@ -46,9 +46,9 @@
       android:paddingStart="@dimen/coming_soon_topic_promoted_list_view_padding_start"
       android:paddingEnd="@dimen/coming_soon_topic_Promoted_list_view_padding_end"
       android:scrollbars="none"
+      app:comingSoonTopicList="@{viewModel.comingSoonTopicList}"
       app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
       app:layout_constraintStart_toStartOf="@+id/coming_soon_topic_text_view"
-      app:layout_constraintTop_toBottomOf="@+id/coming_soon_topic_text_view"
-      app:comingSoonTopicList="@{viewModel.comingSoonTopicList}" />
+      app:layout_constraintTop_toBottomOf="@+id/coming_soon_topic_text_view" />
   </androidx.constraintlayout.widget.ConstraintLayout>
 </layout>
diff --git a/app/src/main/res/layout/coming_soon_topic_view.xml b/app/src/main/res/layout/coming_soon_topic_view.xml
index ec34206a413..b5e13f895b3 100644
--- a/app/src/main/res/layout/coming_soon_topic_view.xml
+++ b/app/src/main/res/layout/coming_soon_topic_view.xml
@@ -58,7 +58,7 @@
         android:id="@+id/constraintLayout"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:background="@color/topic_title_background"
+        android:background="@color/component_color_shared_secondary_container_background_color"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent"
diff --git a/app/src/main/res/layout/font_scale_test_activity.xml b/app/src/main/res/layout/font_scale_test_activity.xml
index 8305568ecc8..359a8529b7b 100644
--- a/app/src/main/res/layout/font_scale_test_activity.xml
+++ b/app/src/main/res/layout/font_scale_test_activity.xml
@@ -13,6 +13,6 @@
     android:layout_height="wrap_content"
     android:fontFamily="sans-serif"
     android:text="html Content"
-    android:textColor="@color/oppia_primary_text"
+    android:textColor="@color/component_color_shared_primary_text_color"
     android:textSize="20sp" />
 </FrameLayout>
diff --git a/app/src/main/res/layout/my_downloads_fragment.xml b/app/src/main/res/layout/my_downloads_fragment.xml
index d6c7e4c565c..168162868b8 100644
--- a/app/src/main/res/layout/my_downloads_fragment.xml
+++ b/app/src/main/res/layout/my_downloads_fragment.xml
@@ -20,12 +20,11 @@
         android:id="@+id/my_downloads_toolbar"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:background="@color/oppia_primary"
+        android:background="@color/component_color_shared_activity_toolbar_color"
         android:minHeight="?attr/actionBarSize"
         app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
         app:title="@string/my_downloads_activity_title"
-        app:titleTextAppearance="@style/ToolbarTextAppearance"
-        app:titleTextColor="@color/color_def_white" />
+        app:titleTextAppearance="@style/ToolbarTextAppearance" />
 
       <com.google.android.material.tabs.TabLayout
         android:id="@+id/my_downloads_tabs_container"
@@ -33,7 +32,7 @@
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:textSize="14sp"
-        app:tabBackground="@color/oppia_primary"
+        app:tabBackground="@color/component_color_shared_activity_toolbar_color"
         app:tabGravity="fill"
         app:tabIconTint="@color/tab_icon_color_selector"
         app:tabIndicatorColor="@android:color/white"
diff --git a/app/src/main/res/layout/profile_and_device_id_activity.xml b/app/src/main/res/layout/profile_and_device_id_activity.xml
index 740e3a89ff1..89e0702eebd 100644
--- a/app/src/main/res/layout/profile_and_device_id_activity.xml
+++ b/app/src/main/res/layout/profile_and_device_id_activity.xml
@@ -1,6 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
-<androidx.constraintlayout.widget.ConstraintLayout
-  xmlns:android="http://schemas.android.com/apk/res/android"
+<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
@@ -20,15 +19,14 @@
       android:id="@+id/profile_and_device_id_toolbar"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
-      android:background="@color/oppia_primary"
+      android:background="@color/component_color_shared_activity_toolbar_color"
       android:minHeight="?attr/actionBarSize"
       android:textSize="20sp"
       app:navigationContentDescription="@string/navigate_up"
       app:navigationIcon="?attr/homeAsUpIndicator"
       app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
       app:title="@string/profile_and_device_id_activity_title"
-      app:titleTextAppearance="@style/ToolbarTextAppearance"
-      app:titleTextColor="@color/color_def_white" />
+      app:titleTextAppearance="@style/ToolbarTextAppearance" />
   </com.google.android.material.appbar.AppBarLayout>
 
   <View
@@ -37,8 +35,8 @@
     android:layout_height="4dp"
     android:layout_gravity="top"
     android:background="@drawable/toolbar_drop_shadow"
-    app:layout_constraintStart_toStartOf="parent"
     app:layout_constraintEnd_toEndOf="parent"
+    app:layout_constraintStart_toStartOf="parent"
     app:layout_constraintTop_toBottomOf="@id/profile_and_device_id_app_bar_layout" />
 
   <FrameLayout
diff --git a/app/src/main/res/layout/profile_picture_activity.xml b/app/src/main/res/layout/profile_picture_activity.xml
index 02f1a177ae2..b28b88da605 100644
--- a/app/src/main/res/layout/profile_picture_activity.xml
+++ b/app/src/main/res/layout/profile_picture_activity.xml
@@ -28,7 +28,7 @@
         android:id="@+id/profile_picture_activity_toolbar"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:background="@color/oppia_primary"
+        android:background="@color/component_color_shared_activity_toolbar_color"
         android:minHeight="?attr/actionBarSize"
         android:textSize="20sp"
         app:navigationContentDescription="@string/navigate_up"
diff --git a/app/src/main/res/layout/test_margin_bindable_adapter_activity.xml b/app/src/main/res/layout/test_margin_bindable_adapter_activity.xml
index 8c33a52ac72..04fd99be396 100644
--- a/app/src/main/res/layout/test_margin_bindable_adapter_activity.xml
+++ b/app/src/main/res/layout/test_margin_bindable_adapter_activity.xml
@@ -13,7 +13,7 @@
       android:text="@string/select_a_topic_to_start"
       android:padding="10dp"
       android:background="@color/color_def_oppia_stroke_blue"
-      android:textColor="@color/oppia_primary_text"
+      android:textColor="@color/component_color_shared_primary_text_color"
       android:textSize="18sp" />
   </FrameLayout>
 </layout>
diff --git a/app/src/main/res/layout/test_text_view_for_int_no_data_binding.xml b/app/src/main/res/layout/test_text_view_for_int_no_data_binding.xml
index 6918cec9876..ffa6ac2fa59 100644
--- a/app/src/main/res/layout/test_text_view_for_int_no_data_binding.xml
+++ b/app/src/main/res/layout/test_text_view_for_int_no_data_binding.xml
@@ -4,4 +4,4 @@
   style="@style/TextViewStart"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
-  android:textColor="@color/oppia_primary_dark" />
+  android:textColor="@color/component_color_shared_dialogs_secondary_color" />
diff --git a/app/src/main/res/layout/test_text_view_for_int_with_data_binding.xml b/app/src/main/res/layout/test_text_view_for_int_with_data_binding.xml
index 48b65cb578e..82dea05be42 100644
--- a/app/src/main/res/layout/test_text_view_for_int_with_data_binding.xml
+++ b/app/src/main/res/layout/test_text_view_for_int_with_data_binding.xml
@@ -13,5 +13,5 @@
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:text="@{`Value: ` + viewModel.boundIntValue}"
-    android:textColor="@color/oppia_primary_dark" />
+    android:textColor="@color/component_color_shared_dialogs_secondary_color" />
 </layout>
diff --git a/app/src/main/res/layout/test_text_view_for_live_data_with_data_binding.xml b/app/src/main/res/layout/test_text_view_for_live_data_with_data_binding.xml
index 67140d0421f..8dfeee42cff 100644
--- a/app/src/main/res/layout/test_text_view_for_live_data_with_data_binding.xml
+++ b/app/src/main/res/layout/test_text_view_for_live_data_with_data_binding.xml
@@ -13,5 +13,5 @@
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:text="@{viewModel.boundLiveDataValue}"
-    android:textColor="@color/oppia_primary" />
+    android:textColor="@color/component_color_shared_secondary_6_text_color" />
 </layout>
diff --git a/app/src/main/res/layout/test_text_view_for_string_no_data_binding.xml b/app/src/main/res/layout/test_text_view_for_string_no_data_binding.xml
index 823f4b0f1e0..268933fb1d0 100644
--- a/app/src/main/res/layout/test_text_view_for_string_no_data_binding.xml
+++ b/app/src/main/res/layout/test_text_view_for_string_no_data_binding.xml
@@ -4,4 +4,4 @@
   style="@style/TextViewStart"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
-  android:textColor="@color/oppia_primary" />
+  android:textColor="@color/component_color_shared_secondary_6_text_color" />
diff --git a/app/src/main/res/layout/test_text_view_for_string_with_data_binding.xml b/app/src/main/res/layout/test_text_view_for_string_with_data_binding.xml
index f67b7ff45fb..85d8f29e8a4 100644
--- a/app/src/main/res/layout/test_text_view_for_string_with_data_binding.xml
+++ b/app/src/main/res/layout/test_text_view_for_string_with_data_binding.xml
@@ -14,5 +14,5 @@
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:text="@{viewModel.boundStringValue}"
-    android:textColor="@color/oppia_primary" />
+    android:textColor="@color/component_color_shared_secondary_6_text_color" />
 </layout>
diff --git a/app/src/main/res/layout/walkthrough_activity.xml b/app/src/main/res/layout/walkthrough_activity.xml
index e19e713b41c..a9bf56e40ca 100644
--- a/app/src/main/res/layout/walkthrough_activity.xml
+++ b/app/src/main/res/layout/walkthrough_activity.xml
@@ -32,15 +32,15 @@
       android:id="@+id/back_button"
       android:layout_width="48dp"
       android:layout_height="48dp"
-      android:padding="16dp"
       android:clickable="true"
       android:contentDescription="@string/back_button"
       android:focusable="true"
       android:onClick="@{(v) -> presenter.moveToPreviousPage(viewModel.currentProgress)}"
-      app:srcCompat="@drawable/ic_arrow_back_white_24dp"
-      android:tint="@color/color_def_grey"
+      android:padding="16dp"
       app:layout_constraintStart_toStartOf="parent"
-      app:layout_constraintTop_toTopOf="parent" />
+      app:layout_constraintTop_toTopOf="parent"
+      app:srcCompat="@drawable/ic_arrow_back_white_24dp"
+      app:tint="@color/component_color_walkthrough_activity_rounded_corners_color" />
 
     <ProgressBar
       android:id="@+id/walkthrough_progress_bar"
diff --git a/app/src/main/res/layout/walkthrough_final_fragment.xml b/app/src/main/res/layout/walkthrough_final_fragment.xml
index ba5e0592b26..bc7a49109b2 100644
--- a/app/src/main/res/layout/walkthrough_final_fragment.xml
+++ b/app/src/main/res/layout/walkthrough_final_fragment.xml
@@ -27,10 +27,10 @@
         android:layout_width="180dp"
         android:layout_height="180dp"
         android:layout_marginTop="32dp"
-        app:srcCompat="@drawable/ic_portrait_onboarding_0"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toBottomOf="@+id/walkthrough_final_title_text_view" />
+        app:layout_constraintTop_toBottomOf="@+id/walkthrough_final_title_text_view"
+        app:srcCompat="@drawable/ic_portrait_onboarding_0" />
 
       <LinearLayout
         android:layout_width="match_parent"
@@ -61,7 +61,7 @@
             android:layout_gravity="center_horizontal"
             android:fontFamily="sans-serif"
             android:text="@string/no"
-            android:textColor="@color/oppia_primary_text"
+            android:textColor="@color/component_color_shared_primary_text_color"
             android:textSize="20sp" />
 
           <TextView
@@ -72,7 +72,7 @@
             android:layout_marginTop="40dp"
             android:fontFamily="sans-serif"
             android:text="@string/pick_a_different_topic"
-            android:textColor="@color/oppia_primary_text"
+            android:textColor="@color/component_color_shared_primary_text_color"
             android:textSize="12sp" />
         </com.google.android.material.card.MaterialCardView>
 
@@ -94,7 +94,7 @@
             android:layout_gravity="center_horizontal"
             android:fontFamily="sans-serif"
             android:text="@string/yes"
-            android:textColor="@color/oppia_primary"
+            android:textColor="@color/component_color_shared_secondary_6_text_color"
             android:textSize="20sp" />
 
           <TextView
@@ -105,14 +105,14 @@
             android:layout_marginTop="40dp"
             android:fontFamily="sans-serif"
             android:text="@string/lets_get_started"
-            android:textColor="@color/oppia_primary"
+            android:textColor="@color/component_color_shared_secondary_6_text_color"
             android:textSize="12sp" />
         </com.google.android.material.card.MaterialCardView>
       </LinearLayout>
 
       <TextView
-        style="@style/TextViewCenter"
         android:id="@+id/walkthrough_final_topic_text_view"
+        style="@style/TextViewCenter"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_marginStart="32dp"
@@ -120,7 +120,7 @@
         android:layout_marginEnd="32dp"
         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="20sp"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent"
@@ -134,7 +134,7 @@
         android:layout_marginTop="32dp"
         android:fontFamily="sans-serif"
         android:text="@string/great"
-        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_constraintStart_toStartOf="parent"
diff --git a/app/src/main/res/layout/walkthrough_topic_header_view.xml b/app/src/main/res/layout/walkthrough_topic_header_view.xml
index cc6ae960be0..91a413dbac4 100644
--- a/app/src/main/res/layout/walkthrough_topic_header_view.xml
+++ b/app/src/main/res/layout/walkthrough_topic_header_view.xml
@@ -18,6 +18,6 @@
     android:layout_marginBottom="16dp"
     android:fontFamily="sans-serif-medium"
     android:text="@string/what_do_you_want_to_learn"
-    android:textColor="@color/oppia_primary_text"
+    android:textColor="@color/component_color_shared_primary_text_color"
     android:textSize="24sp" />
 </layout>
diff --git a/app/src/main/res/layout/walkthrough_topic_summary_view.xml b/app/src/main/res/layout/walkthrough_topic_summary_view.xml
index cf666a02128..534214ba4f1 100644
--- a/app/src/main/res/layout/walkthrough_topic_summary_view.xml
+++ b/app/src/main/res/layout/walkthrough_topic_summary_view.xml
@@ -45,7 +45,7 @@
         android:id="@+id/bottom_topic_bar"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
-        android:background="@color/topic_title_background"
+        android:background="@color/component_color_shared_secondary_container_background_color"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintStart_toStartOf="parent" />
 
diff --git a/app/src/main/res/layout/walkthrough_welcome_fragment.xml b/app/src/main/res/layout/walkthrough_welcome_fragment.xml
index 827b4860a0a..50233acdcb8 100644
--- a/app/src/main/res/layout/walkthrough_welcome_fragment.xml
+++ b/app/src/main/res/layout/walkthrough_welcome_fragment.xml
@@ -30,7 +30,7 @@
         android:layout_marginTop="32dp"
         android:fontFamily="sans-serif"
         android:text="@{viewModel.profileName}"
-        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_constraintStart_toStartOf="parent"
@@ -47,7 +47,7 @@
         android:layout_marginEnd="32dp"
         android:fontFamily="sans-serif"
         android:text="@string/walkthrough_welcome_description"
-        android:textColor="@color/oppia_primary_text"
+        android:textColor="@color/component_color_shared_primary_text_color"
         android:textSize="20sp"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent"
diff --git a/app/src/main/res/values-night/color_palette.xml b/app/src/main/res/values-night/color_palette.xml
index a764fa08113..5d974e533b5 100644
--- a/app/src/main/res/values-night/color_palette.xml
+++ b/app/src/main/res/values-night/color_palette.xml
@@ -136,6 +136,7 @@
   <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_fragment_status_bar_color">@color/color_def_dark_purple</color>
+  <color name="color_palette_profile_status_bar_color">@color/color_def_black</color>
   <color name="color_palette_hint_dialog_status_bar_color">@color/color_def_catalina_blue</color>
   <color name="color_palette_shared_radio_button_unchecked_color">@color/color_def_stroke_silver</color>
   <color name="color_palette_shared_radio_button_checked_color">@color/color_def_radio_green</color>
@@ -186,8 +187,17 @@
   <color name="color_palette_story_chapter_not_start_stroke_color">@color/color_def_grey</color>
   <color name="color_palette_story_chapter_default_progress_stroke_color">@color/color_def_light_grey</color>
   <color name="color_palette_topic_thumbnail_background_color">@color/color_def_columbia_blue</color>
+  <color name="color_palette_slide_drawer_open_status_bar_color">@color/color_def_root_beer_blue</color>
   <color name="color_palette_navbar_header_background_color">@color/color_def_japanese_indigo</color>
   <color name="color_palette_shared_spotlight_hint_background_color">@color/color_def_oppia_light_yellow</color>
   <color name="color_palette_shared_close_spotlight_button_color">@color/color_def_black</color>
   <color name="color_palette_shared_spotlight_overlay_arrow_color">@color/color_def_white</color>
+  <color name="color_palette_color_palette_walkthrough_status_bar_color">@color/color_def_grey</color>
+  <color name="color_palette_walkthrough_activity_rounded_corners_color">@color/color_def_grey</color>
+  <color name="color_palette_onboarding_1_status_bar_color">@color/color_def_onboarding_1_status_bar</color>
+  <color name="color_palette_onboarding_2_status_bar_color">@color/color_def_onboarding_2_status_bar</color>
+  <color name="color_palette_onboarding_3_status_bar_color">@color/color_def_onboarding_3_status_bar</color>
+  <color name="color_palette_onboarding_4_status_bar_color">@color/color_def_onboarding_4_status_bar</color>
+  <color name="color_palette_coming_soon_rect_background_end_color">@color/color_def_grape_violet</color>
+  <color name="color_palette_coming_soon_rect_background_start_color">@color/color_def_bright_violet</color>
 </resources>
diff --git a/app/src/main/res/values-v21/styles.xml b/app/src/main/res/values-v21/styles.xml
index 23808bdf102..4fb6df0a50b 100644
--- a/app/src/main/res/values-v21/styles.xml
+++ b/app/src/main/res/values-v21/styles.xml
@@ -14,9 +14,4 @@
     <item name="android:colorControlActivated">@color/component_color_audio_fragment_seekbar_color</item>
   </style>
 
-  <style name="ReadingTextSizeSeekBar" parent="Widget.AppCompat.SeekBar">
-    <item name="android:progressBackgroundTint">@color/color_def_black_26</item>
-    <item name="android:progressTint">@color/oppia_primary_light</item>
-    <item name="android:colorControlActivated">@color/oppia_primary_light</item>
-  </style>
 </resources>
diff --git a/app/src/main/res/values/color_defs.xml b/app/src/main/res/values/color_defs.xml
index bf6725b41bc..5f35d799cfc 100644
--- a/app/src/main/res/values/color_defs.xml
+++ b/app/src/main/res/values/color_defs.xml
@@ -102,4 +102,34 @@
   <color name="color_def_columbia_blue">#C6DCDA</color>
   <color name="color_def_catalina_blue">#00236E</color>
   <color name="color_def_japanese_indigo">#264653</color>
+  <color name="color_def_root_beer_blue">#001F2A</color>
+  <color name="color_def_onboarding_1_status_bar">#00847A</color>
+  <color name="color_def_onboarding_2_status_bar">#8B2A15</color>
+  <color name="color_def_onboarding_3_status_bar">#AD8500</color>
+  <color name="color_def_onboarding_4_status_bar">#3B5893</color>
+  <!-- AVATAR BACKGROUND COLORS -->
+  <color name="color_def_avatar_background_1">#E65C5C</color>
+  <color name="color_def_avatar_background_2">#EB701D</color>
+  <color name="color_def_avatar_background_3">#A48C2D</color>
+  <color name="color_def_avatar_background_4">#C1851D</color>
+  <color name="color_def_avatar_background_5">#5C9F2F</color>
+  <color name="color_def_avatar_background_6">#1A9F84</color>
+  <color name="color_def_avatar_background_7">#1F98B7</color>
+  <color name="color_def_avatar_background_8">#5C93E6</color>
+  <color name="color_def_avatar_background_10">#935CE6</color>
+  <color name="color_def_avatar_background_11">#E65CCF</color>
+  <color name="color_def_avatar_background_12">#E65C97</color>
+  <color name="color_def_avatar_background_9">#5C5CE6</color>
+  <color name="color_def_avatar_background_13">#CC2929</color>
+  <color name="color_def_avatar_background_14">#CC6A29</color>
+  <color name="color_def_avatar_background_15">#AE8B00</color>
+  <color name="color_def_avatar_background_16">#819205</color>
+  <color name="color_def_avatar_background_17">#47A00C</color>
+  <color name="color_def_avatar_background_18">#0D9176</color>
+  <color name="color_def_avatar_background_19">#159DBF</color>
+  <color name="color_def_avatar_background_20">#296ACC</color>
+  <color name="color_def_avatar_background_21">#6A29CC</color>
+  <color name="color_def_avatar_background_22">#AB29CC</color>
+  <color name="color_def_avatar_background_23">#CC29B1</color>
+  <color name="color_def_avatar_background_24">#CC2970</color>
 </resources>
diff --git a/app/src/main/res/values/color_palette.xml b/app/src/main/res/values/color_palette.xml
index 31e1cbc5d38..4b39ee76b1a 100644
--- a/app/src/main/res/values/color_palette.xml
+++ b/app/src/main/res/values/color_palette.xml
@@ -138,6 +138,7 @@
   <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_fragment_status_bar_color">@color/color_def_oppia_reddish_brown</color>
+  <color name="color_palette_profile_status_bar_color">@color/color_def_black</color>
   <color name="color_palette_hint_dialog_status_bar_color">@color/color_def_catalina_blue</color>
   <color name="color_palette_shared_radio_button_unchecked_color">@color/color_def_black_54</color>
   <color name="color_palette_shared_radio_button_checked_color">@color/color_def_radio_green</color>
@@ -189,8 +190,17 @@
   <color name="color_palette_story_chapter_not_start_stroke_color">@color/color_def_grey</color>
   <color name="color_palette_story_chapter_default_progress_stroke_color">@color/color_def_light_grey</color>
   <color name="color_palette_topic_thumbnail_background_color">@color/color_def_columbia_blue</color>
+  <color name="color_palette_slide_drawer_open_status_bar_color">@color/color_def_root_beer_blue</color>
   <color name="color_palette_navbar_header_background_color">@color/color_def_japanese_indigo</color>
   <color name="color_palette_shared_spotlight_hint_background_color">@color/color_def_oppia_light_yellow</color>
   <color name="color_palette_shared_close_spotlight_button_color">@color/color_def_black</color>
   <color name="color_palette_shared_spotlight_overlay_arrow_color">@color/color_def_white</color>
+  <color name="color_palette_color_palette_walkthrough_status_bar_color">@color/color_def_grey</color>
+  <color name="color_palette_walkthrough_activity_rounded_corners_color">@color/color_def_grey</color>
+  <color name="color_palette_onboarding_1_status_bar_color">@color/color_def_onboarding_1_status_bar</color>
+  <color name="color_palette_onboarding_2_status_bar_color">@color/color_def_onboarding_2_status_bar</color>
+  <color name="color_palette_onboarding_3_status_bar_color">@color/color_def_onboarding_3_status_bar</color>
+  <color name="color_palette_onboarding_4_status_bar_color">@color/color_def_onboarding_4_status_bar</color>
+  <color name="color_palette_coming_soon_rect_background_end_color">@color/color_def_grape_violet</color>
+  <color name="color_palette_coming_soon_rect_background_start_color">@color/color_def_bright_violet</color>
 </resources>
diff --git a/app/src/main/res/values/colors_migrating.xml b/app/src/main/res/values/colors_migrating.xml
deleted file mode 100644
index aebb0c001ea..00000000000
--- a/app/src/main/res/values/colors_migrating.xml
+++ /dev/null
@@ -1,115 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- TODO(#4147): Remove this file after dark mode implementation -->
-<resources>
-  <!-- All of these colors will be replaced with one in color_defs.xml.
-   This is a temporary measure to make sure other 4 color files follows the convention decided
-   for them. -->
-  <color name="oppia_primary">#00645C</color>
-  <color name="oppia_primary_dark">#003933</color>
-  <color name="oppia_accent">#2D4A9D</color>
-  <color name="progress_background_tint">#081661</color>
-  <color name="concept_card_background">#FFFFF0</color>
-  <color name="concept_toolbar_background">#BE563C</color>
-  <color name="concept_toolbar_heading">#A6503A</color>
-  <!-- OPPIA COLORS -->
-  <color name="oppia_primary_text">#333333</color>
-  <color name="oppia_primary_light">#009688</color>
-  <color name="oppia_primary_text_30">#4D333333</color>
-  <color name="oppia_primary_text_dark">#DE000000</color>
-  <color name="oppia_secondary_text">#666666</color>
-  <color name="oppia_background">#F2F2F2</color>
-  <color name="oppia_grey_background">#E5E5E5</color>
-  <color name="oppia_progress_chapter_finished">#E76F51</color>
-  <color name="oppia_progress_chapter_in_progress">#E7AC9B</color>
-  <color name="oppia_progress_chapter_not_finished">#999999</color>
-  <color name="oppia_admin_auth_secondary_text">#555555</color>
-  <color name="oppia_disabled_button_background">#33999999</color>
-  <color name="oppia_text_shadow">#1F000000</color>
-  <color name="oppia_grey_border">#DDDDDD</color>
-  <color name="oppia_grey_border_dark">#666666</color>
-  <color name="oppia_dashed_divider">#80707070</color>
-  <color name="oppia_submitted_answer_text_color">#777777</color>
-  <color name="oppia_background_yellow_ivory">#FFFFF0</color>
-  <color name="oppia_faq_divider">#707070</color>
-  <color name="oppia_profile_chooser_divider">#707070</color>
-  <!--  CONFETTI COLORS -->
-  <color name="confetti_red">#FF1414</color>
-  <color name="confetti_yellow">#FFE558</color>
-  <color name="confetti_blue">#2D4A9D</color>
-  <!-- AUDIO COMPONENT -->
-  <color name="audio_component_background">@color/color_def_oppia_dark_blue</color>
-  <!-- PROFILE COMPONENT -->
-  <color name="avatar_border">#707070</color>
-  <color name="profile_edit_background">#E5E5E5</color>
-  <color name="general_navigation_background">#E5E5E5</color>
-  <color name="app_version_background">#E5E5E5</color>
-  <color name="highlighted_nav_menu_item">#BE563C</color>
-  <color name="highlighted_developer_options_nav_menu_item">#00609C</color>
-  <color name="navbar_header_background">#264653</color>
-  <!-- SUBMIT BUTTON INACTIVE -->
-  <color name="audio_language_activity_radio_button">#00A89F</color>
-  <color name="submit_button_inactive">#61999999</color>
-  <color name="submit_button_text_inactive">#61000000</color>
-  <color name="submit_button_inactive_text">#61000000</color>
-  <!-- INPUT LAYOUT EDITTEXT -->
-  <color name="mtrl_textinput_default_box_stroke_color">#666666</color>
-  <color name="edit_text_error">#923026</color>
-  <color name="edit_text_hint">#80333333</color>
-  <color name="chapter_card_shadow">#AAFFFFFF</color>
-  <color name="chapter_card_grey_border">#666666</color>
-  <color name="divider">#61000000</color>
-  <color name="toolbar_drop_shadow">#3D000000</color>
-  <!-- QUESTION COMPONENT -->
-  <color name="question_player_background">#F0FFFF</color>
-  <color name="question_player_progress_bar_gradient_start">#00E4F2F1</color>
-  <color name="question_player_progress_bar_gradient_center">#E4F2F1</color>
-  <color name="question_player_progress_bar_gradient_end">#E4F2F1</color>
-  <!-- AVATAR BACKGROUND COLORS -->
-  <color name="avatar_background_1">#E65C5C</color>
-  <color name="avatar_background_2">#EB701D</color>
-  <color name="avatar_background_3">#A48C2D</color>
-  <color name="avatar_background_4">#C1851D</color>
-  <color name="avatar_background_5">#5C9F2F</color>
-  <color name="avatar_background_6">#1A9F84</color>
-  <color name="avatar_background_7">#1F98B7</color>
-  <color name="avatar_background_8">#5C93E6</color>
-  <color name="avatar_background_9">#5C5CE6</color>
-  <color name="avatar_background_10">#935CE6</color>
-  <color name="avatar_background_11">#E65CCF</color>
-  <color name="avatar_background_12">#E65C97</color>
-  <color name="avatar_background_13">#CC2929</color>
-  <color name="avatar_background_14">#CC6A29</color>
-  <color name="avatar_background_15">#AE8B00</color>
-  <color name="avatar_background_16">#819205</color>
-  <color name="avatar_background_17">#47A00C</color>
-  <color name="avatar_background_18">#0D9176</color>
-  <color name="avatar_background_19">#159DBF</color>
-  <color name="avatar_background_20">#296ACC</color>
-  <color name="avatar_background_21">#6A29CC</color>
-  <color name="avatar_background_22">#AB29CC</color>
-  <color name="avatar_background_23">#CC29B1</color>
-  <color name="avatar_background_24">#CC2970</color>
-  <!-- ReadingTextSizeActivity -->
-  <color name="seekbar_divider">#707070</color>
-  <color name="topic_thumbnail_background">#C6DCDA</color>
-  <color name="topic_title_background">#2F6687</color>
-  <!-- STATUS BAR COLORS -->
-  <color name="profile_status_bar">#000000</color>
-  <color name="hint_full_dialog_status_bar">#00236E</color>
-  <color name="slide_drawer_open_status_bar">#001F2A</color>
-  <color name="walkthrough_status_bar">#CCCCCC</color>
-  <color name="onboarding_1_status_bar">#00847A</color>
-  <color name="onboarding_2_status_bar">#8B2A15</color>
-  <color name="onboarding_3_status_bar">#AD8500</color>
-  <color name="onboarding_4_status_bar">#3B5893</color>
-  <!-- ICON COLORS -->
-  <color name="merge_icon_enabled">#FF000000</color>
-  <color name="merge_icon_disabled">#999999</color>
-  <!-- HIGHLIGHTED COLORS -->
-  <color name="admin_highlighted">#A5D3EC</color>
-  <color name="coming_soon_end">#674172</color>
-  <color name="coming_soon_start">#7659B6</color>
-  <color name="spotlight_overlay_background">#BF000000</color>
-  <!-- SPOTLIGHT OVERLAY COLORS -->
-  <color name="spotlight_hint_background">#FFFFF0</color>
-</resources>
diff --git a/app/src/main/res/values/component_colors.xml b/app/src/main/res/values/component_colors.xml
index ca5ab5a48a6..9e504b1f212 100644
--- a/app/src/main/res/values/component_colors.xml
+++ b/app/src/main/res/values/component_colors.xml
@@ -11,6 +11,7 @@
   <color name="component_color_shared_screen_quaternary_background_color">@color/color_palette_topic_activity_background_color</color>
   <color name="component_color_shared_content_container_background_color">@color/color_palette_content_container_background_color</color>
   <color name="component_color_shared_fragment_container_background_color">@color/color_palette_primary_container_background_color</color>
+  <color name="component_color_shared_secondary_container_background_color">@color/color_palette_secondary_container_background_color</color>
   <color name="component_color_shared_revision_card_background_color">@color/color_palette_primary_background_color</color>
   <color name="component_color_shared_topic_card_item_background_color">@color/color_palette_topic_card_item_background_color</color>
   <color name="component_color_shared_story_card_topic_name_text_color">@color/color_palette_card_topic_name_text_color</color>
@@ -83,9 +84,11 @@
   <color name="component_color_shared_spotlight_overlay_arrow_color">@color/color_palette_shared_spotlight_overlay_arrow_color</color>
   <color name="component_color_shared_download_story_text_color">@color/color_palette_shared_download_story_text_color</color>
   <color name="component_color_shared_topic_thumbnail_background_color">@color/color_palette_topic_thumbnail_background_color</color>
+  <color name="component_color_shared_slide_drawer_open_status_bar_color">@color/color_palette_slide_drawer_open_status_bar_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>
+  <color name="component_color_shared_profile_status_bar_color">@color/color_palette_profile_status_bar_color</color>
   <color name="component_color_shared_activity_action_bar_color">@color/color_palette_action_bar_color</color>
   <color name="component_color_shared_dialogs_primary_color">@color/color_palette_primary_color</color>
   <color name="component_color_shared_dialogs_secondary_color">@color/color_palette_primary_dark_color</color>
@@ -97,6 +100,7 @@
   <color name="component_color_shared_secondary_3_text_color">@color/color_palette_secondary_3_text_color</color>
   <color name="component_color_shared_secondary_4_text_color">@color/color_palette_white_text_color</color>
   <color name="component_color_shared_secondary_5_text_color">@color/color_palette_black_text_color</color>
+  <color name="component_color_shared_secondary_6_text_color">@color/color_palette_toolbar_color</color>
   <color name="component_color_shared_link_text_color">@color/color_palette_link_text_color</color>
   <color name="component_color_shared_active_text_color">@color/color_palette_primary_color</color>
   <color name="component_color_shared_text_input_layout_text_color">@color/color_palette_primary_text_color</color>
@@ -170,6 +174,10 @@
   <color name="component_color_onboarding_activity_sub_text_color">@color/color_palette_primary_text_color</color>
   <color name="component_color_onboarding_activity_dots_color">@color/color_palette_dots_color</color>
   <color name="component_color_onboarding_activity_arrow_color">@color/color_palette_arrow_color</color>
+  <color name="component_color_onboarding_1_status_bar_color">@color/color_palette_onboarding_1_status_bar_color</color>
+  <color name="component_color_onboarding_2_status_bar_color">@color/color_palette_onboarding_2_status_bar_color</color>
+  <color name="component_color_onboarding_3_status_bar_color">@color/color_palette_onboarding_3_status_bar_color</color>
+  <color name="component_color_onboarding_4_status_bar_color">@color/color_palette_onboarding_4_status_bar_color</color>
   <!-- Audio Language Activity -->
   <color name="component_color_language_items_background_color">@color/color_palette_item_background_solid_color</color>
   <!-- Home Activity -->
@@ -179,6 +187,9 @@
   <color name="component_color_confetti_red_color">@color/color_palette_confetti_red_color</color>
   <color name="component_color_confetti_yellow_color">@color/color_palette_confetti_yellow_color</color>
   <color name="component_color_confetti_blue_color">@color/color_palette_confetti_blue_color</color>
+  <!-- Coming Soon Fragment-->
+  <color name="component_color_coming_soon_rect_background_end_color">@color/color_palette_coming_soon_rect_background_end_color</color>
+  <color name="component_color_coming_soon_rect_background_start_color">@color/color_palette_coming_soon_rect_background_start_color</color>
   <!-- Topic Info Fragment -->
   <color name="component_color_topic_info_fragment_thumbnail_gradient_end_color">@color/color_palette_thumbnail_gradient_end_color</color>
   <color name="component_color_topic_info_fragment_thumbnail_gradient_start_color">@color/color_palette_thumbnail_gradient_start_color</color>
@@ -218,4 +229,7 @@
   <color name="component_color_profile_chooser_activity_background_color">@color/color_palette_profile_chooser_charcoal_black_background_color</color>
   <color name="component_color_profile_chooser_activity_secondary_options_color">@color/color_palette_profile_chooser_silver_text_color</color>
   <color name="component_color_profile_chooser_activity_avatar_border_color">@color/color_palette_profile_chooser_avatar_border_color</color>
+  <!-- WalkThrough Activity -->
+  <color name="component_color_walkthrough_activity_status_bar_color">@color/color_palette_color_palette_walkthrough_status_bar_color</color>
+  <color name="component_color_walkthrough_activity_rounded_corners_color">@color/color_palette_walkthrough_activity_rounded_corners_color</color>
 </resources>
diff --git a/app/src/sharedTest/java/org/oppia/android/app/testing/NavigationDrawerActivityDebugTest.kt b/app/src/sharedTest/java/org/oppia/android/app/testing/NavigationDrawerActivityDebugTest.kt
index 07310792522..bc88bf8d40b 100644
--- a/app/src/sharedTest/java/org/oppia/android/app/testing/NavigationDrawerActivityDebugTest.kt
+++ b/app/src/sharedTest/java/org/oppia/android/app/testing/NavigationDrawerActivityDebugTest.kt
@@ -218,7 +218,13 @@ class NavigationDrawerActivityDebugTest {
           withText(R.string.developer_options),
           isDescendantOfA(withId(R.id.developer_options_linear_layout))
         )
-      ).check(matches(hasTextColor(R.color.highlighted_developer_options_nav_menu_item)))
+      ).check(
+        matches(
+          hasTextColor(
+            R.color.component_color_drawer_fragment_developer_options_selected_text_color
+          )
+        )
+      )
     }
   }
 
@@ -245,7 +251,13 @@ class NavigationDrawerActivityDebugTest {
           withText(R.string.developer_options),
           isDescendantOfA(withId(R.id.developer_options_linear_layout))
         )
-      ).check(matches(hasTextColor(R.color.highlighted_developer_options_nav_menu_item)))
+      ).check(
+        matches(
+          hasTextColor(
+            R.color.component_color_drawer_fragment_developer_options_selected_text_color
+          )
+        )
+      )
     }
   }
 
diff --git a/app/src/sharedTest/java/org/oppia/android/app/testing/NavigationDrawerActivityProdTest.kt b/app/src/sharedTest/java/org/oppia/android/app/testing/NavigationDrawerActivityProdTest.kt
index a11a78cfaa0..e9ad45b9788 100644
--- a/app/src/sharedTest/java/org/oppia/android/app/testing/NavigationDrawerActivityProdTest.kt
+++ b/app/src/sharedTest/java/org/oppia/android/app/testing/NavigationDrawerActivityProdTest.kt
@@ -416,7 +416,7 @@ class NavigationDrawerActivityProdTest {
           withText(R.string.administrator_controls),
           isDescendantOfA(withId(R.id.administrator_controls_linear_layout))
         )
-      ).check(matches(hasTextColor(R.color.highlighted_nav_menu_item)))
+      ).check(matches(hasTextColor(R.color.component_color_drawer_fragment_selected_text_color)))
     }
   }
 
@@ -530,7 +530,7 @@ class NavigationDrawerActivityProdTest {
           withText(R.string.administrator_controls),
           isDescendantOfA(withId(R.id.administrator_controls_linear_layout))
         )
-      ).check(matches(hasTextColor(R.color.highlighted_nav_menu_item)))
+      ).check(matches(hasTextColor(R.color.component_color_drawer_fragment_selected_text_color)))
     }
   }