diff --git a/native/components/color-selector-button.react.js b/native/components/color-selector-button.react.js
index 38bc92f15..f5d3fd2f9 100644
--- a/native/components/color-selector-button.react.js
+++ b/native/components/color-selector-button.react.js
@@ -1,58 +1,61 @@
 // @flow
 
 import * as React from 'react';
-import { StyleSheet, TouchableOpacity, View } from 'react-native';
+import { TouchableOpacity, View } from 'react-native';
 import tinycolor from 'tinycolor2';
 
 import type { SetState } from 'lib/types/hook-types';
 
+import { useStyles } from '../themes/colors';
+
 type ColorSelectorButtonProps = {
   +color: string,
   +pendingColor: string,
   +setPendingColor: SetState<string>,
 };
 function ColorSelectorButton(props: ColorSelectorButtonProps): React.Node {
   const { color, pendingColor, setPendingColor } = props;
+  const styles = useStyles(unboundStyles);
 
   const colorSplotchStyle = React.useMemo(() => {
     return [styles.button, { backgroundColor: `#${color}` }];
-  }, [color]);
+  }, [color, styles.button]);
 
   const onPendingColorSelected = React.useCallback(() => {
     setPendingColor(color);
   }, [setPendingColor, color]);
 
   const isSelected = tinycolor.equals(pendingColor, color);
   return (
     <View style={isSelected ? styles.outerRingSelected : styles.outerRing}>
       <TouchableOpacity
         style={colorSplotchStyle}
         onPress={onPendingColorSelected}
       />
     </View>
   );
 }
 
-const styles = StyleSheet.create({
+const unboundStyles = {
   button: {
     borderRadius: 20,
     height: 40,
     margin: 10,
     width: 40,
   },
   outerRing: {
     borderRadius: 40,
     height: 60,
     margin: 5,
     width: 60,
   },
   outerRingSelected: {
-    backgroundColor: '#404040',
+    backgroundColor: 'modalForegroundBorder',
     borderRadius: 30,
     height: 60,
     margin: 5,
     width: 60,
   },
-});
+};
 
 export default ColorSelectorButton;
diff --git a/native/components/color-selector.react.js b/native/components/color-selector.react.js
index 543c10265..c857472b2 100644
--- a/native/components/color-selector.react.js
+++ b/native/components/color-selector.react.js
@@ -1,103 +1,103 @@
 // @flow
 
 import * as React from 'react';
 import { Text, TouchableOpacity, View, StyleSheet } from 'react-native';
 import tinycolor from 'tinycolor2';
 
 import { selectedThreadColors } from 'lib/shared/thread-utils';
 
 import ColorSelectorButton from './color-selector-button.react';
 
 type ColorSelectorProps = {
   +currentColor: string,
   +windowWidth: number,
   +onColorSelected: (hex: string) => void,
 };
 function ColorSelector(props: ColorSelectorProps): React.Node {
   const { currentColor, onColorSelected } = props;
   const [pendingColor, setPendingColor] = React.useState(currentColor);
 
   const colorSelectorButtons = React.useMemo(
     () =>
       selectedThreadColors.map(color => (
         <ColorSelectorButton
           key={color}
           color={color}
           pendingColor={pendingColor}
           setPendingColor={setPendingColor}
         />
       )),
     [pendingColor],
   );
 
   const firstRow = React.useMemo(
     () => colorSelectorButtons.slice(0, colorSelectorButtons.length / 2),
     [colorSelectorButtons],
   );
 
   const secondRow = React.useMemo(
     () => colorSelectorButtons.slice(colorSelectorButtons.length / 2),
     [colorSelectorButtons],
   );
 
   const saveButtonDisabled = tinycolor.equals(currentColor, pendingColor);
   const saveButtonStyle = React.useMemo(
     () => [
       styles.saveButton,
       {
         backgroundColor: saveButtonDisabled ? '#404040' : `#${pendingColor}`,
         width: 0.75 * props.windowWidth,
       },
     ],
     [saveButtonDisabled, pendingColor, props.windowWidth],
   );
 
   const onColorSplotchSaved = React.useCallback(() => {
     onColorSelected(`#${pendingColor}`);
   }, [onColorSelected, pendingColor]);
 
   return (
     <View style={styles.container}>
       <Text style={styles.header}>Select chat color</Text>
       <View style={styles.colorButtons}>{firstRow}</View>
       <View style={styles.colorButtons}>{secondRow}</View>
       <TouchableOpacity
         style={saveButtonStyle}
         onPress={onColorSplotchSaved}
         disabled={saveButtonDisabled}
       >
         <Text style={styles.saveButtonText}>Save</Text>
       </TouchableOpacity>
     </View>
   );
 }
 
 const styles = StyleSheet.create({
   colorButtons: {
     flexDirection: 'row',
     justifyContent: 'space-evenly',
   },
   container: {
     alignItems: 'center',
     flex: 1,
   },
   header: {
-    color: 'white',
+    color: 'modalForegroundLabel',
     fontSize: 24,
     fontWeight: 'bold',
     marginBottom: 10,
     marginTop: 20,
   },
   saveButton: {
     alignItems: 'center',
     borderRadius: 5,
     margin: 10,
     padding: 10,
   },
   saveButtonText: {
     color: 'white',
     fontSize: 16,
   },
 });
 
 export default ColorSelector;