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
@@ -8,6 +8,8 @@
 import EmojiPicker, { useRecentPicksPersistence } from 'rn-emoji-keyboard';
 import emojisData from 'rn-emoji-keyboard/src/assets/emojis.json';
 
+import { useColors } from '../themes/colors.js';
+
 const STORAGE_KEY = 'EMOJI_KEYBOARD_RECENT';
 
 const categoryOrder = [
@@ -90,6 +92,42 @@
 
   useRecentPicksPersistence(useRecentPicksPersistenceArgs);
 
+  const colors = useColors();
+
+  const theme = React.useMemo(
+    () => ({
+      knob: colors.emojiKeyboardKnob,
+      container: colors.modalForeground,
+      header: colors.modalBackgroundLabel,
+      category: {
+        icon: colors.emojiKeyboardCategoryIcon,
+        iconActive: colors.panelForegroundLabel,
+        container: colors.panelInputBackground,
+        containerActive: colors.emojiKeyboardcontainerActive,
+      },
+      search: {
+        text: colors.panelForegroundLabel,
+        placeholder: colors.panelInputSecondaryForeground,
+        icon: colors.panelInputSecondaryForeground,
+        background: colors.panelInputBackground,
+      },
+      emoji: {
+        selected: colors.panelSecondaryForegroundBorder,
+      },
+    }),
+    [
+      colors.emojiKeyboardCategoryIcon,
+      colors.emojiKeyboardKnob,
+      colors.emojiKeyboardcontainerActive,
+      colors.modalBackgroundLabel,
+      colors.modalForeground,
+      colors.panelForegroundLabel,
+      colors.panelInputBackground,
+      colors.panelInputSecondaryForeground,
+      colors.panelSecondaryForegroundBorder,
+    ],
+  );
+
   return (
     <EmojiPicker
       onEmojiSelected={handleOnEmojiSelected}
@@ -100,6 +138,7 @@
       enableRecentlyUsed
       categoryOrder={categoryOrder}
       selectedEmojis={currentlySelected}
+      theme={theme}
       styles={emojiKeyboardStyles}
     />
   );
diff --git a/native/themes/colors.js b/native/themes/colors.js
--- a/native/themes/colors.js
+++ b/native/themes/colors.js
@@ -141,6 +141,9 @@
   secondaryButtonBorder: designSystemColors.shadesWhite100,
   inviteLinkLinkColor: designSystemColors.shadesBlack100,
   inviteLinkButtonBackground: designSystemColors.shadesWhite60,
+  emojiKeyboardKnob: designSystemColors.shadesWhite90,
+  emojiKeyboardCategoryIcon: designSystemColors.shadesBlack70,
+  emojiKeyboardcontainerActive: designSystemColors.shadesWhite90,
 });
 export type Colors = $Exact<typeof light>;
 
@@ -238,6 +241,9 @@
   secondaryButtonBorder: designSystemColors.shadesWhite100,
   inviteLinkLinkColor: designSystemColors.shadesWhite80,
   inviteLinkButtonBackground: designSystemColors.shadesBlack80,
+  emojiKeyboardKnob: designSystemColors.shadesWhite100,
+  emojiKeyboardCategoryIcon: designSystemColors.shadesWhite70,
+  emojiKeyboardcontainerActive: designSystemColors.shadesBlack60,
 });
 const colors = { light, dark };