diff --git a/native/components/color-rows.react.js b/native/components/color-rows.react.js
index 04d2c1a0a..24129f917 100644
--- a/native/components/color-rows.react.js
+++ b/native/components/color-rows.react.js
@@ -1,59 +1,60 @@
 // @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';
+import type { ViewStyle } from '../types/styles.js';
 
 type Props = {
   +pendingColor: string,
   +setPendingColor: SetState<string>,
-  +outerRingSelectedColor?: string,
+  +outerRingSelectedColorStyle?: ViewStyle,
 };
 
 function ColorRows(props: Props): React.Node {
-  const { pendingColor, setPendingColor, outerRingSelectedColor } = props;
+  const { pendingColor, setPendingColor, outerRingSelectedColorStyle } = props;
 
   const colorSelectorButtons = React.useMemo(
     () =>
       selectedThreadColors.map(color => (
         <ColorSelectorButton
           key={color}
           color={color}
           pendingColor={pendingColor}
           setPendingColor={setPendingColor}
-          outerRingSelectedColor={outerRingSelectedColor}
+          outerRingSelectedColorStyle={outerRingSelectedColorStyle}
         />
       )),
-    [outerRingSelectedColor, pendingColor, setPendingColor],
+    [outerRingSelectedColorStyle, 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 c1c2ca5b0..042147a47 100644
--- a/native/components/color-selector-button.react.js
+++ b/native/components/color-selector-button.react.js
@@ -1,72 +1,73 @@
 // @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';
+import type { ViewStyle } from '../types/styles.js';
 
 type ColorSelectorButtonProps = {
   +color: string,
   +pendingColor: string,
   +setPendingColor: SetState<string>,
-  +outerRingSelectedColor?: string,
+  +outerRingSelectedColorStyle?: ViewStyle,
 };
 function ColorSelectorButton(props: ColorSelectorButtonProps): React.Node {
-  const { color, pendingColor, setPendingColor, outerRingSelectedColor } =
+  const { color, pendingColor, setPendingColor, outerRingSelectedColorStyle } =
     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}` });
+    if (outerRingSelectedColorStyle) {
+      result.push(outerRingSelectedColorStyle);
     }
 
     return result;
-  }, [outerRingSelectedColor, styles.outerRingSelected]);
+  }, [outerRingSelectedColorStyle, styles.outerRingSelected]);
 
   const onPendingColorSelected = React.useCallback(() => {
     setPendingColor(color);
   }, [setPendingColor, color]);
 
   const isSelected = tinycolor.equals(pendingColor, color);
   return (
     <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;