diff --git a/native/components/color-selector-button.react.js b/native/components/color-selector-button.react.js
--- a/native/components/color-selector-button.react.js
+++ b/native/components/color-selector-button.react.js
@@ -1,11 +1,13 @@
 // @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,
@@ -13,10 +15,11 @@
 };
 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);
@@ -33,7 +36,7 @@
   );
 }
 
-const styles = StyleSheet.create({
+const unboundStyles = {
   button: {
     borderRadius: 20,
     height: 40,
@@ -47,12 +50,12 @@
     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
--- a/native/components/color-selector.react.js
+++ b/native/components/color-selector.react.js
@@ -82,7 +82,7 @@
     flex: 1,
   },
   header: {
-    color: 'white',
+    color: 'modalForegroundLabel',
     fontSize: 24,
     fontWeight: 'bold',
     marginBottom: 10,