diff --git a/app/src/main/java/org/thoughtcrime/securesms/keyboard/KeyboardPagerFragment.kt b/app/src/main/java/org/thoughtcrime/securesms/keyboard/KeyboardPagerFragment.kt
index 126caf0387..3a03181a59 100644
--- a/app/src/main/java/org/thoughtcrime/securesms/keyboard/KeyboardPagerFragment.kt
+++ b/app/src/main/java/org/thoughtcrime/securesms/keyboard/KeyboardPagerFragment.kt
@@ -1,5 +1,6 @@
 package org.thoughtcrime.securesms.keyboard
 
+import android.os.Build
 import android.os.Bundle
 import android.view.LayoutInflater
 import android.view.View
@@ -11,9 +12,11 @@ import org.thoughtcrime.securesms.components.emoji.MediaKeyboard
 import org.thoughtcrime.securesms.keyboard.emoji.EmojiKeyboardPageFragment
 import org.thoughtcrime.securesms.keyboard.gif.GifKeyboardPageFragment
 import org.thoughtcrime.securesms.keyboard.sticker.StickerKeyboardPageFragment
+import org.thoughtcrime.securesms.util.ThemeUtil
 import org.thoughtcrime.securesms.util.ThemedFragment.themeResId
 import org.thoughtcrime.securesms.util.ThemedFragment.themedInflate
 import org.thoughtcrime.securesms.util.ThemedFragment.withTheme
+import org.thoughtcrime.securesms.util.WindowUtil
 import org.thoughtcrime.securesms.util.fragments.findListener
 import org.thoughtcrime.securesms.util.visible
 import kotlin.reflect.KClass
@@ -49,6 +52,20 @@ class KeyboardPagerFragment : Fragment() {
     emojiButton.setOnClickListener { viewModel.switchToPage(KeyboardPage.EMOJI) }
     stickerButton.setOnClickListener { viewModel.switchToPage(KeyboardPage.STICKER) }
     gifButton.setOnClickListener { viewModel.switchToPage(KeyboardPage.GIF) }
+
+    onHiddenChanged(false)
+  }
+
+  override fun onHiddenChanged(hidden: Boolean) {
+    if (Build.VERSION.SDK_INT < 21) {
+      return
+    }
+
+    if (hidden) {
+      WindowUtil.setNavigationBarColor(requireActivity().window, ThemeUtil.getThemedColor(requireContext(), android.R.attr.navigationBarColor))
+    } else {
+      WindowUtil.setNavigationBarColor(requireActivity().window, ThemeUtil.getThemedColor(requireContext(), R.attr.mediaKeyboardBottomBarBackgroundColor))
+    }
   }
 
   @Suppress("DEPRECATION")
@@ -103,12 +120,16 @@ class KeyboardPagerFragment : Fragment() {
 
   fun show() {
     if (isAdded && view != null) {
+      onHiddenChanged(false)
+
       viewModel.page().value?.let(this::onPageSelected)
     }
   }
 
   fun hide() {
     if (isAdded && view != null) {
+      onHiddenChanged(true)
+
       val transaction = childFragmentManager.beginTransaction()
       fragments.values.forEach { transaction.remove(it) }
       transaction.commitAllowingStateLoss()
diff --git a/app/src/main/res/color/keyboard_pager_fragment_icon_tint.xml b/app/src/main/res/color/keyboard_pager_fragment_icon_tint.xml
new file mode 100644
index 0000000000..cdf81fc963
--- /dev/null
+++ b/app/src/main/res/color/keyboard_pager_fragment_icon_tint.xml
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<selector xmlns:android="http://schemas.android.com/apk/res/android">
+    <item android:color="@color/signal_colorOnPrimaryContainer" android:state_selected="true" />
+    <item android:color="@color/signal_colorOnSurface" />
+</selector>
\ No newline at end of file
diff --git a/app/src/main/res/drawable/ic_emoji.xml b/app/src/main/res/drawable/ic_emoji.xml
index 726a0969ee..74fd7be632 100644
--- a/app/src/main/res/drawable/ic_emoji.xml
+++ b/app/src/main/res/drawable/ic_emoji.xml
@@ -4,6 +4,6 @@
     android:viewportWidth="24"
     android:viewportHeight="24">
   <path
-      android:fillColor="@color/signal_inverse_primary"
+      android:fillColor="@color/keyboard_pager_fragment_icon_tint"
       android:pathData="M12,18.7c-2.1,0 -4.2,-1 -5.5,-2.7c-0.2,-0.3 -0.2,-0.8 0.2,-1.1s0.8,-0.2 1.1,0.2l0,0c1,1.3 2.6,2.1 4.3,2.1c1.7,0 3.3,-0.8 4.3,-2.1c0.2,-0.3 0.7,-0.4 1,-0.2c0,0 0,0 0,0c0.3,0.2 0.4,0.7 0.2,1C16.2,17.6 14.2,18.7 12,18.7zM12,2.5c-5.1,-0.2 -9.3,3.8 -9.5,8.9c0,0.2 0,0.4 0,0.6c-0.2,5.1 3.8,9.3 8.9,9.5c0.2,0 0.4,0 0.6,0c5.1,0.2 9.3,-3.8 9.5,-8.9c0,-0.2 0,-0.4 0,-0.6c0.2,-5.1 -3.8,-9.3 -8.9,-9.5C12.4,2.5 12.2,2.5 12,2.5M12,1c5.9,-0.2 10.8,4.5 11,10.4c0,0.2 0,0.4 0,0.6c0.2,5.9 -4.5,10.8 -10.4,11c-0.2,0 -0.4,0 -0.6,0C6.1,23.2 1.2,18.5 1,12.6c0,-0.2 0,-0.4 0,-0.6C0.8,6.1 5.5,1.2 11.4,1C11.6,1 11.8,1 12,1zM8.5,8C7.7,8 7,8.9 7,10s0.7,2 1.5,2s1.5,-0.9 1.5,-2S9.3,8 8.5,8zM15.5,8C14.7,8 14,8.9 14,10s0.7,2 1.5,2s1.5,-0.9 1.5,-2S16.3,8 15.5,8z"/>
 </vector>
diff --git a/app/src/main/res/drawable/ic_gif_24.xml b/app/src/main/res/drawable/ic_gif_24.xml
index c3d59ca09d..d8b18a98b2 100644
--- a/app/src/main/res/drawable/ic_gif_24.xml
+++ b/app/src/main/res/drawable/ic_gif_24.xml
@@ -4,6 +4,6 @@
     android:viewportWidth="24"
     android:viewportHeight="24">
   <path
-      android:fillColor="@color/signal_inverse_primary"
+      android:fillColor="@color/keyboard_pager_fragment_icon_tint"
       android:pathData="m14.31,3.5c2.55,0 3.23,0.26 3.91,0.62 0.7069,0.3748 1.2852,0.9531 1.66,1.66 0.36,0.68 0.62,1.36 0.62,3.91v4.62c0,2.55 -0.26,3.23 -0.62,3.91 -0.3748,0.7069 -0.9531,1.2852 -1.66,1.66 -0.68,0.36 -1.36,0.62 -3.91,0.62L9.69,20.5C7.14,20.5 6.46,20.24 5.78,19.88 5.0731,19.5052 4.4948,18.9269 4.12,18.22 3.76,17.54 3.5,16.86 3.5,14.31L3.5,9.69C3.5,7.14 3.76,6.46 4.12,5.78 4.4948,5.0731 5.0731,4.4948 5.78,4.12 6.46,3.76 7.14,3.5 9.69,3.5h4.62m0,-1.5L9.69,2C7,2 6.05,2.28 5.07,2.8 4.1052,3.3151 3.3151,4.1052 2.8,5.07 2.28,6.05 2,7 2,9.69v4.62c0,2.67 0.28,3.64 0.8,4.62 0.5151,0.9648 1.3052,1.7549 2.27,2.27 1,0.52 1.95,0.8 4.62,0.8h4.62c2.67,0 3.64,-0.28 4.62,-0.8 0.9648,-0.5151 1.7549,-1.3052 2.27,-2.27 0.52,-1 0.8,-1.95 0.8,-4.62L22,9.69C22,7.02 21.72,6.05 21.2,5.07 20.6849,4.1052 19.8948,3.3151 18.93,2.8 18,2.28 17,2 14.31,2ZM7.12,12h3.11v3.67L9,15.67L9,14.86L8.8,14.86C8.7188,15.1331 8.5502,15.3721 8.32,15.54 8.0086,15.7507 7.6348,15.8494 7.26,15.82 6.94,15.8238 6.6229,15.759 6.33,15.63 6.0294,15.4847 5.7685,15.2685 5.57,15 5.3453,14.727 5.1725,14.4152 5.06,14.08 4.9287,13.6697 4.8645,13.2408 4.87,12.81v-1.7C4.8671,10.6974 4.9382,10.2875 5.08,9.9 5.2002,9.5634 5.3911,9.2565 5.64,9 5.8782,8.7501 6.1684,8.5555 6.49,8.43 6.8416,8.2984 7.2147,8.234 7.59,8.24c0.3827,-0.0054 0.7628,0.0625 1.12,0.2 0.3092,0.1333 0.5907,0.3232 0.83,0.56 0.2285,0.2438 0.4024,0.5336 0.51,0.85 0.1184,0.3201 0.1793,0.6587 0.18,1L10.23,11L8.86,11L8.86,10.88C8.892,10.5137 8.7686,10.1509 8.52,9.88 8.2645,9.6393 7.9202,9.5161 7.57,9.54 7.1954,9.5158 6.8293,9.6586 6.57,9.93 6.2834,10.3108 6.1512,10.7859 6.2,11.26v1.54c0,1.12 0.45,1.68 1.37,1.68 0.3393,0.023 0.6727,-0.0966 0.92,-0.33 0.224,-0.2323 0.3401,-0.5479 0.32,-0.87L7.12,13.28ZM13.12,8.41v7.26L11.7,15.67v-7.3zM14.53,8.41h4.65v1.3h-3.33v1.67h3.22v1.3h-3.22v3h-1.37z"/>
 </vector>
diff --git a/app/src/main/res/drawable/ic_sticker_24.xml b/app/src/main/res/drawable/ic_sticker_24.xml
index 101f5a1503..2871d7d6a1 100644
--- a/app/src/main/res/drawable/ic_sticker_24.xml
+++ b/app/src/main/res/drawable/ic_sticker_24.xml
@@ -4,6 +4,6 @@
     android:viewportWidth="24"
     android:viewportHeight="24">
   <path
-      android:fillColor="@color/signal_inverse_primary"
+      android:fillColor="@color/keyboard_pager_fragment_icon_tint"
       android:pathData="M21.2,5.072C20.6833,4.1072 19.8928,3.3167 18.928,2.8 17.951,2.278 16.981,2 14.308,2L9.692,2C7.019,2 6.049,2.278 5.072,2.8 4.1072,3.3167 3.3167,4.1072 2.8,5.072 2.278,6.049 2,7.019 2,9.692v4.616c0,2.673 0.278,3.643 0.8,4.62 0.5167,0.9648 1.3072,1.7553 2.272,2.272 1.1183,0.5668 2.3634,0.8371 3.616,0.785h0.1c0.6072,-0.0005 1.2,-0.1854 1.7,-0.53L20.734,14.4C21.5289,13.837 22.0009,12.9231 22,11.949L22,9.692C22,7.019 21.722,6.049 21.2,5.072ZM8.739,20.485C7.716,20.5465 6.6949,20.3367 5.779,19.877 5.0748,19.5017 4.4983,18.9252 4.123,18.221 3.758,17.538 3.5,16.858 3.5,14.308L3.5,9.692C3.5,7.142 3.758,6.461 4.123,5.779 4.4983,5.0748 5.0748,4.4983 5.779,4.123 6.462,3.758 7.142,3.5 9.692,3.5h4.616c2.55,0 3.231,0.258 3.913,0.623 0.7042,0.3753 1.2807,0.9518 1.656,1.656 0.365,0.683 0.623,1.363 0.623,3.913v2.257c-0.002,0.1009 -0.0141,0.2014 -0.036,0.3h-3.273c-2.8,0 -3.872,0.3 -4.975,0.89 -1.0978,0.5798 -1.9952,1.4772 -2.575,2.575 -0.575,1.074 -0.872,2.132 -0.888,4.769L8.739,20.483ZM10.264,19.785c-0.0659,-1.1627 0.1755,-2.3222 0.7,-3.362 0.4413,-0.8359 1.1243,-1.5193 1.96,-1.961 0.755,-0.4 1.549,-0.712 4.268,-0.712h1.837z"/>
 </vector>
diff --git a/app/src/main/res/drawable/keyboard_bottom_bar_background.xml b/app/src/main/res/drawable/keyboard_bottom_bar_background.xml
deleted file mode 100644
index b54cc2d406..0000000000
--- a/app/src/main/res/drawable/keyboard_bottom_bar_background.xml
+++ /dev/null
@@ -1,14 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
-    <item>
-        <shape android:shape="rectangle">
-            <solid android:color="@color/signal_background_secondary" />
-        </shape>
-    </item>
-    <item android:gravity="top">
-        <shape android:shape="rectangle">
-            <size android:height="1dp" />
-            <solid android:color="@color/signal_inverse_transparent_10" />
-        </shape>
-    </item>
-</layer-list>
\ No newline at end of file
diff --git a/app/src/main/res/drawable/keyboard_pager_fragment_category_selected.xml b/app/src/main/res/drawable/keyboard_pager_fragment_category_selected.xml
index bee692d1b5..e249081765 100644
--- a/app/src/main/res/drawable/keyboard_pager_fragment_category_selected.xml
+++ b/app/src/main/res/drawable/keyboard_pager_fragment_category_selected.xml
@@ -4,7 +4,7 @@
         <layer-list>
             <item android:top="6dp" android:left="6dp" android:bottom="6dp" android:right="6dp">
                 <shape android:shape="rectangle">
-                    <solid android:color="@color/signal_inverse_transparent_08" />
+                    <solid android:color="@color/signal_colorPrimaryContainer" />
                     <corners android:radius="8dp" />
                 </shape>
             </item>
diff --git a/app/src/main/res/drawable/keyboard_pager_fragment_selected.xml b/app/src/main/res/drawable/keyboard_pager_fragment_selected.xml
index 04915f0126..8601808680 100644
--- a/app/src/main/res/drawable/keyboard_pager_fragment_selected.xml
+++ b/app/src/main/res/drawable/keyboard_pager_fragment_selected.xml
@@ -2,7 +2,7 @@
 <selector xmlns:android="http://schemas.android.com/apk/res/android">
     <item android:state_selected="true">
         <shape android:shape="rectangle">
-            <solid android:color="@color/signal_inverse_transparent_05" />
+            <solid android:color="@color/signal_colorPrimaryContainer" />
             <corners android:radius="8dp" />
         </shape>
     </item>
diff --git a/app/src/main/res/layout/emoji_grid_header.xml b/app/src/main/res/layout/emoji_grid_header.xml
index 464cccb738..6b9dccef98 100644
--- a/app/src/main/res/layout/emoji_grid_header.xml
+++ b/app/src/main/res/layout/emoji_grid_header.xml
@@ -8,6 +8,6 @@
     android:gravity="center_vertical"
     android:minHeight="36dp"
     android:singleLine="true"
-    android:textAppearance="@style/TextAppearance.Signal.Body2.Bold"
-    android:textColor="@color/signal_text_hint"
+    android:textAppearance="@style/Signal.Text.LabelLarge"
+    android:textColor="@color/signal_colorOnSurfaceVariant"
     tools:text="@string/ReactWithAnyEmojiBottomSheetDialogFragment__activities" />
diff --git a/app/src/main/res/layout/gif_keyboard_page_fragment.xml b/app/src/main/res/layout/gif_keyboard_page_fragment.xml
index 39abaee665..647074627e 100644
--- a/app/src/main/res/layout/gif_keyboard_page_fragment.xml
+++ b/app/src/main/res/layout/gif_keyboard_page_fragment.xml
@@ -4,12 +4,12 @@
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
-    tools:background="@color/signal_background_secondary">
+    tools:background="?mediaKeyboardBackgroundColor">
 
     <com.google.android.material.appbar.AppBarLayout
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:background="@color/signal_background_secondary"
+        android:background="?mediaKeyboardBackgroundColor"
         app:elevation="0dp">
 
         <org.thoughtcrime.securesms.keyboard.emoji.KeyboardPageSearchView
@@ -37,7 +37,7 @@
         android:layout_width="match_parent"
         android:layout_height="@dimen/keyboard_toolbar_height"
         android:layout_gravity="bottom"
-        android:background="@drawable/keyboard_bottom_bar_background"
+        android:background="?mediaKeyboardBottomBarBackgroundColor"
         android:gravity="center_vertical"
         android:orientation="horizontal"
         app:layout_behavior="@string/hide_bottom_view_on_scroll_behavior">
diff --git a/app/src/main/res/layout/keyboard_pager_emoji_page_fragment.xml b/app/src/main/res/layout/keyboard_pager_emoji_page_fragment.xml
index 0aaba9926c..d48e7513a3 100644
--- a/app/src/main/res/layout/keyboard_pager_emoji_page_fragment.xml
+++ b/app/src/main/res/layout/keyboard_pager_emoji_page_fragment.xml
@@ -45,7 +45,7 @@
         android:layout_width="match_parent"
         android:layout_height="@dimen/keyboard_toolbar_height"
         android:layout_gravity="bottom"
-        android:background="?mediaKeyboardBackgroundColor"
+        android:background="?mediaKeyboardBottomBarBackgroundColor"
         android:gravity="center_vertical"
         android:orientation="horizontal"
         app:layout_behavior="@string/hide_bottom_view_on_scroll_behavior">
@@ -83,20 +83,4 @@
             app:tint="@color/icon_tab_selector" />
     </LinearLayout>
 
-    <View
-        android:id="@+id/emoji_keyboard_top_shadow"
-        android:layout_width="match_parent"
-        android:layout_height="2dp"
-        android:background="@drawable/toolbar_shadow"
-        app:app_bar_layout_id="@+id/emoji_keyboard_search_appbar"
-        app:layout_behavior="org.thoughtcrime.securesms.keyboard.TopShadowBehavior" />
-
-    <View
-        android:id="@+id/emoji_keyboard_bottom_shadow"
-        android:layout_width="match_parent"
-        android:layout_height="3dp"
-        android:background="@drawable/bottom_toolbar_shadow"
-        app:bottom_bar_id="@+id/emoji_keyboard_bottom_bar"
-        app:layout_behavior="org.thoughtcrime.securesms.keyboard.BottomShadowBehavior" />
-
 </androidx.coordinatorlayout.widget.CoordinatorLayout>
\ No newline at end of file
diff --git a/app/src/main/res/layout/keyboard_pager_sticker_page_fragment.xml b/app/src/main/res/layout/keyboard_pager_sticker_page_fragment.xml
index 09818f2061..e2dd641939 100644
--- a/app/src/main/res/layout/keyboard_pager_sticker_page_fragment.xml
+++ b/app/src/main/res/layout/keyboard_pager_sticker_page_fragment.xml
@@ -4,13 +4,13 @@
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
-    tools:background="@color/signal_background_secondary">
+    tools:background="?mediaKeyboardBackgroundColor">
 
     <com.google.android.material.appbar.AppBarLayout
         android:id="@+id/sticker_keyboard_search_appbar"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:background="@color/signal_background_secondary"
+        android:background="?mediaKeyboardBackgroundColor"
         app:elevation="0dp"
         app:expanded="false"
         tools:expanded="true">
@@ -44,7 +44,7 @@
         android:layout_width="match_parent"
         android:layout_height="@dimen/keyboard_toolbar_height"
         android:layout_gravity="bottom"
-        android:background="@color/signal_background_secondary"
+        android:background="?mediaKeyboardBottomBarBackgroundColor"
         android:gravity="center_vertical"
         android:orientation="horizontal"
         app:layout_behavior="@string/hide_bottom_view_on_scroll_behavior">
@@ -58,6 +58,7 @@
             android:padding="11dp"
             android:scaleType="fitCenter"
             app:srcCompat="@drawable/ic_search_24"
+            app:backgroundTint="?mediaKeyboardBackgroundColor"
             app:tint="@color/icon_tab_selector" />
 
         <androidx.recyclerview.widget.RecyclerView
@@ -83,18 +84,4 @@
 
     </LinearLayout>
 
-    <View
-        android:layout_width="match_parent"
-        android:layout_height="2dp"
-        android:background="@drawable/toolbar_shadow"
-        app:app_bar_layout_id="@+id/sticker_keyboard_search_appbar"
-        app:layout_behavior="org.thoughtcrime.securesms.keyboard.TopShadowBehavior" />
-
-    <View
-        android:layout_width="match_parent"
-        android:layout_height="3dp"
-        android:background="@drawable/bottom_toolbar_shadow"
-        app:bottom_bar_id="@+id/sticker_keyboard_packs_background"
-        app:layout_behavior="org.thoughtcrime.securesms.keyboard.BottomShadowBehavior" />
-
 </androidx.coordinatorlayout.widget.CoordinatorLayout>
diff --git a/app/src/main/res/layout/sticker_grid_header.xml b/app/src/main/res/layout/sticker_grid_header.xml
index 92668e4626..35f83831de 100644
--- a/app/src/main/res/layout/sticker_grid_header.xml
+++ b/app/src/main/res/layout/sticker_grid_header.xml
@@ -8,6 +8,6 @@
     android:gravity="center_vertical"
     android:minHeight="36dp"
     android:singleLine="true"
-    android:textAppearance="@style/TextAppearance.Signal.Body2.Bold"
-    android:textColor="@color/signal_text_hint"
+    android:textAppearance="@style/Signal.Text.LabelLarge"
+    android:textColor="@color/signal_colorOnSurfaceVariant"
     tools:text="@string/ReactWithAnyEmojiBottomSheetDialogFragment__activities" />
diff --git a/app/src/main/res/values-night/dark_colors.xml b/app/src/main/res/values-night/dark_colors.xml
index 26e3146a0f..be60149ad6 100644
--- a/app/src/main/res/values-night/dark_colors.xml
+++ b/app/src/main/res/values-night/dark_colors.xml
@@ -30,8 +30,8 @@
     <color name="signal_icon_tint_secondary">@color/core_grey_25</color>
     <color name="signal_icon_tint_action">@color/signal_icon_tint_primary</color>
 
-    <color name="signal_icon_tint_tab_selected">@color/core_white</color>
-    <color name="signal_icon_tint_tab_unselected">@color/core_grey_25</color>
+    <color name="signal_icon_tint_tab_selected">@color/signal_colorOnSurface</color>
+    <color name="signal_icon_tint_tab_unselected">@color/signal_colorOnSurfaceVariant</color>
 
     <color name="signal_button_primary">@color/core_ultramarine_light</color>
     <color name="signal_button_primary_ripple">@color/transparent_black_15</color>
diff --git a/app/src/main/res/values/attrs.xml b/app/src/main/res/values/attrs.xml
index 626462f725..0bb46aee09 100644
--- a/app/src/main/res/values/attrs.xml
+++ b/app/src/main/res/values/attrs.xml
@@ -19,6 +19,7 @@
     <attr name="emoji_category_emoticons" format="reference"/>
 
     <attr name="mediaKeyboardBackgroundColor" format="color" />
+    <attr name="mediaKeyboardBottomBarBackgroundColor" format="color" />
 
     <attr name="settingsToolbarStyle" format="reference" />
 
diff --git a/app/src/main/res/values/light_colors.xml b/app/src/main/res/values/light_colors.xml
index 04083d6dfe..79f5b94472 100644
--- a/app/src/main/res/values/light_colors.xml
+++ b/app/src/main/res/values/light_colors.xml
@@ -32,7 +32,7 @@
     <color name="signal_icon_tint_action">@color/core_black</color>
 
     <color name="signal_icon_tint_tab_selected">@color/signal_colorOnSurface</color>
-    <color name="signal_icon_tint_tab_unselected">@color/core_grey_45</color>
+    <color name="signal_icon_tint_tab_unselected">@color/signal_colorOnSurfaceVariant</color>
 
     <color name="signal_button_primary">@color/core_ultramarine</color>
     <color name="signal_button_primary_ripple">@color/transparent_black_15</color>
diff --git a/app/src/main/res/values/themes.xml b/app/src/main/res/values/themes.xml
index 2c4f3116f1..d24246524e 100644
--- a/app/src/main/res/values/themes.xml
+++ b/app/src/main/res/values/themes.xml
@@ -176,7 +176,8 @@
         <item name="bottomSheetDialogTheme">@style/Theme.Signal.Light.BottomSheetDialog</item>
 
         <item name="contactCheckboxBackground">@drawable/contact_selection_checkbox</item>
-        <item name="mediaKeyboardBackgroundColor">@color/signal_background_secondary</item>
+        <item name="mediaKeyboardBackgroundColor">@color/signal_colorSurface2</item>
+        <item name="mediaKeyboardBottomBarBackgroundColor">@color/signal_colorSurface5</item>
 
         <item name="actionBarStyle">@style/TextSecure.LightActionBar</item>
         <item name="actionBarTabBarStyle">@style/TextSecure.LightActionBar.TabBar</item>
@@ -281,7 +282,8 @@
         <item name="settingsToolbarStyle">@style/TextSecure.DarkActionBar.Settings</item>
 
         <item name="contactCheckboxBackground">@drawable/contact_selection_checkbox</item>
-        <item name="mediaKeyboardBackgroundColor">@color/signal_background_secondary</item>
+        <item name="mediaKeyboardBackgroundColor">@color/signal_colorSurface2</item>
+        <item name="mediaKeyboardBottomBarBackgroundColor">@color/signal_colorSurface5</item>
 
         <item name="contact_filter_toolbar_icon_tint">@color/signal_icon_tint_primary</item>
 
@@ -575,7 +577,8 @@
     <style name="Theme.Signal.RoundedBottomSheet.Stories">
         <item name="android:windowIsFloating">false</item>
         <item name="bottomSheetStyle">@style/Widget.Signal.FixedRoundedCorners.BottomSheet.Stories</item>
-        <item name="mediaKeyboardBackgroundColor">@color/signal_background_tertiary</item>
+        <item name="mediaKeyboardBackgroundColor">@color/signal_colorSurface2</item>
+        <item name="mediaKeyboardBottomBarBackgroundColor">@color/signal_colorSurface5</item>
 
         <item name="android:textColorPrimary">@color/core_grey_05</item>