diff --git a/native/components/emoji-keyboard.react.js b/native/components/emoji-keyboard.react.js
--- a/native/components/emoji-keyboard.react.js
+++ b/native/components/emoji-keyboard.react.js
@@ -92,35 +92,35 @@
 
   const theme = React.useMemo(
     () => ({
-      knob: colors.emojiKeyboardKnob,
+      knob: colors.modalKnob,
       container: colors.modalForeground,
       header: colors.modalBackgroundLabel,
       category: {
-        icon: colors.emojiKeyboardCategoryIcon,
-        iconActive: colors.panelForegroundLabel,
-        container: colors.panelInputBackground,
-        containerActive: colors.emojiKeyboardContainerActive,
+        icon: colors.modalButtonLabel,
+        iconActive: colors.modalButtonLabel,
+        container: colors.modalInputBackground,
+        containerActive: colors.modalInputForeground,
       },
       search: {
-        text: colors.panelForegroundLabel,
-        placeholder: colors.panelInputSecondaryForeground,
-        icon: colors.panelInputSecondaryForeground,
-        background: colors.panelInputBackground,
+        text: colors.modalForegroundLabel,
+        placeholder: colors.modalForegroundSecondaryLabel,
+        icon: colors.modalForegroundSecondaryLabel,
+        background: colors.modalInputBackground,
       },
       emoji: {
-        selected: colors.panelSecondaryForegroundBorder,
+        selected: colors.modalButton,
       },
     }),
     [
-      colors.emojiKeyboardCategoryIcon,
-      colors.emojiKeyboardKnob,
-      colors.emojiKeyboardContainerActive,
-      colors.modalBackgroundLabel,
+      colors.modalKnob,
       colors.modalForeground,
-      colors.panelForegroundLabel,
-      colors.panelInputBackground,
-      colors.panelInputSecondaryForeground,
-      colors.panelSecondaryForegroundBorder,
+      colors.modalBackgroundLabel,
+      colors.modalButtonLabel,
+      colors.modalInputBackground,
+      colors.modalInputForeground,
+      colors.modalForegroundLabel,
+      colors.modalForegroundSecondaryLabel,
+      colors.modalButton,
     ],
   );
 
diff --git a/native/themes/colors.js b/native/themes/colors.js
--- a/native/themes/colors.js
+++ b/native/themes/colors.js
@@ -95,6 +95,9 @@
   modalIosHighlightUnderlay: '#CCCCCCDD',
   modalSubtext: designSystemColors.shadesWhite60,
   modalSubtextLabel: designSystemColors.shadesBlack70,
+  modalInputBackground: designSystemColors.shadesWhite60,
+  modalInputForeground: designSystemColors.shadesWhite90,
+  modalKnob: designSystemColors.shadesWhite90,
   navigationCard: designSystemColors.shadesWhite100,
   navigationChevron: designSystemColors.shadesWhite60,
   panelBackground: designSystemColors.shadesWhite90,
@@ -141,9 +144,6 @@
   secondaryButtonBorder: designSystemColors.shadesWhite100,
   inviteLinkLinkColor: designSystemColors.shadesBlack100,
   inviteLinkButtonBackground: designSystemColors.shadesWhite60,
-  emojiKeyboardKnob: designSystemColors.shadesWhite90,
-  emojiKeyboardCategoryIcon: designSystemColors.shadesBlack70,
-  emojiKeyboardContainerActive: designSystemColors.shadesWhite90,
 });
 export type Colors = $Exact<typeof light>;
 
@@ -192,6 +192,9 @@
   modalIosHighlightUnderlay: '#AAAAAA88',
   modalSubtext: designSystemColors.shadesBlack80,
   modalSubtextLabel: '#AAAAAA',
+  modalInputBackground: designSystemColors.shadesBlack80,
+  modalInputForeground: designSystemColors.shadesBlack60,
+  modalKnob: designSystemColors.shadesWhite90,
   navigationCard: '#2A2A2A',
   navigationChevron: designSystemColors.shadesBlack70,
   panelBackground: designSystemColors.shadesBlack100,
@@ -241,9 +244,6 @@
   secondaryButtonBorder: designSystemColors.shadesWhite100,
   inviteLinkLinkColor: designSystemColors.shadesWhite80,
   inviteLinkButtonBackground: designSystemColors.shadesBlack80,
-  emojiKeyboardKnob: designSystemColors.shadesWhite100,
-  emojiKeyboardCategoryIcon: designSystemColors.shadesWhite70,
-  emojiKeyboardContainerActive: designSystemColors.shadesBlack60,
 });
 const colors = { light, dark };