diff --git a/js/views/conversation_view.js b/js/views/conversation_view.js
index c2752c2bf..b89a90bf2 100644
--- a/js/views/conversation_view.js
+++ b/js/views/conversation_view.js
@@ -701,9 +701,13 @@
 
       const { sender } = mostRecent;
       const contact = ConversationController.getOrCreate(sender, 'private');
+      // we need the opposite theme
+      const color =
+        window.Events.getThemeSetting() === 'light' ? 'dark' : 'light';
       const props = {
         ...contact.format(),
         conversationType: this.model.isPrivate() ? 'direct' : 'group',
+        color,
       };
 
       if (this.typingBubbleView) {
diff --git a/ts/components/conversation/TypingBubble.tsx b/ts/components/conversation/TypingBubble.tsx
index 5a683ca2f..7b4756de3 100644
--- a/ts/components/conversation/TypingBubble.tsx
+++ b/ts/components/conversation/TypingBubble.tsx
@@ -58,7 +58,7 @@ export class TypingBubble extends React.Component<Props> {
             )}
           >
             <div className="module-message__typing-container">
-              <TypingAnimation color="light" i18n={i18n} />
+              <TypingAnimation color={color} i18n={i18n} />
             </div>
             {this.renderAvatar()}
           </div>