diff --git a/app/src/main/java/com/nextcloud/talk/adapters/messages/IncomingLocationMessageViewHolder.kt b/app/src/main/java/com/nextcloud/talk/adapters/messages/IncomingLocationMessageViewHolder.kt
index 78047193c..1febe1bed 100644
--- a/app/src/main/java/com/nextcloud/talk/adapters/messages/IncomingLocationMessageViewHolder.kt
+++ b/app/src/main/java/com/nextcloud/talk/adapters/messages/IncomingLocationMessageViewHolder.kt
@@ -102,7 +102,13 @@ class IncomingLocationMessageViewHolder(incomingView: View, payload: Any) : Mess
         // geo-location
         setLocationDataOnMessageItem(message)
 
-        Reaction().showReactions(message, binding.reactions, binding.messageText.context, false)
+        Reaction().showReactions(
+            message,
+            binding.reactions,
+            binding.messageText.context,
+            false,
+            viewThemeUtils
+        )
         binding.reactions.reactionsEmojiWrapper.setOnClickListener {
             reactionsInterface.onClickReactions(message)
         }
diff --git a/app/src/main/java/com/nextcloud/talk/adapters/messages/IncomingPollMessageViewHolder.kt b/app/src/main/java/com/nextcloud/talk/adapters/messages/IncomingPollMessageViewHolder.kt
index b50575a93..66d296b3e 100644
--- a/app/src/main/java/com/nextcloud/talk/adapters/messages/IncomingPollMessageViewHolder.kt
+++ b/app/src/main/java/com/nextcloud/talk/adapters/messages/IncomingPollMessageViewHolder.kt
@@ -88,7 +88,13 @@ class IncomingPollMessageViewHolder(incomingView: View, payload: Any) : MessageH
 
         setPollPreview(message)
 
-        Reaction().showReactions(message, binding.reactions, binding.messageTime.context, false)
+        Reaction().showReactions(
+            message,
+            binding.reactions,
+            binding.messageTime.context,
+            false,
+            viewThemeUtils
+        )
         binding.reactions.reactionsEmojiWrapper.setOnClickListener {
             reactionsInterface.onClickReactions(message)
         }
diff --git a/app/src/main/java/com/nextcloud/talk/adapters/messages/IncomingVoiceMessageViewHolder.kt b/app/src/main/java/com/nextcloud/talk/adapters/messages/IncomingVoiceMessageViewHolder.kt
index 1955859e7..3088d4b39 100644
--- a/app/src/main/java/com/nextcloud/talk/adapters/messages/IncomingVoiceMessageViewHolder.kt
+++ b/app/src/main/java/com/nextcloud/talk/adapters/messages/IncomingVoiceMessageViewHolder.kt
@@ -145,7 +145,13 @@ class IncomingVoiceMessageViewHolder(incomingView: View, payload: Any) : Message
             }
         })
 
-        Reaction().showReactions(message, binding.reactions, binding.messageTime.context, false)
+        Reaction().showReactions(
+            message,
+            binding.reactions,
+            binding.messageTime.context,
+            false,
+            viewThemeUtils
+        )
         binding.reactions.reactionsEmojiWrapper.setOnClickListener {
             reactionsInterface.onClickReactions(message)
         }
diff --git a/app/src/main/java/com/nextcloud/talk/adapters/messages/MagicIncomingTextMessageViewHolder.kt b/app/src/main/java/com/nextcloud/talk/adapters/messages/MagicIncomingTextMessageViewHolder.kt
index 4df5a1bef..c94127b2d 100644
--- a/app/src/main/java/com/nextcloud/talk/adapters/messages/MagicIncomingTextMessageViewHolder.kt
+++ b/app/src/main/java/com/nextcloud/talk/adapters/messages/MagicIncomingTextMessageViewHolder.kt
@@ -122,7 +122,13 @@ class MagicIncomingTextMessageViewHolder(itemView: View, payload: Any) : Message
 
         itemView.setTag(MessageSwipeCallback.REPLYABLE_VIEW_TAG, message.replyable)
 
-        Reaction().showReactions(message, binding.reactions, binding.messageText.context, false)
+        Reaction().showReactions(
+            message,
+            binding.reactions,
+            binding.messageText.context,
+            false,
+            viewThemeUtils
+        )
         binding.reactions.reactionsEmojiWrapper.setOnClickListener {
             reactionsInterface.onClickReactions(message)
         }
diff --git a/app/src/main/java/com/nextcloud/talk/adapters/messages/MagicOutcomingTextMessageViewHolder.kt b/app/src/main/java/com/nextcloud/talk/adapters/messages/MagicOutcomingTextMessageViewHolder.kt
index 61d387602..fc9611b33 100644
--- a/app/src/main/java/com/nextcloud/talk/adapters/messages/MagicOutcomingTextMessageViewHolder.kt
+++ b/app/src/main/java/com/nextcloud/talk/adapters/messages/MagicOutcomingTextMessageViewHolder.kt
@@ -128,7 +128,7 @@ class MagicOutcomingTextMessageViewHolder(itemView: View) : OutcomingTextMessage
 
         itemView.setTag(MessageSwipeCallback.REPLYABLE_VIEW_TAG, message.replyable)
 
-        Reaction().showReactions(message, binding.reactions, context!!, true)
+        Reaction().showReactions(message, binding.reactions, context, true, viewThemeUtils)
         binding.reactions.reactionsEmojiWrapper.setOnClickListener {
             reactionsInterface.onClickReactions(message)
         }
diff --git a/app/src/main/java/com/nextcloud/talk/adapters/messages/MagicPreviewMessageViewHolder.java b/app/src/main/java/com/nextcloud/talk/adapters/messages/MagicPreviewMessageViewHolder.java
index e6c5a7d23..d10532a65 100644
--- a/app/src/main/java/com/nextcloud/talk/adapters/messages/MagicPreviewMessageViewHolder.java
+++ b/app/src/main/java/com/nextcloud/talk/adapters/messages/MagicPreviewMessageViewHolder.java
@@ -51,6 +51,7 @@ import com.nextcloud.talk.data.user.model.User;
 import com.nextcloud.talk.databinding.ReactionsInsideMessageBinding;
 import com.nextcloud.talk.models.json.chat.ChatMessage;
 import com.nextcloud.talk.ui.theme.ServerTheme;
+import com.nextcloud.talk.ui.theme.ViewThemeUtils;
 import com.nextcloud.talk.utils.DisplayUtils;
 import com.nextcloud.talk.utils.DrawableUtils;
 import com.nextcloud.talk.utils.FileViewerUtils;
@@ -96,6 +97,9 @@ public abstract class MagicPreviewMessageViewHolder extends MessageHolders.Incom
     @Inject
     ServerTheme serverTheme;
 
+    @Inject
+    ViewThemeUtils viewThemeUtils;
+
     @Inject
     OkHttpClient okHttpClient;
 
@@ -239,7 +243,11 @@ public abstract class MagicPreviewMessageViewHolder extends MessageHolders.Incom
         itemView.setTag(REPLYABLE_VIEW_TAG, message.getReplyable());
 
         reactionsBinding = getReactionsBinding();
-        new Reaction().showReactions(message, reactionsBinding, getMessageText().getContext(), true);
+        new Reaction().showReactions(message,
+                                     reactionsBinding,
+                                     getMessageText().getContext(),
+                                     true,
+                                     viewThemeUtils);
         reactionsBinding.reactionsEmojiWrapper.setOnClickListener(l -> {
             reactionsInterface.onClickReactions(message);
         });
diff --git a/app/src/main/java/com/nextcloud/talk/adapters/messages/OutcomingLocationMessageViewHolder.kt b/app/src/main/java/com/nextcloud/talk/adapters/messages/OutcomingLocationMessageViewHolder.kt
index 4d42e6df3..84118d377 100644
--- a/app/src/main/java/com/nextcloud/talk/adapters/messages/OutcomingLocationMessageViewHolder.kt
+++ b/app/src/main/java/com/nextcloud/talk/adapters/messages/OutcomingLocationMessageViewHolder.kt
@@ -120,7 +120,13 @@ class OutcomingLocationMessageViewHolder(incomingView: View) : MessageHolders
         // geo-location
         setLocationDataOnMessageItem(message)
 
-        Reaction().showReactions(message, binding.reactions, binding.messageText.context, true)
+        Reaction().showReactions(
+            message,
+            binding.reactions,
+            binding.messageText.context,
+            true,
+            viewThemeUtils
+        )
         binding.reactions.reactionsEmojiWrapper.setOnClickListener {
             reactionsInterface.onClickReactions(message)
         }
diff --git a/app/src/main/java/com/nextcloud/talk/adapters/messages/OutcomingPollMessageViewHolder.kt b/app/src/main/java/com/nextcloud/talk/adapters/messages/OutcomingPollMessageViewHolder.kt
index 883241bc2..936c73342 100644
--- a/app/src/main/java/com/nextcloud/talk/adapters/messages/OutcomingPollMessageViewHolder.kt
+++ b/app/src/main/java/com/nextcloud/talk/adapters/messages/OutcomingPollMessageViewHolder.kt
@@ -106,7 +106,13 @@ class OutcomingPollMessageViewHolder(outcomingView: View, payload: Any) : Messag
 
         setPollPreview(message)
 
-        Reaction().showReactions(message, binding.reactions, binding.messageTime.context, true)
+        Reaction().showReactions(
+            message,
+            binding.reactions,
+            binding.messageTime.context,
+            true,
+            viewThemeUtils
+        )
         binding.reactions.reactionsEmojiWrapper.setOnClickListener {
             reactionsInterface.onClickReactions(message)
         }
diff --git a/app/src/main/java/com/nextcloud/talk/adapters/messages/OutcomingVoiceMessageViewHolder.kt b/app/src/main/java/com/nextcloud/talk/adapters/messages/OutcomingVoiceMessageViewHolder.kt
index 1247135e9..c011efce4 100644
--- a/app/src/main/java/com/nextcloud/talk/adapters/messages/OutcomingVoiceMessageViewHolder.kt
+++ b/app/src/main/java/com/nextcloud/talk/adapters/messages/OutcomingVoiceMessageViewHolder.kt
@@ -137,7 +137,13 @@ class OutcomingVoiceMessageViewHolder(outcomingView: View) : MessageHolders
 
         binding.checkMark.setContentDescription(readStatusContentDescriptionString)
 
-        Reaction().showReactions(message, binding.reactions, binding.messageTime.context, true)
+        Reaction().showReactions(
+            message,
+            binding.reactions,
+            binding.messageTime.context,
+            true,
+            viewThemeUtils
+        )
         binding.reactions.reactionsEmojiWrapper.setOnClickListener {
             reactionsInterface.onClickReactions(message)
         }
diff --git a/app/src/main/java/com/nextcloud/talk/adapters/messages/Reaction.kt b/app/src/main/java/com/nextcloud/talk/adapters/messages/Reaction.kt
index 08ae5d868..1eff0dae0 100644
--- a/app/src/main/java/com/nextcloud/talk/adapters/messages/Reaction.kt
+++ b/app/src/main/java/com/nextcloud/talk/adapters/messages/Reaction.kt
@@ -27,11 +27,11 @@ import android.content.Context
 import android.view.ViewGroup
 import android.widget.LinearLayout
 import android.widget.TextView
-import androidx.appcompat.content.res.AppCompatResources
 import androidx.core.content.ContextCompat
 import com.nextcloud.talk.R
 import com.nextcloud.talk.databinding.ReactionsInsideMessageBinding
 import com.nextcloud.talk.models.json.chat.ChatMessage
+import com.nextcloud.talk.ui.theme.ViewThemeUtils
 import com.nextcloud.talk.utils.DisplayUtils
 import com.vanniktech.emoji.EmojiTextView
 
@@ -41,7 +41,8 @@ class Reaction {
         message: ChatMessage,
         binding: ReactionsInsideMessageBinding,
         context: Context,
-        isOutgoingMessage: Boolean
+        isOutgoingMessage: Boolean,
+        viewThemeUtils: ViewThemeUtils
     ) {
         binding.reactionsEmojiWrapper.removeAllViews()
         if (message.reactions != null && message.reactions!!.isNotEmpty()) {
@@ -49,7 +50,6 @@ class Reaction {
             var remainingEmojisToDisplay = MAX_EMOJIS_TO_DISPLAY
             val showInfoAboutMoreEmojis = message.reactions!!.size > MAX_EMOJIS_TO_DISPLAY
 
-            val textColor = getTextColor(context, isOutgoingMessage, binding)
             val amountParams = getAmountLayoutParams(context)
             val wrapperParams = getWrapperLayoutParams(context)
 
@@ -58,9 +58,12 @@ class Reaction {
             val paddingBottom = DisplayUtils.convertDpToPixel(WRAPPER_PADDING_BOTTOM, context).toInt()
 
             for ((emoji, amount) in message.reactions!!) {
+                val isSelfReaction = message.reactionsSelf != null &&
+                    message.reactionsSelf!!.isNotEmpty() &&
+                    message.reactionsSelf!!.contains(emoji)
+                val textColor = getTextColor(isOutgoingMessage, isSelfReaction, binding, viewThemeUtils)
                 val emojiWithAmountWrapper = getEmojiWithAmountWrapperLayout(
-                    context,
-                    message,
+                    binding.reactionsEmojiWrapper.context,
                     emoji,
                     amount,
                     EmojiWithAmountWrapperLayoutInfo(
@@ -69,7 +72,10 @@ class Reaction {
                         wrapperParams,
                         paddingSide,
                         paddingTop,
-                        paddingBottom
+                        paddingBottom,
+                        viewThemeUtils,
+                        isOutgoingMessage,
+                        isSelfReaction
                     ),
                 )
 
@@ -86,7 +92,6 @@ class Reaction {
 
     private fun getEmojiWithAmountWrapperLayout(
         context: Context,
-        message: ChatMessage,
         emoji: String,
         amount: Int,
         layoutInfo: EmojiWithAmountWrapperLayoutInfo
@@ -98,12 +103,17 @@ class Reaction {
         emojiWithAmountWrapper.addView(getReactionCount(context, layoutInfo.textColor, amount, layoutInfo.amountParams))
         emojiWithAmountWrapper.layoutParams = layoutInfo.wrapperParams
 
-        if (message.reactionsSelf != null &&
-            message.reactionsSelf!!.isNotEmpty() &&
-            message.reactionsSelf!!.contains(emoji)
-        ) {
-            emojiWithAmountWrapper.background =
-                AppCompatResources.getDrawable(context, R.drawable.reaction_self_background)
+        if (layoutInfo.isSelfReaction) {
+            val color = if (layoutInfo.isOutgoingMessage) {
+                ContextCompat.getColor(
+                    emojiWithAmountWrapper.context,
+                    R.color.bg_message_list_incoming_bubble
+                )
+            } else {
+                layoutInfo.viewThemeUtils.getScheme(emojiWithAmountWrapper.context).primaryContainer
+            }
+            layoutInfo.viewThemeUtils.setCheckedBackground(emojiWithAmountWrapper, color)
+
             emojiWithAmountWrapper.setPaddingRelative(
                 layoutInfo.paddingSide,
                 layoutInfo.paddingTop,
@@ -166,12 +176,13 @@ class Reaction {
     }
 
     private fun getTextColor(
-        context: Context,
         isOutgoingMessage: Boolean,
-        binding: ReactionsInsideMessageBinding
+        isSelfReaction: Boolean,
+        binding: ReactionsInsideMessageBinding,
+        viewThemeUtils: ViewThemeUtils
     ): Int {
-        var textColor = ContextCompat.getColor(context, R.color.white)
-        if (!isOutgoingMessage) {
+        var textColor = viewThemeUtils.getScheme(binding.root.context).onSurfaceVariant
+        if (!isOutgoingMessage || isSelfReaction) {
             textColor = ContextCompat.getColor(binding.root.context, R.color.high_emphasis_text)
         }
         return textColor
@@ -183,7 +194,10 @@ class Reaction {
         val wrapperParams: LinearLayout.LayoutParams,
         val paddingSide: Int,
         val paddingTop: Int,
-        val paddingBottom: Int
+        val paddingBottom: Int,
+        val viewThemeUtils: ViewThemeUtils,
+        val isOutgoingMessage: Boolean,
+        val isSelfReaction: Boolean
     )
 
     companion object {
diff --git a/app/src/main/java/com/nextcloud/talk/ui/theme/ViewThemeUtils.kt b/app/src/main/java/com/nextcloud/talk/ui/theme/ViewThemeUtils.kt
index 5c5cb6bff..59b25f18e 100644
--- a/app/src/main/java/com/nextcloud/talk/ui/theme/ViewThemeUtils.kt
+++ b/app/src/main/java/com/nextcloud/talk/ui/theme/ViewThemeUtils.kt
@@ -690,6 +690,19 @@ class ViewThemeUtils @Inject constructor(private val theme: ServerTheme, private
         }
     }
 
+    fun setCheckedBackground(linearLayout: LinearLayout, @ColorInt backgroundColor: Int) {
+        withScheme(linearLayout) { scheme ->
+            val drawable = AppCompatResources
+                .getDrawable(linearLayout.context, R.drawable.reaction_self_background)!!
+                .mutate()
+            DrawableCompat.setTintList(
+                drawable,
+                ColorStateList.valueOf(backgroundColor)
+            )
+            linearLayout.background = drawable
+        }
+    }
+
     companion object {
         private val THEMEABLE_PLACEHOLDER_IDS = listOf(
             R.drawable.ic_mimetype_package_x_generic,
diff --git a/app/src/main/res/drawable/reaction_self_background.xml b/app/src/main/res/drawable/reaction_self_background.xml
index 3310cf25a..deaea7a6f 100644
--- a/app/src/main/res/drawable/reaction_self_background.xml
+++ b/app/src/main/res/drawable/reaction_self_background.xml
@@ -21,10 +21,10 @@
 
     <stroke
         android:width="1dp"
-        android:color="@color/colorPrimary" />
+        android:color="@color/high_emphasis_text" />
 
     <solid
-        android:color="@color/bg_message_own_reaction" />
+        android:color="#FFFFFF" />
 
     <padding
         android:left="1dp"