diff --git a/native/components/color-rows.react.js b/native/components/color-rows.react.js
index 50aaf4953..04d2c1a0a 100644
--- a/native/components/color-rows.react.js
+++ b/native/components/color-rows.react.js
@@ -1,57 +1,59 @@
 // @flow
 
 import * as React from 'react';
 import { View, StyleSheet } from 'react-native';
 
 import { selectedThreadColors } from 'lib/shared/color-utils.js';
 import type { SetState } from 'lib/types/hook-types.js';
 
 import ColorSelectorButton from './color-selector-button.react.js';
 
 type Props = {
   +pendingColor: string,
   +setPendingColor: SetState<string>,
+  +outerRingSelectedColor?: string,
 };
 
 function ColorRows(props: Props): React.Node {
-  const { pendingColor, setPendingColor } = props;
+  const { pendingColor, setPendingColor, outerRingSelectedColor } = props;
 
   const colorSelectorButtons = React.useMemo(
     () =>
       selectedThreadColors.map(color => (
         <ColorSelectorButton
           key={color}
           color={color}
           pendingColor={pendingColor}
           setPendingColor={setPendingColor}
+          outerRingSelectedColor={outerRingSelectedColor}
         />
       )),
-    [pendingColor, setPendingColor],
+    [outerRingSelectedColor, pendingColor, setPendingColor],
   );
 
   const firstRow = React.useMemo(
     () => colorSelectorButtons.slice(0, colorSelectorButtons.length / 2),
     [colorSelectorButtons],
   );
 
   const secondRow = React.useMemo(
     () => colorSelectorButtons.slice(colorSelectorButtons.length / 2),
     [colorSelectorButtons],
   );
 
   return (
     <>
       <View style={styles.colorRowContainer}>{firstRow}</View>
       <View style={styles.colorRowContainer}>{secondRow}</View>
     </>
   );
 }
 
 const styles = StyleSheet.create({
   colorRowContainer: {
     flexDirection: 'row',
     justifyContent: 'space-evenly',
   },
 });
 
 export default ColorRows;
diff --git a/native/components/color-selector-button.react.js b/native/components/color-selector-button.react.js
index 012a0420d..c1c2ca5b0 100644
--- a/native/components/color-selector-button.react.js
+++ b/native/components/color-selector-button.react.js
@@ -1,61 +1,72 @@
 // @flow
 
 import * as React from 'react';
 import { TouchableOpacity, View } from 'react-native';
 import tinycolor from 'tinycolor2';
 
 import type { SetState } from 'lib/types/hook-types.js';
 
 import { useStyles } from '../themes/colors.js';
 
 type ColorSelectorButtonProps = {
   +color: string,
   +pendingColor: string,
   +setPendingColor: SetState<string>,
+  +outerRingSelectedColor?: string,
 };
 function ColorSelectorButton(props: ColorSelectorButtonProps): React.Node {
-  const { color, pendingColor, setPendingColor } = props;
+  const { color, pendingColor, setPendingColor, outerRingSelectedColor } =
+    props;
   const styles = useStyles(unboundStyles);
 
   const colorSplotchStyle = React.useMemo(() => {
     return [styles.button, { backgroundColor: `#${color}` }];
   }, [color, styles.button]);
 
+  const outerRingSelectedStyle = React.useMemo(() => {
+    const result = [styles.outerRingSelected];
+    if (outerRingSelectedColor) {
+      result.push({ backgroundColor: `#${outerRingSelectedColor}` });
+    }
+
+    return result;
+  }, [outerRingSelectedColor, styles.outerRingSelected]);
+
   const onPendingColorSelected = React.useCallback(() => {
     setPendingColor(color);
   }, [setPendingColor, color]);
 
   const isSelected = tinycolor.equals(pendingColor, color);
   return (
-    <View style={isSelected ? styles.outerRingSelected : styles.outerRing}>
+    <View style={isSelected ? outerRingSelectedStyle : styles.outerRing}>
       <TouchableOpacity
         style={colorSplotchStyle}
         onPress={onPendingColorSelected}
       />
     </View>
   );
 }
 
 const unboundStyles = {
   button: {
     borderRadius: 20,
     height: 40,
     margin: 10,
     width: 40,
   },
   outerRing: {
     borderRadius: 40,
     height: 60,
     margin: 5,
     width: 60,
   },
   outerRingSelected: {
     backgroundColor: 'modalForegroundBorder',
     borderRadius: 30,
     height: 60,
     margin: 5,
     width: 60,
   },
 };
 
 export default ColorSelectorButton;